Add sanity to creating HTML emails

3 min readNov 25, 2014

The art of sending an email that looks the same in all currently used email clients, is very much just that, an art. Smartphones are increasing their internet market share so emails have to look good on both desktop and mobile devices. Three of the top six email clients run on mobile devices (see: emailclientmarketshare.com) so we need to create email templates that work on a range of different screen dimensions.

Many email marketers provide you with WYSIWYG tools that allow you to create emails that should perform well in most environments. But for a large number of companies who use email to communicate with their customers, these template tools don’t fit their workflow. I work as a developer and spent an unreasonable amount of time producing an HTML email based on a designers vision.

I looked at some HTML emails that had been used previously and all I could see was HTML <table> dog food that made it nigh impossible to simply “tweak” the current solution in order to satisfy the designers vision that had been passed down to me. It looked like a randomly generated ASCII text file, like the kind you get when you have a thousand monkeys bashing on a keyboard, and the keyboard has a <table> key. Needless to say, my “tweaks” failed and all results shown by litmus looked like the email had been smashed in the head with hooked end of a crowbar and its limbs sawn off with a blunt chainsaw.

As I watched my emails spill their guts in oh some many different email clients over and over, tear drops made their way to the ducts of my eyes.

Days had passed, Monday suddenly turned into Thursday, I was missing my family, friends — they had said their goodbyes a long time ago. My frame was diminishing — bones where previously there had been healthy yoga flesh. I looked into a mirror and death looked back.

It was time to rethink my strategy. Instead of trying to tweak, it was time to setup a workflow that allowed me to write readable HTML code that compiled down to an HTML subset understood by most email clients. A few searches revealed the building blocks that would enable me to do what I wished, all I needed to do was create a simple script that leveraged these blocks.

I ended up using the following node.js libraries:

swig-email-templates
html-minifier

and used the following script to automate the creation of HTML emails in different languages:

mkdir premail
for templ in *.html; do for lang in *.json; do
    swig-email-templates render $templ -r ./ -j $lang | html-minifier —config-file minify.conf > ./premail/${templ%%.*}_${lang%%.*}.html;
done; done

Any files ending with .html are handled as swig based templates, any .json files are handled as language files, we iterate over all templates and all languages to create all possible emails.

Creating HTML based emails has become a lot easier thanks to leveraging these libraries. If your looking for tips on how to write HTML emails then check out the following links:

From my own experience, avoid using   and always use the email marketer to send the email to litmus. Submitting just the HTML to litmus is not advisable, it has inserted spurious spaces many times without my knowing which has resulted in broken images and layout issues.

Add sanity to creating HTML emails

Written by Michael Stöckli