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…
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!
- A more complete report of what’s working and what’s broken in Outlook 2007 from Email Standards Org: http://www.email-standards.org/clients/microsoft-outlook-2007/
- Microsoft’s Outlook 2007 rendering engine notes: http://msdn.microsoft.com/en-us/library/aa338201%28office.12%29.aspx
- A comparison of Email clients on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_email_clients
- A comparison of layout engines on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_layout_engines
|This entry was posted by Neil Craig on June 21, 2010 at 5:54 pm, and is filed under (X)HTML, Apple, email clients, General Web-Development, html emails, IPhone. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.|
No trackbacks yet.
about 1 year ago - No comments
This is a really quick post as i’ve been coding for a few hours and need to call it a day… So i was working on my new website which uses a lot of HTML5, CSS3 etc. and shows Youtube videos, so naturally I wanted to use the Youtube HTML5 embed method (which i still More >
about 1 year ago - 1 comment
This is a slightly random post for a web development blog but i spent a couple of hours last night trying to sync some movies i’d purchased via iTunes to my iPad and despite checking the movies in the movies pane of the iPad sync options, the movies didn’t transfer. There was no error message More >
about 2 years ago - No comments
about 2 years ago - 12 comments
I’ve just been creating the HTML for an Email to be sent out on behalf of a client and have found what appears to be a bug in Outlook 2007 & 2010 (which use the MS Word rendering engine) when using tall images in HTML Emails. My HTML Email was created from a JPEG designed More >
about 3 years ago - 5 comments
A brief article describing how I set up Qmail (on Debian Etch) running virtual domains to forward Email to another Email server using a simple addition to a Qmail config file.
about 3 years ago - 1 comment
about 3 years ago - 2 comments
HTML 5 offers 13 new form input element types but Browser support for these new input types is very scant at present. However, with JSH5F, you can use the new HTML 5 form elements right now in supporting Browsers without causing problems for people using non-supporting browsers.
about 3 years ago - No comments
This is my personal collection of FireFox extensions that I just can’t live without whilst developing websites.