How to Code HTML Emails

March 28th, 2010 | code, tutorials | 1 Comment »

There are a lot of production limitations to what you can and cannot do with HTML emails. However, HTML emails are still considered a valuable and viable form of marketing communication. Since I build loads of these in my B2B day job, I can offer best practices for designers unfamiliar with this kind of production.

This article does not go into the marketing aspects of how to send bulk emails through an Email Service Provider (ESP).

Why are HTML Emails so Finicky?

The main reason there are limitations with HTML Email is because there are many Email Clients (ie. Outlook, Mail for Mac OS X, Lotus Notes) and web based email services (Yahoo, Hotmail, Gmail). Nearly every one of these services or clients has their own system of dealing with rendering HTML. There is a similar issue when dealing with web browsers. If you have ever been surprised by the look of a web page when after building it, it looks okay in one browser and not so good in another, you will know what I mean. Many of the modern techniques we now rely on in web design don’t translate well or work at all in HTML email.

Coding like it’s 1999

Outlook is one of the most common email programs businesses use. It has almost no CSS support and there are some unexplained spacing quirks it renders once a preview is sent from an Email Service Provider. The article below can be used as a guide for the archaic html coding that is used.

Coding Checklist

Do’s

Start a table and be sure to specify widths and quote all html attributes. The <td> cell also should have widths and aligns set. Don’t set height attributes for tables or table cells. e.g.:
<table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="600" valign="top" align="left" bgcolor="#ffffff">content</td> </tr> </table>
Avoid CSS (style sheets) for layout, or padding. Use inline CSS (I see you cringing…) for font declarations, which should work for most email clients, that means surrounding the the copy sections you want to style with the css code each time. You can add it in the table td tags: <td style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:21px; color:#222222">content</td>
If you need to style extra items, use a <span> tag.
A Headline e.g. <span style="font-family: Arial, Helvetica, sans-serif; font-size:18px; line-height:21px; color:#222222">content</span>
Embed html tags in their proper order, and make sure to close them. e.g. <ul><li>item</li></ul>. or <table...><tr><td>item</td></tr></table>.
Line spacing issue – collapsing line-spacing between paragraph tags <p>, line spacing gets reset to 0 on some modern email clients. Solution: try <p style="margin-bottom:15px;">, or just use break tags <br> for line spacing.
Use absolute filepaths for images and links (link to full hosted URL online)
For example, don’t use this relative URL structure: images/file_name.gif
Images should be hosted on an external web server. Use the absolute URL (full link path) e.g.: http://www.urlnamehere.com/email/images/file_name.gif
Use alt tags for images, use .jpg or .gif image formats. Images used as background images behind some text in CSS won’t show in most email clients. You’ll need to fill the <td> cell with a background color
Use widths and heights on all images and widths only for <td> cells
Specify absolute widths for all tables e.g. width="600" (html 4 pixels) (height is not a table attribute)
Keep the maximum width of the email to 600px – 650px wide so it’s viewable in many window sizes.

and Don’ts

Empty table cells can collapse, use a "spacer" gif not   to pad cells
No spaces in file names or links
No CSS for positioning (floats)
Do not use Flash, JavaScript, video or forms.
Do not use background images

Special Characters

Don’t use spaces or "%" symbols in file or image names. Limit names to alphanumeric characters and the underscores or dashes where spaces would have gone
Watch out for formatted text characters such as curly quotes and spaces from Microsoft Word that don’t translate to HTML. Make sure special characters such as quotes and ampersands use the Nmemonic or Numeric format. Microsoft Word will usually format these wrong with it’s own curly quotes that won’t paste into Dreamweaver or an html editor properly, and inserts %numbers% for spaces or messes up links. You can paste the word doc text you’re working off of into a plain unformatted ASCII text reader or remember to retype those characters.

e.g. of common special characters used and their Nmemonic code format (copy the full characters in bold including the semi-colon:

Left double quotes: Use “ or “
Right double quotes: Use ” or ”
Straight quotes " " : " or "
Apostrophe ’: Use ’ or ’
Ampersand &: & or &
Emdash —: —
Endash –: –
Slash /: /
Copyright ©: © or ©
Registration Mark ® : ® or ®
Trademark ™: ™ or 
Dollar $: $
Percent %: %
Euro €: €
Manually type in the ellipses in plain text "…" or use 
Bullet (not an indented list, but plain bullet) • : •

*Run an html code Validator in Dreamweaver or on the web to ensure all tags are properly closed, and characters, etc. are encoded properly.