Voodoo Manufacturing: Creating High Power Custom HTML Emails
Jan 2018 - Feb 2018
- 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
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.
Voodoo Email Examples
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 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.
Build out the initial template, then do cross-service testing for Gmail, Yahoo, Outlook, etc. Repeat for each template.
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!
Besides Inky, other skills included CSS/SASS, HTML, and responsive media queries.
Want to check out some code demos?
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 […]
Discord Bot: Reddit API Ask Feature
The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]
React.js Modal Using The Hooks API
Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]