Andrew Sellick

I recently wrote an article detailing best practices for HTML email templates and I thought I would add one more item to the list.  Conditional comments have saved me to many times for me to remember when building websites but I never thought they could help when building email templates, how wrong could I be.

For those of you that have attempted to implement an email template with a vaguely complex design in Outlook 2007 you will have hit many stumbling blocks with simple CSS attributes such as “background images” and “display”, to name but a few, not supported.  Getting these templates as close to the original design as possible in all email clients whilst also offer a slightly degraded, yet more than acceptable version for Outlook 2007, is a very tricky and time consuming business.  This is where conditional comments come in to play, as the example shows below:

<!--[if gte mso 9]>
	Add your Outlook 2007 specific code here...
<![endif]-->

The above code snippet provides a much needed means to target Outlook 2007 specifically with styles and code to produce the degradation required to allow HTML templates to display correctly in such an awkward email client.

I would say long live conditional comments, however, I think I will take another tact, please please please Microsoft address Outlook’s support for CSS and for pity sake use the IE rendering engine and not MS Words.  You have the market leading browser so use it… [Rant ends] 

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