Table of Contents
[This page is over five years old and needs some updating, but the general rules apply: you need to use a subset of HTML and CSS, and target only the most popular email clients, and try to stick with standard HTML and CSS when possible.]
Prepwork
Most of the tutorials out there about HTML email range from okay to incorrect. Maybe they’re just too old, and the current email systems are better. You should skim over those, and read one carefully.
[New info: the best tutorial is HTML Email Development Tips by Tom Elliott.]
The best tutorial is Using CSS in HTML Emails, The Real Story, by Chris Coyier. Also, read this great guide from MailChimp. Also read some of the discussions in the list of resources below to get an idea of the scope of the problem.
Theory
Here is a rough “theory” or methodology of how to make crossplatorm email. First, to simplify things, we’ll ignore the Mac and iPhone email readers. It’s not as bad as it sounds. The basis for rendering email in 2010 is HTML rendering engines. There are two dominant engines: Mozilla’s Gecko, and Internet Explorer. The third is Apple’s Safari, which is based on KDE’s Konqueror browser. Also, Outlook 2007 started using the MS Word rendering engine, messing things up for them. But, generally speaking, standards compliant HTML is the basis for rendering HTML email.
Not only are these HTML rendering engines used in web browsers – they are also used within email reading clients like Outlook (up until Outlook 2007), Outlook Express / Windows Live Mail, Thunderbird, and Apple Mail.
Because these engines are largely standards-compliant, you would think that HTML email would render cross-platform. Unfortunately, this isn’t the case. There are three reasons why: Yahoo, Gmail, and font sizes.
Yahoo and Gmail
Both Yahoo and Gmail alter the CSS of incoming email. Yahoo alters the basic CSS, and also strips out any CSS you use in the HEAD. Gmail strips out the CSS, and also alters the basic CSS, but differently.
Yahoo’s most offensive alteration to CSS is the removal of vertical margins between paragraphs. Normally, people using the P tag expect for some spacing to be added after the paragraph close. Yahoo gets rid of that. So, to produce a paragraph, you need to add a line break. The problem with that – is that other email readers will see extra white space.
Gmail is less offensive, but they still do some annoying things. Their first offense is to strip out the CSS in the HEAD, so all your document-wide font styles vanish. Additionally, they re-define the H tags so the sizes conform to Chrome’s sizes, more or less.
The other services may do things to CSS as well, but not so drastically.
Font Sizes
Gmail’s CSS mangling has a reasonable intent: to fix the font sizing irregularities between Mozilla Gecko and Internet Explorer.
The font size problems are legendary, but, the gist of it is that Gecko’s idea of an “xx-large” font is a lot smaller than IE’s idea of an “xx-large” font, and this pattern continues for all font sizes. This also maps to their interpretation of the FONT tag’s SIZE attribute.
(There’s also the problem of different font sizes and pixel sizes between PCs and Macs.)
Other Issues
In addition to inter-paragraph spacing and font sizes, some services alter the line spacing. Yahoo seems to mess with the cellspacing on tables, as well.
Solutions
The solution is to use a subset of HTML, with a subset of CSS, and also use tables. This subset is not the one you’d expect: you don’t stick with old-fashioned HTML; you follow new rules. Here they are.
Don’t use P, use BR
Yahoo messes up the P tag, so you need to use BR instead of P. You may need to initially use P to wrap the entire message, but you can use DIV as well.
Don’t use FONT, use CSS font styles
Don’t use FONT anywhere. Instead, use SPAN with a STYLE attribute:
<SPAN STYLE="font-family: Verdana; color: #009900; font-weight: bold;">Verdana, bold and green</SPAN>
The crossplatform CSS names are: font-size, font-family, font-weight, and color.
You can still use the B and I tags!
Don’t use xx-large, use “font-size:24px;”
Don’t use relative font sizes anywhere. They won’t display identically on Outlook and Hotmail, nor will they display the same on Mozilla Firefox and Internet Explorer. Instead, use absolute pixel sizes, and use them only within those STYLE attributes.
Don’t use the H1-H6 tags either. Those rely on relative sizings.
(The Mac or the new iPhone may display the text differently.)
Use the IMAGE tag freely.
Images work. In fact, the HSPACE and VSPACE attributes are honored, crossplatform, so they’re a good way to get around issues of horizontal and vertical margin spacing, if used creatively.
You can use the UL and OL lists
Yes you can!
Edit with NVU
So far, this has been the editor that allows you to follow the above rules without too much pain. It uses BR instead of P, and allows you to edit inline styles with a couple clicks.
The other option is to edit by hand, which isn’t so bad: the limited set of tags makes things “simple.”
(The real solution is to alter the HTML output of a web-based editor like TinyMCE, and then paste the altered code into the email software.)
Using the above rules, you can produce nearly pixel-perfect crossplatform email. The line breaks are the same across browsers and email systems (on Windows).
Items under research.
Line spacing is inconsistent. As a quick fix, you can use spacer images.
Table spacing is inconsistent. The Coyier article covers tables.
DIV spacing still needs some research.
Resources
A good tutorial from Tim Slaving, with lots of technical details.
List of resources and discussion at Email Marketing Reports.
CSS feature matrix at Campaign Monitor.
How to code email newsletters, a Sitepoint tutorial.
Also check out Premailer, a web app that alters your HTML so it works in email. Unfortunately, they did things in ways that won’t work with Yahoo.