My email doesn't display right? Inconceivable!

I have spent many, many hours over the past several days trying to get an HTML email to display correctly when sent from Outlook 2007. This does not seem like that hard of a task. It also does not seem unreasonable for me to ask that email editors follow the same rendering rules as an internet browser.

Take a look at the disaster that awaits unsuspecting email designers:

This is how an email using W3C compliant markup may display in Outlook 2007 or 2010

This is how the email appears in 95% of all other browsers and email clients, and how it appears in Outlook 2007 AFTER the workarounds I implemented to compensate for Outlook's careless lack of support for internet standards.

Well, Microsoft has decided that Outlook 2007 and Outlook 2010 will use Word's HTML rendering engine to read HTML emails instead of the Internet Explorer engine that it has relied on in past software versions.

Some key things you should note:

• There is no support for Background images in HTML or CSS
• Forms and Flash are not supported
• You cannot use CSS float or positioning

You can read these articles from Microsoft outlining the HTML and CSS support offered in their "new and improved" Outlook.

There is also a great article on Sitepoint summarizing a lot of these issues: Microsoft Breaks HTML Email Rendering in Outlook

One thing that Sitepoint does not cover is the fact that you have to designate your image height and width on the img tag itself, either in plain html or both html and css. If you do not add this to your images outlook 2007 will generate them for you at a less than optimal setting. In addition NEVER put "px" after your widths and heights or any other HTML setting (CSS style settings are okay), as like <img width="100" height="100" /> instead of <img width="100px" height="100px" />.  Using the latter format will result in unexpected sizes and totally threw me for a loop since I was sizing transparent spacer-holder images with it and couldn't see what was going astray!

If you are one of those unlucky PC users, Microsoft also offers software utility to test for valid HTML and CSS for Outlook 2007.   It is a plug in that works with Microsoft Office SharePoint Designer 2007, Microsoft Expression Web Designer 2007, and Microsoft Visual Studio 2005.  There is also a second plug in that works with Dreamweaver MX 2004 or Dreamweaver 8. Of course it is not offered for the MAC, so if you are struggling to design an HTML email from the apple you are pretty much working blind and S.O.L.

HTML issues directly relate to 3 out of the 67 Reasons that Outlook Sucks as written by wanderingstan. In case things aren't clear by now, you can read Why Outlook Sucks by Marcy Sutton.  Thanks Marcy for this great link with a Guide to CSS support in email clients!

Microsoft is at least consistent with their products offering non compliance with the World Wide Web Consortium's XHTML and CSS standards. Microsoft Word is known to generate excessive, irrelevant and non standard markup. Even Microsoft FrontPage often generates non-standard HTML by default.

What is the point in the World Wide Web Consortium establishing and promoting standards if Microsoft chooses to blatantly ignore them?!