Update March 2017: With increased CSS support in many email clients/browsers, many of these techniques are now no longer necessary.
This is not intended as a be-all/end-all guide to coding emails. It is simply a collection of guidelines and practices I have found helpful and effective in my work. Much of this information is gleaned from the HTML Email Boilerplate, Campaign Monitor’s Guidelines for a Solid HTML Email Template, and Email on Acid’s Email Boilerplate.
- Use tables for layout.
The single most important guideline for HTML emails is that CSS layouts simply do not work. The major email clients either offer limited CSS support or render CSS in different ways, often causing unexpected results.Code emails using structural HTML tables as the framework and avoid CSS-positioning.Using <div> for inline styling works well in most cases, however, using <div> for layouts is unreliable. Some clients ignore positioning, and often the width property applied – whether as % or px – is ignored and the <div> is expanded to fill 100% of the reading pane.
For best results across email clients, keep emails widths to a 600px maximum to prevent readers from having to scroll horizontally to read the email.
- Nest tables for consistent spacing.
Width, margin, and padding within table cells is not treated consistently by all email clients, and several clients have issues with floated elements. Nested tables are far more reliable than using CSS to set left and right margins or padding for table cells.
- Avoid padding
To set cell padding, set it on the whole table with the cellpadding parameter.
- Avoid floats
To align elements, set alignment within <table>, <td> and <img>.
Example:
- Use a wrapper to consistently control the width and the background color of your email.
Some email clients ignore the <body> tag, and others convert it to a <div>. Some email clients also ignore background colors specified in your CSS or the <body> tag, so wrap your email in a 100% width <div> or <span> and give that element a background color.Using a <span> instead of a <table> or <div> as a wrapper and adding style=”display:block” will prevent an issue in Outlook 2007 and 2010 where if your email exceeds 23 inches in height (approximately 1,790 pixels), unwanted horizontal space is added in your email. Stack your tables within the wrapper so that no table exceeds 23 inches to keep this from occurring.
- Avoid semantic HTML tags (<p>, <h1>, <h2>, etc.).
In some email clients, block-level elements such as <p> and <h1> tags are stripped or unexpected properties such as margin or padding are applied. In addition, Hotmail uses these tags in their own markup and renders the text in green. To avoid these issues, enclose all text within <td> cells, and set font styles and line-heights inline.Example:
If you must use header and paragraph tags, be sure to include embedded CSS reset styles so you’ll be able to specify your own margins/padding. In addition, apply inline styles to each element throughout your content.
Example:
/****** CSS RESET (OVERWRITE/REPLACE THESE STYLES INLINE WITH YOUR CSS) ********/
p {
margin:0;
padding:0;
top-margin: 0;
margin-bottom:0;
} /* Also set the inline top-margin to "0" for every instance of a paragraph for consistency in Gmail. */
h1, h2, h3, h4, h5, h6 {
color: black;
line-height: 100%;
} /* This CSS will overwrite Hotmails default CSS and make your headings appear consistent in Gmail. From there, you can overwrite your styles inline if needed. */
a, a:link {
color:#2A5DB0;
text-decoration: underline;
} /* This is the embedded CSS link color for Gmail. This will overwrite Hotmail and Yahoo Beta's embedded link colors and make it consistent in Gmail. You must overwrite this color inline. */
/****** END CSS RESET ********/
- Avoid line breaks (<br />)
The spacing/height of hard line breaks varies by email client and often causes unexpected results. Instead of using a <br />, use a spacer row with the desired height set.
Example:
- Don’t use CSS or hex notation shorthand.
Some email clients ignore CSS shorthand. Instead of using the abbreviated style rules, break them out into individual properties. In addition, use full hexadecimal codes for colors rather than 3-character shorthand codes.Instead of:
font: bold 12px/30px Arial, Helvetica, sans-serif;Use:
font-weight: bold; font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif;
- Move all CSS inline.
CSS placed between the closing <head> and starting <body> is commonly ignored or stripped out, and the email is styled according to whatever default the browser uses or the webmail client’s own style sheet is used.Applying styles inline gives it priority over other styles that may be specified elsewhere. Also, do not link to an external stylesheet, as it will not be accessed in an email.
You may find it easier to develop your email using a <style> tag in the <head> and then use a CSS Inliner tool (http://beaker.mailchimp.com/inline-css or http://premailer.dialect.ca/) to automatically move all your CSS inline once you have finished coding it.
- Set text formatting styles inline in table cells, not in <font>
Many clients will ignore anything you declare within <font> tags. In addition, line-height cannot be set in <font> or <span> tags, as they are not block-level elements. Using mso-line-height-rule: exactly; before line-height: 12px; in your text CSS will help prevent line spacing issues in most versions of Outlook.Instead of:
Use:
- Specify link colors.
Some email clients will overwrite your link colors with their defaults or ignore colors set in a <font> Some clients will change link colors even if the style is set in the parent cell. To prevent this, set a default color for each link inline, and also add a redundant span style inside the <a> tag.Also avoid using color: #000000 for links. Gmail strips the color CSS property of any link with either color: #000000; or a { color: black; } applied, and turns it blue. To fix this issue, use color: #000001; or color: #000000 !important;.
Example:
- Avoid using .png
Some email clients will not render .png images, so use only .jpg and .gif images in your email.
- Specify image dimensions.
Specify the actual image width and height and make sure the dimensions match the width of the table cell containing it. Stretched or compressed images may not render correctly even when defined by the HTML code.
- Avoid image margins and floats.
Margins are ignored for images. Add white space to the image for the desired effect. Floats are also ignored. Put images in their own table cell or use align=”left” or align=”right” to set alignment and spacing.
- Set image border property.
Use border=0 or style=”border: none;” on all images to avoid blue borders rendered by some email clients.
- Use display: block on all images.
Add style=”display:block;” to all images to avoid spacing issues in Hotmail and Gmail.
- Spacer images.
It’s been my experience that empty table cells are sometimes collapsed or their declared widths ignored. Since using inside an empty table can cause undesired results, if I experience such problems, I use a 1px high transparent GIF in the first row of a table to set a column width if no other <td> in that column contains an image.
Example:
<tr>
<td></td>
<td width="250"><img src="spacer.gif" width="250" height="1" alt="" border="0" style=”display: block;” /></td>
<td width="100"><img src="spacer.gif" width="100" height="1" alt="" border="0" style=”display: block;” /></td>
</tr>
<tr>
<td width="150"><img src="article_image.jpg" width="150" height="150" alt="" border="0" style=”display: block;” /></td>
<td> Lorem ipsum dolor sit amet.</td>
<td> Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td colspan="3">Lorem ipsum dolor sit amet.</td>
</tr>
</table>
- Use alt and title
A majority of email clients block images by default and instead display either the alt or title text, therefore, always include both alt and title attributes tags for images. Also, Firefox, Safari and Chrome do not display alt tags on image hover, however, they do display title tags. For images where alt text isn’t necessary, use alt=””. Keep the length of the text within alt and title to a minimum, ideally less than 36-40 characters.Alt tags can also be styled in the same manner text is:
Example:
- Clean up and validate your code.
It’s a good idea to run your final code though the W3C Validator. Not only does it check the validity of your markup, but it indicates where there are unclosed tags and provides tips and fixes for any issues it finds.Tracking tags and AMPScript code in the email will generate errors. Disregard them or validate your email prior to adding them. The main objective is to identify any structural/syntax errors that may cause the email to break. The majority of the time an email I am coding is breaking, I find once I validate it that I failed to close a tag.
- Avoid Javascript, Flash, PHP, and forms.
Scripting is unsupported in emails, given the security risks involved with a script running inside an application that has all that personal information stored in it.Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails.
TIPS & TRICKS
- Outlook 2007 will ignore any INLINE style which uses the !important declaration.
- Gmail strips the color CSS property of any link with either style=”color: #000000;” or a { color: black; } applied, and turns it blue. To fix this issue, use style=”color: #000001;”
- Yahoo! Mail does not support the <style> block in Internet Explorer 7 and 8. To fix this, copy your embedded CSS to just before the closing body of your email.
- Sometimes Outlook 2007 and 2010 clients ignore the >style&rt; block when it is placed below the body tag and/or just before the closing body. Therefore, duplicate your style block in your head tag AND before the closing body tag.
- Be sure to stick to margins because paragraph padding is not supported by Outlook 2007/2010.
- Remember: Hotmail does not support “margin” nor the “margin-top” properties. Stick to “margin-bottom”, “margin-left”, “margin-right” in order to control spacing.
- It also doesn’t hurt to set the inline top-margin to “0” for consistency in Gmail for every instance of a paragraph tag.