Why Do Email Clients Render Emails Differently?

[ 2 By

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.

Preprocessing

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 Javascript & other client-side scripting.
    • 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.

Rendering Engines

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.

Lotus Notes Rendering Chart

  • 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.

In Summary

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.

Additional Resources

  • Bhavna Gupta

    Hi.. This is very informative.

    I am facing similar problem. I have some HTML content which is rendering in Outlook Express, Mozilla Thunderbird and Windows mail properly but in case of lotus notes and other email client programs, HTML content is getting disturb.

    I am having a URL which is mapped on one image such that when receiver hits the image then he jumps on the URL. But problem is, when this email is downloaded in Lotus notes then this URL gets break and that person is not able to view the URL content. But same email when downloads at other email client then it works fine.

    Can you please suggest something on this. Thanks in advance…. 

    • http://www.litmus.com Justine, Litmus

      Hi Bhavna, sorry to hear that you’re having trouble. Lotus Notes is infamous for breaking HTML emails. You might find that you don’t have many readers using this program (it has very small market share, except in some specific industries). You can also give Litmus a try to see how your emails render in Notes — we also have a code analysis tool and landing page tester that might be able to diagnose some of your URL issues. All our plans come with a 7-day free trial: https://litmus.com/pricing