Creating HTML Email That Works

If you’ve ever had to create HTML emails, I’m betting you found it to be a messy and confusing process. I know I have.

For the first year or so of Webvanta’s existence, we just sent plain text emails. But ultimately we felt that there was just too much lost—as much as some folks disparage HTML emails, the reality is that they are far more readable than plain text if done well.

If you use an email marketing service, as you should if you’re sending more than the very occasional bulk email, it will provide some sort of template-based email authoring tool. Unfortunately, I’ve found them all to be lacking in various ways when it comes to creating emails.

I’ve concluded that the best approach is to maintain your own HTML template, and hand-code the emails. Then you can paste that content into whatever email service you’re using.

The Ugly World of HTML in Email Clients

This leaves you with the need to create a good HTML email template, and this is easier said than done. In the web world, we’re all accustomed to taking half-a-dozen browsers into account. In the ugly world of HTML email, we have literally several dozen email clients to consider. Not only that, their support for HTML is far more limited and inconsistent than in the browser world. (See the Email Standards Project for details.)

Sadly, two of the most common email clients—Microsoft Outlook and Google’s Gmail—are two of the worst:

• Microsoft, apparently unsatisfied with having Outlook’s HTML email rendering be as bad as Internet Explorer, decided to make it far worse. Starting with the 2007 release of Outlook, Microsoft switched to using the Microsoft Word HTML engine instead. It’s almost incomprehensible.
• While Google is generally a strong supporter of web standards, it has a bad attitude about HTML in Gmail. For example, it simply ignores any CSS styles that aren’t inlined.

The Path to Sanity

Fortunately, the importance of HTML email as a marketing medium has led to the creation of a lot of expertise about how to deal with this mess.

The key is to imagine that you’re back in 1999, except worse, and to completely reset your ideas about best practices. HTML design for email has it’s own warped world of best practices, which include:

• Use tables for layout
• Don’t use style definitions, but instead inline styles in every element
• Don’t depend on niceties like margins and padding, but use nested tables instead
• Don’t count on images being displayed at all
• Forget about JavaScript, Flash, and iFrames

Finally, a Book on HTML Email

Since you can’t rely on anything in the normal web world to learn how to create good HTML email, you need different resources. There’s now an excellent book available on the subject: Create Stunning HTML Email That Just Works, by Matthew Patterson.

Matthew works at Campaign Monitor, one of the better email marketing services, and he’s had the misfortune of looking at many thousands of HTML emails. He’s distilled this experience into a compact book that will get you well up the learning curve. You can read a couple of sample chapters on the web if you need more convincing.

I wish the book went into more detail in a number of areas, but it’s a quick read and it will make you more knowledgeable on the subject than the vast majority of designers. It covers much more than just how to code for bad HTML renderers; it starts with the goals of HTML email, how the email environment differs from the web, and how to design accordingly.

More Resources for Designing HTML Email

You can also find lots of resources about HTML email on the web. Here’s a few that I found particularly useful:

• Email design guidelines, an article from Campaign Monitor that summarizes coding best practices.
• Guide to CSS support in email clients. The folks at Campaign Monitor have done the tedious testing to find out what works and what doesn’t.
• Email marketing field guide, a free e-book from the primates over at MailChimp with tons of great information.
• How to Code HTML Email Newsletters, a SitePoint article by Tim Slavin.
• Email Marketing Reports has dozens of useful articles on email marketing.

You don’t need to start from scratch; there are lots of email templates available that give you a tested starting point. Here’s a few good sources:

• Campaign Monitor (free)
• MailChimp (free)
• ThemeForest (mostly $9 to $17)
• And many more… just do a Google search for ‘HTML Email Templates’. Note that many companies showcase their templates, but you must use their service to use them.

When you have your HTML email coded, a great service for seeing how it looks in lots of email programs, browsers, and on various phones is Litmus. Starting at $49/month ($99/month if you want analytics and spam testing), it isn’t cheap, but if you’re doing a lot of email marketing it is probably worth it.

Now, How Are You Going to Send It?

Once you’re ready to send your HTML emails, you’ll probably want to use an email marketing service. There’s dozens of them out there, known by the in-crowd as ESPs (email service providers). Choosing one can be almost as confusing as coding your HTML email. We’ve been around the block with lots of them, but that’s a story for another post.