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] 

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

After using this code on several projects I decided to port it over to Mootools 1.2 (also works in Mootools 1.1) so check it out the demo below and if you like it feel free to download the code.

demo

Mootools Idle State Notifier demo.

download

Mootools Idle State Notifier download.

The following tutorial will guide you through the process of “layering” a page in a way to give the appearance of a flash background.

The are however a couple of points that are worth noting.  These include:

• Absolute positioning is used to add content above the flash movie.  This therefore mean that the content is taken out of the flow of the document and when resizing the page content may be cut off unless a good workaround is used.
• UFO (Unobtrusive Flash Objects) is used to embed the flash background although you could, and probably should, use SWFObject instead.

flash background HTML

The HTML below provides a simple structure and can be broken in to two sections, a div with id “flash-background” (used to house the flash background) and a second div with an id of “website” (contains your site content).

flash background CSS

The CSS below is not very complex.  Set your default styling on the body I.e. font size, colour etc. The flash background div is positioned absolutely in the centre of the page with a z-index of 0 and website div is also positioned in the centre of the page with a z-index of 10000 (obviously doesn’t have to be that high I just wanted to show that it was larger ).  CSS wise that is it, not very difficult at all.

JavaScript

Finally we need to embed the flash movie into the page, in the example below I have used UFO, however, I would strongly advise you to use SWFObject 2.0 as this is currently the best solution in the market.

var FO = { movie:"flash/background.swf", width:"1014", height:"960", majorversion:"8", build:"0", xi:"true", wmode:"transparent" };
UFO.create(FO, "flash-background");

demo

Flash background demo.

download

Flash background download.