Voodoo Manufacturing: Creating High Power Custom HTML Emails

Jan 2018 - Feb 2018
Goals
  • Quickly creating marketing emails that look good across email clients
  • Creating a flexible and extensible codebase
  • Working with the limitations of email clients such as Outlook

Project Overview

Voodoo manufacturing is a 3D printing company who needed multiple marketing email designs coded out. My job was to take the PSDs and turn them into beautiful responsive emails.

Process

I don’t do emails very often and only take them if they are from scratch. Why exactly? Emails are notoriously difficult due to the technology limitations and rendering engines used by applications like Outlook. For these, I used a framework called Inky by Zurb.

The goal of Inky is to utilize modern build tools such as SCSS and an auto-inliner. With these tools, the process was very similar to building out basic HTML templates with some styling. Emails can’t do much, and JavaScript(interactivity) is limited, so this part of the process was straightforward.

The real challenge came with template testing, which was most of the work. Gmail, Yahoo, and other popular email clients were fair in terms of rendering. The real problem came when testing for Outlook, which sucked most of the time. Inky takes care of a lot, but a large chunk of time was spent making the custom design work with wonky rendering quirks.

TL;DR

Build out the initial template, then do cross-service testing for Gmail, Yahoo, Outlook, etc. Repeat for each template.

Voodoo Manufacturing

I had a great experience working with Brandon. He asked all the right questions and kept me updated throughout the duration of the project. He completed the project right on schedule and everything turned out perfect!

Voodoo manufacturing

Once again, Brandon was a pleasure to work with. He kept me up to date on the progress of the project and delivered the completed files right on time.

Technologies Used

Inky

Inky uses a build process(gulp or webpack) for auto-inlining and SCSS compilation. This allows email rendering engines to be happy without having to manually inline every line of HTML. Thank god!

Other Tech

Besides Inky, other skills included CSS/SASS, HTML, and responsive media queries.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Converting jQuery Blog Post Component To Vanilla JS

I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]

Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript

I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]

Demo 3
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

View all 5 code samples