Email client rendering engines – useful information for testing HTML email layouts

As every web-developer knows, testing your Web pages on the myriad of popular Web browsers can often be a horrible experience…and if there’s one thing which is even worse than testing web pages in different browsers, it surely has to be testing HTML Email layout in multiple Email clients!

Please note: In this article, I am only covering desktop/dedicated Email clients such as Outlook/Thunderbird/Apple Mail etc rather than Web-browser-based Email clients such as Hotmail/GMail/Yahoo! Mail etc.

HTML Emails are something I deal with more and more on a day-to-day basis so I thought I’d make an effort to share some of the things I’ve learned in the hope that it may save someone some time and effort. This article may well end up being revised quite a lot over time but here goes:

First thing’s first! Rendering engines…
In the same way as Web browsers have rendering engines to transform the HTML, CSS, JavaScript etc into something viewable and usable (hopefully), Email clients have a rendering engine to do the same job for HTML-based Emails. At first, it might seem like a total nightmare to test on multiple Email clients, particularly given the horrific offerings produced over the years by Microsoft (Outlook) and IBM (Lotus notes) amongst others but there are some important facts which can help you a lot in both testing and bug-tracing.

Firstly, there are only really 4 rendering engines used in major Email clients (there should only be 3 but we’ll get to that later!):

Gecko – The same rendering Engine used in Mozilla Firefox web browser, this is used primarily in Mozilla Thunderbird

Webkit – The same rendering Engine used in Apple’s Safari web browser, this is used primarily in Apple Mail including IPhone OS and IOS4 Mail apps on IPhone/IPad/IPod

Trident – The same rendering Engine used in Microsoft’s Internet Explorer web browser, this is used primarily in Microsoft Outlook until (but not including) Outlook 2007 and IBM’s Lotus notes

MS Word – The same rendering Engine used in Microsoft Office Word, this is used primarily in Outlook 2007 and 2010

So, this is good news…to an extent. Gecko and Webkit are pretty good in terms of standards support, if you write good (X)HTML and CSS, your Email is likely to display as you intend it to in Gecko and Webkit based Email clients such as Mozilla Thunderbird and Apple Mail respectively.

Things become a little more complex with Outlook and Lotus notes which between the two of them, still dominate. It works like this:

Outlook versions before 2007 use the Trident rendering engine which is used in Internet Explorer. Crucially, Outlook uses the version of Trident which is currently installed with Internet Explorer on your PC. So, if you have for example, Outlook 2000 running on Windows XP but you have upgraded to Internet Explorer 8, Outlook 2000 will render Email with the version of Trident which was installed with Internet Explorer 8 even though Internet Explorer 8 didn’t exist when Outlook 2000 was released. This is well worth knowing if you’re trying to trace problems!

Outlook 2007 & 2010 for some inexplicable reason, use the rendering engine found in Microsoft Word…that is not a typo! Yes, Microsoft chose the lazy route…again.
Actually, when we look at a little more detail, Outlook versions prior to 2007 used the Trident rendering engine to display Email but the MS Word rendering engine to compose Email (presumably because Word is more akin to a compose window than Trident). So, with Outlook 2007 & 2010, Microsoft have unified the rendering engine used in Outlook which is a good move, however they clearly took the easiest route and have consequently landed developers with yet another Redmond-fuelled nightmare!

Why is the Microsoft Word rendering engine bad news?
Well, there are a great many reasons which the MS Word rendering engine should not have been used in Outlook 2007 & 2010, perhaps the most fundamental to developers is that background images are not supported by Outlook 2007 or Outlook 2010 on at least div’s and table cells! Absolutely shocking and incredibly restrictive. This is a major, major problem.

The MS Word rendering engine in Outlook 2007 & 2010 also has no support for CSS float or position, extremely patchy support for CSS padding and margin, problems with nested elements background colours and even patchy support for CSS width and height – incredible. I have also found some problems whereby Outlook 2007 & 2010 do not override stylesheet CSS with inline CSS which is just bizarre…

I’ll update this article as I find more information and no doubt more bugs. This didn’t start out with the intention of Microsoft bashing but the more I’ve written the more annoyed I am with them…If only everyone could & would download something else!