HTML Email: The Quick & Easy Way
It’s a misleading title. Nothing is ever quick or easy when it comes to design or development. But after a few years of searching for different methods of creating HTML emails, I finally came across a killer combination.
Ink, by Zurb
Zurb is a very talented web design/dev team stationed out in Campbell, California. They’ve put together a few awesome products and services, and the one I want draw your attention to is Ink. Ink provides a powerful (and free) boilerplate template for creating cross-browser, cross-client and cross-device HTML emails. You simply download their templates (they offer a few different wireframe-style designs) and customize it to match your brand. The icing on the cake is Inliner, Zurb/Ink’s free web tool that takes your email’s style code and places it in-line.
There are about three basic ways to add CSS to an HTML file. The first is to make a call from your HTML file to an external CSS file. In the case of an HTML email, you would be saying, “Here is the HTML, and you can find the CSS sitting on my server.”, but unfortunately this does not tend to work. Your next option is to include a chunk of code on the top of your HTML file that includes all of your CSS. This works for some email clients, but some large services, like Gmail, tend to not read it. The result is HTML without CSS, which doesn’t usually look as nice. The last option, which is more or less foolproof, is to include your styles in-line. That means that every single div, table, paragraph, headline and any other elements has specific styles written directly into it. While this tends to be very powerful, it’s also a pain to write. The first two methods allow you to say, “Hey, how about we make every headline blue?”, whereas doing it in-line forces to to say “This headline is blue, and this headline is blue, and this headline is blue, and this headline is blue”, which is annoying to write and very tedious to change.
Enter Inliner, a tool that will read your HTML and CSS and combine the two, placing the proper styles in-line so you don’t have to. Woot! But how do you really know it’s cross-everything compliant?
Litmus Email Testing
Litmus.com is a great service, offering the ability to test emails across everything. You can test one email for free and multiple emails for a nominal fee. All you need to do is take the code you generated using Ink’s Inliner and past it into Litmus’s Email Test. A short 10 minutes later or so, you’ll get screenshots of every major browser, device and email client so you know what it looks like.
Honorable Mentions: MailChimp, MadMimi and Campaign Monitor
In the past I would grab free HTML template from Campaign Monitor. While I have yet to try it, I can only imagine the power of combining a Campaign Monitor template with Ink’s boilerplate, running it through Inliner and testing it on Litmus.