Reach HTML Emails
Feb 2018 - Mar 2018
Goals
- Create high performing HTML emails using reusable template HTML
- Make the templates editable via the MailChimp admin area
- Render the emails accurately across email clients and screen sizes
Project Overview
Reach NC Voices needed a reusable email template for their multiple campaigns. My job was to create a template from a pre-existing design and some assets. The design was a header, a variable amount of columns, and a footer that linked to their main social accounts.
Reach HTML Email Gallery
There could be any amount of columns here, so the code and design had to account for campaigns with more or less copy.
The footer at the bottom contains an editable link, and 3 buttons for social media.
The offset image is a little tricky to get right across email clients, and required a background image trick. There's also a simple link to open up the email in the browser.
Process
The process was pretty straightforward development-wise. Get the assets, then build it out with my framework of choice. The main things I had to account for included:
- Variable amounts of content, including single and multi line content
- Multiple header columns
- Changeable social media links
The process for actually editing the content was done initially, but also fine tuned after the delivery.
For any email, most of the time was spent testing it for cross-client compatibility. The hardest one was Outlook, but I also had to test for Yahoo, Gmail, and other major email clients. For the most part, I test my templates after they are completely built out, then fine-tune from there.
Technologies Used
Foundation for Emails
The main technology used for this project was a framework called Inky, or Foundation for Emails. Inky basically takes extremely verbose table markup and turns it into its own intuitive tags. Overall, it’s a lifesaver and I don’t think I’d touch email development without it.
Other Tech
Other tech used for this email template was basic, since not much is allowed in the first place. Inky utilizes SCSS, a gulp/webpack build, and basic knowledge of media queries.
Integrating with MailChimp
Integrating with MailChimp afterwards was fairly straightforward. MailChimp uses its own tags which you specify in the markup. Tags let you duplicate content, set image links, and add colors and styles to paragraphs. It was only a matter of making the necessary parts editable.
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 […]