Microsoft Breaks HTML Email Rendering in Outlook 2007

The following is republished from the Tech Times #156.

If support for web standards in browsers is improving slowly, then support in email clients is moving at a glacial pace. Attempts to document things like CSS support in the major email clients have revealed a depressing state of affairs, but with recent desktop clients like Thunderbird now sitting on solid rendering engines, things have been looking up.

All that changed when Microsoft dropped a lump of coal into every web developer’s stocking with the end-of-year release to business customers, and the upcoming consumer release, of Outlook 2007.

At the risk of turning this newsletter into a biweekly Microsoft bash, Redmond has done it again. While the IE team was soothing the tortured souls of web developers everywhere with the new, more compliant Internet Explorer 7, the Office team pulled a fast one, ripping out the IE-based rendering engine that Outlook has always used for email, and replacing it with … drum roll please … Microsoft Word.

That’s right. Instead of taking advantage of Internet Explorer 7, Outlook 2007 uses the very limited support for HTML and CSS that is built into Word 2007 to display HTML email messages.

Having tested the two public beta versions of Outlook 2007 late last year, I knew there was something screwy going on. Many of the newsletters I subscribed to had become unreadable, and SitePoint’s own publications (including the Tech Times) were looking decidedly unhealthy. I dutifully reported these rendering issues with the feedback mechanisms provided in the beta, and wrote them off as Internet Explorer 7 integration issues that would be resolved in the final release.

But late last month, a thread in the SitePoint Forums caught my eye. Microsoft had published a pair of articles describing the support for HTML and CSS in Outlook 2007, and the news wasn’t good:

Microsoft Office Outlook 2007 uses the HTML parsing and rendering engine from Microsoft Office Word 2007 to display HTML message bodies. The same HTML and cascading style sheets (CSS) support available in Word 2007 is available in Outlook 2007.

The limitations imposed by Word 2007 are described in detail in the article, but here are a few highlights:

no support for background images (HTML or CSS)
no support for forms
no support for Flash, or other plugins
no support for CSS floats
no support for replacing bullets with images in unordered lists
no support for CSS positioning
no support for animated GIFs

In short, unless your HTML emails are very, very simple, you’re going to run into problems with Outlook 2007, and in most cases the only solution to those problems will be to reduce the complexity of your HTML email design to accommodate Outlook’s limited feature set.

With the release of Outlook 2007, Microsoft is effectively adding an entirely new rendering engine to the mix—one that designers producing HTML email will not be able to ignore.

Not only that, but this new rendering engine isn’t any better than that which Outlook previously used—indeed, it’s far worse. With this release, Outlook drops from being one of the best clients for HTML email support to the level of Lotus Notes and Eudora, which, in the words of Campaign Monitor’s David Grenier, “are serial killers making our email design lives hell.”

Why on earth would Microsoft do such a thing? Security? Microsoft has been shouting from the rooftops about the new security model in Internet Explorer 7 that prevents the nasty security issues that have plagued Outlook in the past. It seems Microsoft doesn’t buy its own publicity, however, because this move sends the message that Internet Explorer’s security model is not to be trusted.

Where to from here? Well, as a first step, you’ll want to use Microsoft’s handy-dandy tool to tell you which parts of your lean, mean HTML emails need to be replaced with old-fashioned HTML sludge. As a second step, you may want to consider giving your Outlook-based readers an easy way to switch to text-only email.

Bring on PDF email. I’m ready.

Frequently Asked Questions (FAQs) about HTML Email Rendering in Outlook

Why are my HTML emails not rendering correctly in Outlook?

HTML emails may not render correctly in Outlook due to various reasons. One of the main reasons is that Outlook uses Microsoft Word to render HTML emails, which doesn’t support some CSS properties. This can lead to inconsistencies in the way your emails appear in Outlook compared to other email clients. To resolve this, you may need to use inline CSS and avoid using CSS properties that are not supported by Word.

What are the common rendering issues in Outlook?

Some common rendering issues in Outlook include problems with images, fonts, and layouts. For instance, images may not display correctly, fonts may change, and the layout may appear distorted. These issues often occur because of the limited CSS support in Outlook.

How can I fix the rendering issues in Outlook?

To fix rendering issues in Outlook, you can use conditional CSS to target Outlook specifically. This allows you to apply different styles to Outlook without affecting other email clients. You can also use HTML tables for layout to ensure consistency across different email clients.

Why does Outlook use Word to render HTML emails?

Outlook uses Word to render HTML emails because it provides better security, accessibility, and compliance with various regulations. However, Word’s limited support for CSS can cause rendering issues in HTML emails.

Can I use media queries in Outlook?

Unfortunately, Outlook does not support media queries. This means that responsive design techniques that rely on media queries will not work in Outlook. Instead, you can use fluid layouts and scalable images to create responsive emails for Outlook.

Why are my images not displaying correctly in Outlook?

Images may not display correctly in Outlook due to various reasons. For instance, Outlook does not support background images in divs and table cells. To resolve this, you can use VML (Vector Markup Language) to add background images in Outlook.

How can I create responsive emails for Outlook?

To create responsive emails for Outlook, you can use fluid layouts and scalable images. This involves using percentage widths for your layout tables and images, which allows them to scale according to the screen size.

Why is my email layout distorted in Outlook?

Your email layout may appear distorted in Outlook due to its limited CSS support. For instance, Outlook does not support float and position properties, which can cause layout issues. To resolve this, you can use HTML tables for layout.

Can I use web fonts in Outlook?

Unfortunately, Outlook does not support web fonts. This means that any web fonts you use in your emails will be replaced with a fallback font in Outlook. To ensure consistency, you can use system fonts that are supported by all email clients.

How can I test my emails in Outlook?

You can test your emails in Outlook by sending a test email to an Outlook account. You can also use email testing tools like Litmus or Email on Acid, which allow you to preview your emails in different email clients and devices.