Trace: » _setVar() and the zero bounce rate bug in Google Analytics » Resources » Code Documentation Standards » Applications » Creating HTML Emails - Tips & Tricks

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 June 2008.

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>.
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>
```
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>
```

Using Images

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.
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).

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.

Discussion

marketing-tech/html-email/tips-and-tricks.txt · Last modified: Aug 29, 2008 01:53 PM by dordal

Creating HTML Emails - Tips & Tricks

Layout Techniques

Using Images

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

Mail Client Specific Tricks

Yahoo Mail

Outlook 2007

Discussion