Why Do Email Clients Render Emails Differently?
The infamous question — why don’t all email clients render emails the same? To answer this complicated question, we’re going to split it up into sections — the mail server, the preprocessor and the rendering engine —which all play a role in how the email is rendered.
The Mail Server
Each email client has to get the email somehow and while this step typically doesn’t alter the HTML, there are a few exceptions.
- The Good Guys: POP & IMAP and WebDav & DeltaSync. For our purposes, these four protocols will not change the raw HTML email. POP & IMAP are thought to be the most commonly used methods of retrieving email. Microsoft uses DeltaSync (and previously, WebDav, which is an older alternative) to fetch an email from web-based services such as Hotmail.
- The Inbetweener: Exchange. Exchange is Microsoft’s email server that manages the sending and receiving of email. Unless particular filtering is used, Exchange will deliver the HTML email to the email client without changing it.
- The Troublesome One: Domino: Domino is IBM’s email server, which is similar to Exchange but designed specifically for Lotus Notes. Unfortunately, Domino will change an email’s HTML to prepare it for viewing in Lotus Notes.
Before an email’s HTML can be handed over to a rendering engine, the client (or, in the case of Domino, the server) needs to pass through a preprocessor. A preprocesser’s job is to remove anything that could be dangerous and introduce privacy concerns or anything that could cause the email to behave unexpectedly.
- Local: These are the preprocessors used by desktop and mobile email clients and are rarely the ones that cause headaches for designers. They typically do most or all of the following:
- Remove object, embed and related tags (prevents ActiveX or Flash content).
- Remove unrecognized tags.
- Break all external references (URLs) to prevent the rendering engine from loading external content without the user’s permission.
- Web-based: Web-based clients, like Hotmail or Gmail, will certainly perform most of the tasks listed above, but they also have a larger, more difficult job since they have to prepare the HTML to be converted into HTML that’s safe to show within their own email client’s HTML. This causes major headaches for designers since most web-based clients will err on the side of being overly restrictive and remove anything with even the slightest potential to affect the layout of their email client. Check out our help article for some examples how web-based clients alter the HTML.
Once the email client has received the email and has preprocessed it appropriately, it’s now ready to hand the HTML over to the rendering engine to be properly processed and shown to the user.
- Trident (Internet Explorer): Microsoft’s Internet Explorer uses the rendering engine, Trident. One downside to Trident is that until very recently (Internet Explorer 7), it was not possible to bundle Trident with your application, so manufacturers had to ask Windows to borrow its default installed versions. For every designer’s sanity, Microsoft introduced “IE 7 compatibility view,” then forced Trident to revert to this mode whenever embedded in an application other than Internet Explorer. Outlook 2003, Outlook Express, and Windows Live Mail Desktop all use Trident, as does Lotus Notes. However, there are two flavors of Lotus Notes — the first uses Lotus Notes built-in POP or IMAP support to connect to a normal server, while the other uses a Domino server to retrieve email.
- NotesRichText: NotesRichText is a heavily limited HTML rendering engine that works by converting your email’s HTML into a proprietary rich text format and displaying supported elements in a special rich text viewer. It’s akin to Microsoft’s Word HTML rendering engine, but, unfortunately, supports an even smaller subject of HTML elements, attributes and CSS rules. The best approach to working with the NotesRichText client is to inline your CSS into style attributes wherever possible; to “reset” layout style rules, such as padding and margin; and to use table-based layouts.
- Gecko: Mozilla’s Gecko rendering engine is used by Firefox and has top-notch support for all modern web standards. Unlike Trident, Gecko allows you to bundle a fixed version with your application, and the email client Thunderbird does just this.
- Tasman: Microsoft’s Tasman rendering engine was used by Entourage 2004 (the version of Outlook for Mac OS X) and was considered “ahead of its time,” but when Microsoft launched Entourage 2008, they chose to drop Tasmin in favor of WebKit.
- WebKit: On par with Gecko, WebKit is unlikely to give you trouble when designing HTML emails. Email clients that use WebKit include Apple Mail, Entourage 2008, and Outlook for Mac 2011.
- Microsoft Word: In the past, Microsoft Outlook used Internet Explorer (Trident) as its rendering engine. However, due to rendering discrepancies between the same versions of Outlook, Microsoft Outlook 2007+ now use Microsoft Word for both rendering and composing HTML emails. While it fixed the discrepancies, it has created much larger issues since the Word rendering engine is very poor at rendering HTML that wasn’t originally created in Word — this has caused major headaches for email designers! To see a list of many of the limitations of the Word rendering engine, visit Microsoft’s MSDN documentation site.
It should be noted that web-based email clients, such as Hotmail and Gmail, will use the rendering engine of the user’s browser. For this reason, you should make sure that your email renders correctly in these web-based clients in (at least) Internet Explorer and Firefox.
So what does this all mean? Essentially, since each email client doesn’t use the same mail server, preprocessor, and rendering engine, your emails won’t look the same in every email client out there. That being said, it’s important to optimize your emails for the email clients that your subscribers most frequently open your email with and to, obviously, test your emails to see how they render in each of those clients.
- This post was based off one of our help articles, “Why do some email clients show my emails differently to others?” Check out that article for an even more detailed explanation — including more examples — of why emails are rendered differently.
- Why do email designs break? Check out this handy infographic to see all the ways email rendering can go wrong.