HTML email template best practices

Every so often I am required to build email templates and am constantly amazed by the new and bizarre bugs I come across. Having worked my way through a mountain of email client “features” over the years I thought it would be good to put together a simple best practice guide to building an email template.

Best Practice

• Use tables to provide positioning and layout as this will provide the greatest levels of consistency cross browser. In many cases the simpler the code the better.

• Inline styles should be used to create the desired creative effect again to reduce the risk of cross browser inconsistencies.I.e.

  <span style="color:#000000;">

• Apply fixed pixel sizes for font sizes and height/widths.

• Use span tags with inline styles instead of p, h1 tags etc. Most browsers apply natural padding and margin to p, h1 tags, so by using span tags you can eliminate this as a factor.

• Avoid shorthand – some email clients have a habit of removing shorthand and replacing with the longhand equivalent (and doing it very badly). It’s therefore much easier to take away the risk of this happening and only using longhand from the start.I.e.

  <span style="margin-top:10px;display:block;">testing</span>

  instead of:

  <span style="margin:10px 0px 0px 0px;display:block;">testing</span>

• Use the table background attribute to apply background images instead of using CSS. This is the most universal approach, however, it is worth remembering that Outlook 2007 does not allow background images at all.I.e.

  <table cellpadding="0" cellspacing="0" border="0" background="http://www.mydomain.com/images/email-010101/myimage.gif">
      <tr>
          <td>
              Content here
          </td>
      </tr>
  </table>

• If background images are used, apply a background colour to provide the same colour styling as the bg image.  This will provide structre to email clients that do not render background images.
• Where an image is inserted apply an inline style of display block. This removes extra margin applied in Windows Live Hotmail through Firefox.

• Reference images on a live server. This will help reduce the weight of the email as well as decreasing the risk of your template being picked up as spam as spammers have like to embed images into emails.

• Images and text must be used in proportion again to avoid the risk of being picked up as spam. Spammers like to include the message of their email in images to avoid email filters recognising blacklisted words.

• Although JavaScript does work in some email clients its coverage is by know means complete. Until there is better wide spread support JavaScript should not be used.

• Forms should not be used within an email template. As with JavaScript,there is support in some email clients but not all so they are best avoided.

• Do not heavily nest tables within tables as older email clients such as Lotus Notes do not like it.

Useful Links

The Campaign Monitor blog has some very helpful CSS support guides for different email clients. Very interesting and well worth a read as it can save you a great deal of time in the long run.

- Visit Campaign Monitor

The Email Standards site “helps designers understand why web standards are so important for email, while working with email client developers to ensure that emails render consistently”. Another good read with some very helpful information.

- Visit the Email Standards