The Rules of HTML Email
A best practice for HTML email rules
When sending html emails as part of a marketing campaign, the path to glory is peppered with the broken glass of failure. As a web designer, I’ve been schooled in the latest technologies, to deliver a coherent, standards compliant website.
Unfortunately, HTML email rules follow none of this! The fault can be entirely aimed at email programs that seem stuck in a rut, circa 1990. From Outlook Express, to Thunderbird, and right through to webmail solutions such as Gmail and Hotmail, the HTML rendering engines are the equivalent of a Model T Ford.
Even when Google Mail updated its CSS support, Outlook 2007 stepped backwards by integrating the engine from an earlier version of Outlook.
The rules of HTML email
Rule 1 - CSS based designs are out. I’m afraid it’s back to the bad old days of tables. You CAN style those tables with inline styles, but any attached style sheets will be summarily executed by any email reader you throw them at.
- Inline styles MUST appear below the <body> tag. Not in the head.
- Don’t use any kind of shorthand - full declarations only, e.g. font-family, line-height.
- Keep the CSS to a bare minimum.
Rule 2
Use absolute links to any image files you use, e.g. http://www.yourdomain.com/email/images.
Host them in a subdirectory of a domain you use, and never delete them. People go back to read emails, and if you delete those files, all you’ll deliver to them are plain old blank tables.
Rule 3
No wider than 600px. This allows the email to render correctly in the limited message pane size.
Rule 4
Give the option of reading the HTML email as a web page. Put a direct link, with the title set as “read this email on the web”, include it near the top. You want as many people as possible to see it in its full glory, and some email providers just aren’t up to the job, no matter how well you plan it.
Rule 5
You MUST give the option of being able to unsubscibe from your list. Besides being unethical not to, you may well fall foul of anti-spam laws.
Rule 6
Use ALT tags for every image. That way, if the email client doesn’t want to play ball, at least the reader will know what was supposed to be there.
Sending HTML email to yourself as a test
Sign up for as many different email providers as you can. Send you HTML email to yourself through every provider, and note differences.
HTML email rules - Resources
20 Email design best practices takes you through more of the rules to sending html email, whilst there is an email marketing .pdf available at mailchimp.com