...And Now a Brief Message About HTML Emails

Blair Culbreth, Director of Visual Design

Posted on December 10, 2010

We've talked about everyone's favorite thing, HTML emails, before. Jim posted an invaluable list of resources. And Keith posted about a buildout trick that will save the day 99% of the time. But I do a lot of HTML emails around here and just read Mathew Patterson's "Create Stunning HTML Email That Just Works!" so I've had them on the brain recently and wanted to share a quick rundown of what Mathew Patterson, and my own fair share of experience, has taught me about the oft maligned HTML email.

The Emails Themselves

First lets learn the nature of the beast. Mathew Patterson breaks down email marketing into five types of emails:

Newletters - Newsletters are regularly sent to promote a company's news and events. Usually once every month or two weeks.
Catalogs - Regularly sent, like a newsletter, but to promote products.
Announcements - Special, promotional, one-off emails. Short, usually with just one call to action.
Press Releases - Similarly one-off like announcements, but more about public relations than sales.
Sales and Sign-up Processes - These are most directly advertising and trying to start a sale or at least get people to sign-up to be in the loop about a product. These often link to a landing page.

The Design

An HTML email design should be simple and straight to the point. As Patterson says, "as short as you can make it without making it useless."

Even then, the top headline or graphic should convey enough instant information that a person would get the gist of the email's message without reading the whole thing. Because, honestly, you can't count on your entire email being read?

Unless it's a newsletter or catalog email, try to only have one call to action. Just like how a person might not take the time to read an entire email, they might not take time to figure out what several different messages and calls to action mean. But you can't go wrong with having one clear, unmistakable message that you're getting across.

The Buildout

Building out emails is not glamorous. The best rule of thumb is basically to code like it's 1997. The easiest way to guarantee a consistent layout across email clients is to do everything you can to structure the layout with tables, spacer.gifs, etc. It may feel wrong at first, but building a design out in tables is just like riding a bike; you'll be nesting tables and figuring out colspans just like the good ole days in no time. There is room for inline CSS in your code, at least. It's best used for simple styling like fonts and colors.

A big reason for all the limitations is, of course, Outlook 2007. Outlook 2007 does not support very much. Here's a run-down of just some of the biggies that you can't do if you want your design to be consistent in Outlook 2007:

No background images
No forms
No Flash or other plugins
No CSS floats
No CSS positioning
No animated .gifs (even animated .gifs aren't safe!)

Test, test, test

So you've got your email designed and coded, now you need to make sure it works in the wide array of email clients out there. Viget's standard is to test emails at the very least in Gmail, Hotmail, Yahoo!, AOL Mail, Outlook 2003, and Outlook 2007. You never know which client wil be the one to give you issues, so it's always important to be thorough.

If you don't want to create a wealth of test accounts and check them all in multiple browsers, another option I've tried out is Campaign Monitor's testing tool. For $5 you can see screenshots of how the email will look in over 20 clients, including mobile devices. It's a really convenient tool, though you have to wait to get some of the client screenshots back, so it's not always necessarily faster than testing, depending on how thorough you need to be.

Obviously, this just skims the surface. I'd strongly recommend checking out Create Stunning HTML Email That Just Works! if you're looking for a thorough breakdown of how to design, code, create, and send great, successful HTML emails.