Top 7 ways Outlook 2007 will break html email

There has been a lot of noise about the death of html email in Outlook 2007 since this article highlighted issues in January.

Microsoft are changing the rendering of html-email from the Internet Explorer engine to the Word engine. This means that some of the key design tools used in html e-newsletters are no longer available. There is a good summary of the changes at artstechnica.

We mostly design html-email to allow a fair amount of backwards compatability, so we avoid many of the latest css rendering issues. For example we don't use css for positioning of the main layout. Tables continue to be the best way to maintain consistency across different email systems.

However having read the MS specifications in detail at MSDN the issues are worse that I thought, even for conservative email designers.

Some key points that will affect layouts you may have used in the past are:

  • 1. Animated GIF images are not supported.
  • 2. The hover attribute appears not be supported [Can anyone confirm this as the specification is not clear?] In any event, any funky mouse effects are killed off, because background images are no longer supported.
  • 3. HTML tags still support the background attribute, but background is now limited to color, and not images :(
  • 4. The specification doesn't appear to support ALT tag on images! This is atrocious from a usability perspective. With an e-newsletter header the ALT tag would allow you add a message for recipients that haven't downloaded the images yet.
  • 5. The CSS does not support background-images. This is a real killer for CSS based design. It kills off such simple innovations as image-based bullet points, image icons for links, and creating hover effects.
  • 6. The CSS does not support float or clear. These are important because we use these to set the style for content images, so that text wraps without the editor having to add an html align attribute.
  • 7. CSS text-transform is not supported. In the past we have used that to make some headings all-caps.

If you are not sure how your email will look you need to check carefully. MSDN have a number of testing tools.

Good luck!

 

Categories: CSS Web Design,Email marketing

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code: