Creating HTML Emails - Tips & Tricks

HTML emails are funny… most modern web browsers fully support standard XHMTL 1.0/CSS2.1 when displaying web pages. Email clients, such as Outlook and Entourage, even in their most recent versions, are not nearly so compliant. Furthermore, many web based email clients strip out a lot of markup before they display HTML emails, which means your carefully crafted design may be bastardized in any number of different ways.

Here are a number of tips & tricks that help get things through unmolested. These are current as of April 2010.

Layout Techniques

Use tables for layout. Lots of tables. Table support seems to be pretty solid; support for positioned <div>s less so. If you're doing something REALLY simple, you might be able to get away with a positioned <div>.
If you're making a static width email, make sure it isn't more than 600px wide.
Use inline styles, attached to specific tags. External style sheets are a lost cause, and some web clients, Gmail included, strip out some style declarations made with an inline style sheet (e.g. using the <style> tag). The annoying thing about this is that it means you have to repeat your styles over and over again, but it's better than not having your email show up properly.
That means that if you're coloring your links (and who isn't?), you need to put an inline style on EVERY link. If you don't do this, Gmail will color your links the standard blue:
```
<a href="http://www.apple.com/" style="color:#fe8913">Apple Website</a>
```
There's a tool called the Premailer, which lets you plug styles in via a stylesheet and then it will move them inline automatically. This is useful if you're producing a web version (you should!) and you don't want to put inline styles all over the place.
Here's a list of inline styles that are pretty well supported. For all the gory details, see the Campaign Monitor EMail Client CSS Support Page. The short list:
- background-color
- border
- padding
- color
- font
- font-* (e.g. font-family, font-style, font-size, etc.)
- letter-spacing
- line-height
- table-layout
- text-* (e.g. text-align, text-decoration, text-indent, text-transform)
Keep your emails pretty simple. Most mail readers are going to have a hard time with anything complicated. If you look at most of the HTML emails you get, you'll see that a lot of them have a simple header, body content, and a footer with unsubscribe information. Not much in the way of fancy layout or graphics.
It's generally best to keep messages on a white background. Some mail readers strip out background colors on the body. If you really want to have a colored background, you can make a 'bodyImposter' div that sits right inside the body and has your background color:
```
<body style="margin:0;padding:0;">
<div id="BodyImposter" style="margin:0;padding:0;width:100%;color: #2c2c2c; background-color: #2c2c2c;">
	content goes here
</div>
</body>
```
Mailto: links (e.g. <a href='mailto:bob@bobsmith.com'>Mail Bob Smith</a>) do work in emails, but they'll open whatever the default mail client is on your recipient's machine. That can be a little disconcerting for users if they are, for example, reading your message in their Gmail account, click a mailto: link, and it opens their Outlook 2007 for work. Use them, but use them with caution.
Use HTML character escape sequences, such as ® for ®, instead of inserting the characters directly. Most email clients theoretically support UTF-8, allowing for direct insertion of characters like ®, but best to play it safe.

Text Version

When doing the text version, please visit:

Use ASCII: Use only ASCII characters in your text email messages. This means replacing ® with (R), © with (C), ™ with (TM), etc.
Replace verbiage such as Click Here with Please Visit: {URL}

Using Images

It somewhat goes without saying these days, but host the images for your email on your website. Don't attach them to the email itself. Here are some tips for how to best host them:

ALWAYS date-stamp the filename of every image. For example, use 'header_072808.gif' rather than 'header.gif'. Otherwise, when people go to look at your email a year later and you've changed or moved the image, it will look funny.
Corollary: NEVER, EVER move your images. If you send an email referencing /images/foo.gif_081308.gif, and then you decide to store all your images in an img folder (instead of images) all those old emails will break.
If you're sending a lot of emails, you might consider grouping all the images in an email folder and then inside dated folders, rather than putting a date on each image:
```
/emails/newsletter_030410/images/header.gif
/emails/newsletter_031510/images/header.gif
/emails/newsletter_041010/images/header.gif
```
Make liberal use of width and height, particularly on images. Most mail clients don't download images by default, and if you don't assign a width and height, they won't lay your message out properly until the user clicks 'download images' (which they may never do).
Always use the ALT tag, and make it descriptive. People may be more likely to click 'Download Images' in their email client if they see an ALT tag that looks interesting.

JavaScript / Forms / Flash

Don't use any JS / Forms / Flash. Most mail clients block all rich media (e.g. flash) as well JavaScript and form submissions. Link to forms on your website, and just deal without JS & flash.

Baseline Support (a.k.a. The Worst Email Clients)

As of August 2008, Gmail and Outlook 2007 (which uses the Word rendering engine) are the worst email clients. If you can get it to work in those, it will probably work most anywhere else without too many tweaks.

Mail Client Specific Tricks

Your email may be read in any mail client, so you'll probably want to pay attention to all of these.

Yahoo Mail

The new version of Yahoo Mail screws up <p> spacing; you need to set
```
<style>
p {
	margin-bottom: 1em;
}
</style>
```

(Incidentally, Yahoo Mail does understand inline style sheets, which is why you can use one here even though the advice above says not to use them)

Outlook 2007

In a stroke of pure stupidity, Microsoft decided to switch Outlook 2007 to using the rather broken Microsoft Word HTML rendering engine. The reasoning behind this is that Outlook creates HTML email with the Word engine, and they want those emails to display the same way when someone gets them. Unfortunately, this breaks HTML emails for the rest of us.
The Word engine doesn't support a lot of stuff, including background images, background colors (in some cases) and padding and margins (in some cases).
You'll definitely want to test your HTML emails in Outlook 2007, and make them look as good as you can. They'll probably never look as good as other clients.

Table of Contents