Overcoming Outlook 2007 – Tips From Microsoft

There have recently been two posts on OneDegree about HTML rendering in Outlook 2007. Wayne Carrigan on HTML in Outlook 2007, and Microsoft Gets Email Marketers Hopping. So, the noise is true – Outlook 2007 renders HTML using the Word HTML editor rather than using Internet Explorer (IE), the previous Outlook HTML editor.

As an Emarketer at Microsoft, I am very familiar with the functionality changes that have occurred in Outlook 2007. A large number of our B2B customers have already migrated to Outlook 2007 and therefore we need to ensure that our emails render correctly in all versions of Outlook. I want to take this opportunity as an employee of Microsoft to talk about the changes and provide some best practices to add to your email tool box.

Why are there HTML rendering issues in Outlook 2007 and not in other versions?

In past versions, Outlook actually used two rendering engines – IE’s for reading content, and Microsoft Word for editing when you were composing messages. What this meant was that if you were replying or forwarding an HTML email, previous versions of Outlook would first use IE’s rendering engine to view it, then Outlook would switch over to the compose engine – MS Word.

A big thing Microsoft heard from customers is that they wanted the richness of the editing experience they were used to from Word integrated throughout Outlook. While IE7 is great, it was never intended to be an editing tool. That’s why we made the decision to use Word’s new HTML rendering engine for both reading and authoring content, which had been improved based on HTML and CSS standards. This allowed us to unify the rendering and editing engines together, rather than forcing customers using Outlook to use two different rendering engines (one for rendering HTML, the other for editing).

Here are some suggestions for making your e-mail render well in Outlook 2007…

1. Background images – Avoid background images in table cells – instead you can use .gifs
2. Background color support – If a table cell has background color and text, the text and background color display fine. Avoid nesting another table inside that table.
3. Box model support – pay attention to padding and margin’s as they behave differently.
4. Embedded e-mail surveys – Include links in your email to surveys on a website.
5. Animated GIF files or Flash content – Animated GIF files will appear but will not animate. Flash will render a big red “X”. Send readers to a site to see these images. Images/photos can definitely be used, be sure to include captions in case images are blocked (this is the same behaviour that occurred in Outlook 2003). I actually haven’t tested this one out yet, but have heard this one through the grapevine.
6. CSS – Be sure to update your CSS templates to reflect the changes above – you should also know that there is no support for float or position – use tables. You can still have an e-mail template, just ensure good quality assurance testing to make sure it will render correctly in Outlook 2007.

Some Best Practices….

• Have your production team review the MSDN article on Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 to learn more about how rendering works in Outlook 2007.
• Have your production team download and use the 2007 Office System Tool: Outlook HTML and CSS Validator to check for any code breaks prior to email deployment.
• If your agency or company is not using Outlook 2007 be sure to have access to a copy of Outlook 2007 so that you can verify your email rendering before sending it out. (You can download a trial version here)

If you want further information…. There are two external blogs which discuss the issue at length:

1. The truth behind the Outlook 2007 change and what you can do about it
2. What Really Happened with HTML and CSS in Outlook 2007

You should also know that Microsoft is listening to the developer community through the Microsoft/ WaSP Task Force. I will continue to share best practices and any new updates with you as they become available.