A Designer's Guide to HTML Email

We hate to love it and we love to hate it, but HTML email is here to stay. Come along for a down 'n' dirty tour of our HTML newsletter redesign process, and learn how we tackled the monster head-on!

Part I—The Dark Heart of HTML Email

Sometimes I feel sorry for poor ol’ Internet Explorer 6. It don’t get too much love. You only have to wander the more prominent web dev blogs and forums to realize that IE6 has been the web’s number one kicking boy for some time now—and with all those endearing little rendering bugs, perhaps deservedly so.

However, if you ever harbored a secret desire to rebuild your tattered relationship with IE6—to rekindle that flame—it’s easily done. Simply spend a little quality time working with HTML email and I guarantee you’ll have the words “I HEART IE6” tattooed on your left buttock by the second week.

Yes, my friends, you know not the meaning of rendering inconsistencies till you’ve delved into the dark heart of HTML mail client rendering.

At this stage I’ve managed to piece together some rough rules of thumb to use when you’re asked to work on HTML email.

Rule 1: Run. Immediately. Don’t pack. Don’t think. Just GO!

Rule 2: If you can’t beat the guards, you’ll need to surrender yourself to one immutable core truth, Grasshopper. The true skill in designing HTML email is not controlling if it breaks—it’s controlling how it breaks.

The Brief

There were two major issues we had with our former newsletter template:

Firstly, like almost all legacy HTML email, our old template blew itself to tiny pieces in Outlook 2007. Any new template design needed to account for Outlook 2007’s “pre-Pearl Jam” era rendering abilities—no background images and comedic CSS support.

Secondly, the reality is that in 2008 most of us block images to new emails from unknown senders—and for good reason. This means you simply have to assume that your first and arguably most important HTML email will arrive without any supporting imagery. If your branding and identification is tied to images, your email arrives nude and punched full of holes—not a good first impression. We needed something that at least looked vaguely legible and professional if the recipient nixed the pics.

The Strange World of Mail Clients

From our initial testing, we found we could split most mail clients into one of three main groups:

1. The Angel’s Choir: This group of mail clients have strong and generally reliable HTML rendering capabilities, and includes Thunderbird, Apple Mail, and Opera Mail. Hand them your song sheet and they’ll mostly sing it back to you note-perfect. You can essentially treat these mail clients as if they are normal, modern browsers.


2. The Muddlers: This group includes the majority of the remaining mail clients and includes Outlook 2003, Outlook Express, and Yahoo Mail. While you’ll probably encounter some variability in their renderings—often in text size and margins/padding—the Muddlers will generally honor your page layout. Any issue that can’t be easily fixed is most often trivial enough to accept. These clients are like IE6—irritating in a vaguely predictable way.


3. The Legion of Doom: This is an insidious crew of desperadoes led by the Evil Outlook 2007 and also including Gmail, Hotmail, and Lotus Notes. Each uses their own unique but evil super-powers to subvert and destroy your HTML rendering. As this is the problem group, I’ll expand a little more on them.

• Outlook 2007: No background-image support whosoever. Almost no CSS positioning support. Patchy general CSS support.
• Gmail: Actively strips all background images and will remove background-color information too if you’re not careful in how you declare it. Rewrites your email with a tangled web of random CSS classes that make it almost impossible to track which rule is doing what.
• Lotus Notes: Crazy like a fox. Again, removes all backgrounds and has scant regard for padding and margins.

Getting Started on the Right Foot

Make no mistake, HTML email is a complete and utter minefield. There are very few rules that you can rely upon across all mail clients, so unless you have extensive personal experience to draw on, you’re most likely going to want start with a template that gets most of the fundamentals right.

Thankfully both Campaign Monitor and MailChimp provide an excellent range of free, downloadable templates that will get you off on the right foot.

• Campaign Monitor HTML Email Templates
• MailChimp HTML Email Templates

Ultimately, we combined elements of several templates to give us the solid foundation we needed.

One interesting consideration is the content width—all the templates provided above are considerably thinner than the retired Design View template.

While this seems counter-intuitive—after all, screens are bigger than ever—there is a greater tendency for users to read their HTML email in a webmail environment (i.e. Gmail, Yahoo Mail, etc).

A quick glance at any of these clients will show they all devote extra horizontal space to advertising and tertiary navigation, leaving less width for your content. While this isn’t ideal for presenting your content, the alternative is worse—some of the mainstream webmail clients feature cropped or horizontally scrolling content.