8 HTML Email Tips I Wish I’d Known Sooner

One of the challenges a designer faces when asked to create an HTML email is that, in many ways, they have to unlearn what they have learned about accessible, clean web design. As if designing web pages for multiple browsers and platform wasn’t tricky enough, designing for multiple email clients is worse.

The problem is that not only do different desktop email clients like Outlook or Thunderbird render HTML email messages differently, popular webmail tools like Hotmail, Yahoo Mail, and Gmail all rewrite, change, and alter your code to fit it within their web-based email application. Some disable CSS styles, some break any links to external stylesheets, and almost all of them will pick and choose between which CSS elements they will support, and which they will ignore.

Clients already receive slick, cool-looking HTML email in their in-boxes… They don’t care about coding and compatibility problems — they just want something cool, too. “Hey, if Apple can do it,” they say, “why can’t we?”

But wait, it gets better — increasingly, thanks to Spam and security concerns, the default mode of many webmail clients is to block images from new recipients until a user opts to allow them.

So let’s review: there are countless email readers and applications out there. All of them will render your HTML email differently, supporting all or none of your CSS. In varying degrees they will all rewrite your code. And, quite often, your images won’t be viewable to the end user. Swell.

One solution might be to take Zeldman’s advice and stop using HTML email altogether. After all, email isn’t the web, so why try to treat it as if it were? Save design for web pages and keep email light, text-only, and simple.

But most of us have clients or bosses who already receive slick, cool-looking HTML email in their in-boxes. As consumers, they already see that some people are generating pretty, polished, stylized emails. They don’t care about coding and compatibility problems — they just want something cool, too. “Hey, if Apple can do it,” they say, not unreasonably, “why can’t we?”

Moreover, from a marketing perspective, many organizations find that well-designed HTML emails get higher open and click-through rates than text-only email.

So, it seems, the solution for designers who need to design HTML email is to create designs that work relatively consistently across platforms and email clients. Here are eight tips for making that happen:

1. Make Nice with Tables.

Most good web designers these days have turned away from the use of tables on layout, opting instead for usable, accessible CSS-based presentation and layout. However, with HTML email, a lot of these approaches won’t work. Almost every web-based email client will ignore or mangle CSS-based layout. Those carefully floated and positioned elements will wind up in entirely different places than you intend. The only way to ensure that things line up the way you want them to across the wide range of email clients is to use tables.

Yes, tables. It’s tough to accept, but tables are a necessary evil for HTML email. You don’t have to don’t go back to the worst of table-based layout techniques — spacer images, hacked up artwork, and endlessly nested code. But tables can provide basic structure, columns, and grids for laying out HTML email. It may be a bitter pill to swallow, but if Rocky could team up with Apollo, if Sarah Connor could learn to trust a Terminator, if Johnny Damon could play with the Yankees, you can learn to get along with tables again. You may feel dirty, but you’ll get over it, I promise.

2. Use CSS… just not too much.

Here’s the good news: you can use CSS to style content in HTML emails. But the bad news: you can’t use it too much. Campaign Monitor has an essential, comprehensive guide to which CSS elements work in various email clients, but here’s the Cliff Notes version: generally speaking, you can use CSS to format content, but don’t rely on it for layout. Use CSS to style font sizing and color. Use CSS for basic border and background background color effects. Use CSS to apply some simple padding and margin effects. Beyond that, you’re starting to ask for trouble. When I design an HTML email template, I generally use CSS to handle the presentation of body fonts, headers, and simple alignment and spacing.

3. Ignore the HEAD, focus on the BODY

An important rule to remember is not to link to an external stylesheet. Many email clients, desktop and web-based alike, are suspicious of an email linking to an external file. Some will completely ignore the attempt to import or link to an external CSS file. Moreover, many webmail clients will disregard any code put above the BODY element. So the key is to not only put your CSS style inline in your HTML, but to put it in the BODY of the email, not in the HEAD. With the annoying exception of Gmail, almost every email client will understand and render your inline CSS for basic styling, as long as you put it all in the BODY element.

4. Be smart with images.

Some rules of thumb to remember with images:

Always give images absolute, not relative, paths. Because your message is going to places you can’t predict, all of your images need to be linked with fixed, absolute paths.

Always use ALT tags. They’re not just for good usability and accessibility practices. If an email client has images turned off (and increasingly, email clients turn images off by default) you want them to be able to read a description of the image.

Always provide size attributes for images. If you specify HEIGHT and WIDTH for images, your layout will stay more intact, whether or not someone can see your images.

Before sending out an HTML email, always test it with images turned off. When you try to read the email without any images, does it still make sense? Can a reader still understand your message without the images showing up? If not, go back and rework the design so that, in a worst-case scenario, a reader won’t miss anything important if their reader refuses to display your images. A great tool for testing this is the Web Developer plugin for Firefox. If you don’t have it already, get it now.

5. Go Skinny and Top Heavy.

These days, web sites are getting wider, thanks to the popularity of big monitors and supertanker-sized laptops. But emails can’t afford to get so big. Most people still see email in smaller windows on their desktops. And many only see the top parts of emails, if they skim them through a “preview pane” in their email client. So when you design an email, it needs to be more narrow than many web pages, and it needs to have the most important stuff at the top. Generally-speaking, stick to a width 600 pixels or less when building an email. Anything wider, and a lot of readers will never see the right side of your design.

And if you want readers to see anything more than your logo or some big, pretty image at the top of your email, be sure to get to some real content within the top 200 or 300 pixels from the top of your email. The “preview pane” in Outlook, for example, might only let readers see the a 600 x 200 pixel preview of your message. If you don’t design well for that space, your readers may hit delete before ever bothering to scroll down and find out what you had to say.

6. Design for the Worst-Case Scenario.

Take time to design your email for situations where images or CSS may be turned off. If you haven’t already read Dan Cederholm’s Bulletproof Web Design, order it now. Cederholm provides excellent techniques and methods for making design that is “bulletproof” to most potential problems. While of some Cederholm’s approaches won’t work in HTML email, his general principles are applicable. For example, if you have an image that might be blocked, be sure that there is a background color behind it that will maintain the general look of the page. Plan ahead.

Here’s another example. For one email template I built, we had a sidebar with a special header. To match a non-standard font from their branding, I used a graphic. But since I can’t guarantee that everyone will see this image, I need to make sure that an image-less or unstyled version of the same email will still convey the same basic information. I do this by wrapping an H5 tag around the image. Here’s the HTML:

<h5><img src=”[absolute path to image]/head-goodnews.gif” alt=”GOOD NEWS” width=”140″ height=”20″></h5>

The H5 has the following CSS applied to it:

h5 { font-size: 120%; color: #990000; margin: 0 6px 6px 0;font-weight:bold; border-top:solid #cccccc 1px; line-height: 1.8em;}

Viewed normally, all the H5 does is add a light gray line above the image. Since there’s no text there, it doesn’t need to apply font-sizing or color to anything. Interestingly, though, if the image is turned off, and it will still style the ALT text according to the H5 CSS. So, as you can see below, it will still make the header the right size and the right color. It won’t match the font I used in the image, but at least it will be a close approximate match, and it will still style the line above the header. Finally, if I turn off both the image and the CSS, the H5 still gives the ALT text the standard H5 styling, which is at least better than nothing:
This is just one example, but hopefully I’m making my point. The email should “gracefully degrade” by building it to communicate effectively, even if the CSS or the images get blocked.

7. Provide alternatives.

Your HTML email should always offer prominent links to two alternate versions of your message — a web-based version of the email and a text-only or mobile edition. If you want to make mobile web enthusiasts happy, offer a “mobile edition,” which is just simple HTML with basic content, links, and simple formatting (bold and italic). Yes, it’s more work, but you always want to give your audience a choice. Some people want no-frills text in their in-box, some will never unblock images in their email, but might click on a link to a web-based version of your message instead. And there are always blackberry-addicted readers out there who want to read your message, but need a cleaner, simpler edition. With a little extra effort, you maximize the chances that your audience will see your message. It’s OK if they decide how pretty it looks. Don’t write off any part of your audience because you demand they view your message in a certain way.

8. Test obsessively.

You can design an HTML email that looks wonderful on your screen and in your own email in-box, but that’s just the starting point. You can’t possible test for every email appication in existence, but you should definitely test as many of the major email applications as possible. If you don’t already have accounts with Hotmail, Yahoo Mail, and Gmail, take a few minutes and set up test accounts. If you use Outlook primarily, download Thunderbird or another free email client as a secondary email application to use for testing.

One method I use is to make this simple is to set up a email group that includes all of my test accounts. When I have a draft, I send a test email to that group in one blast and lets me quickly check how everything looks.

Don’t be alarmed if Gmail looks the worst. Gmail, my email client of choice, is sadly weak in terms of supporting HTML emails and often ignores CSS styling that every other email reader handles beautifully. I hold out hopes that Google may improve on this in the future. But for now, I find that you can use the techniques listed above to get Gmail close to matching the design that other readers will see, but it can be tough to get it to match exactly without doing endless inline styling with font tags.

Finally, if you design on a Mac, be sure to test how things look on a Windows machine — fonts appear smaller on a Mac, so you don’t want to be surprised at how it looks on a PC. Macs are great, but they still make up less than 5% of the overall home computer market. It’s flat-out irresonsible and arrogant not to test on the platform that the vast majority of recipients will use when they get your email. There’s simply no excuse for not testing on a PC.

That’s it for now. This is really just scratching the surface, but hopefully it will save you some time trying to figure out why your HTML email design looks terrible in Hotmail or Yahoo. For more on HTML email design, including best practices and tips on marketing, check out the following:

• Campaign Monitor: Email Design Guidelines for 2008
• MailChimp: Email Marketing Guide
• Loren McDonald: 20 HTML Email Tips

In the meantime, let me know if you have any additional tips and suggestions if your own… HTML email design is an ever-evolving and changing practice. Start with best practices now and you’ll be ahead of the curve.