Desktop Rendering Issues? Focus Initial Testing on a Handful of Rendering Engines

[ 0 By

Designing emails is hard. In part one of a three-part series, we explored how webmail clients render emails, what you should focus on to make designing and coding for these web-based clients a bit easier, and why preprocessors are (usually!) the enemy. In part two, we’ll focus on desktop rendering issues for email.

A FOCUS ON THE MAIN DESKTOP CLIENTS

While there is an abundance of desktop clients, we’re going to focus on four of the main ones: Microsoft Outlook, Lotus Notes, Apple Mail, and Mozilla Thunderbird, which all have numerous different versions. By understanding how each of them display emails, and recognizing the similarities, you can save yourself a lot of headaches and testing time.

Let’s start by simplifying things. Here are all the versions we need to tackle.

desktop-rendering

Apple Mail and Thunderbird haven’t changed substantially between versions so we’ll lump them together here. And, while that still seems like a lot of different clients and versions left over, some of them are pretty similar to each other because they use the same rendering engine to display the email.

RENDERING ENGINE: INTERNET EXPLORER

Early versions of Microsoft Outlook use Internet Explorer to render email. In Outlook 2003, the part of the application that displays your email is in fact an embedded Internet Explorer browser window. Similarly to early versions of Outlook, early versions of Lotus Notes also use Internet Explorer to render. As a result, we can group all of these together.

desktop-IE

RENDERING ENGINES: GECKO + WEBKIT

In a similar way, Thunderbird uses the Firefox rendering engine, known as Gecko. Apple Mail uses the Safari rendering engine, known as WebKit. Also, note that the Mac version of Outlook, called Outlook 2011, copies Apple Mail and uses WebKit as well. Both Gecko and WebKit have great CSS support and aren’t likely to give you many problems!

desktop-gecko-webkit

THE TRICKIER CLIENTS…

The ones leftover are the trickier ones. Since the 2007 version, Outlook on Windows has used the Microsoft Word rendering engine to display HTML email. This is pretty bad for email designers, as it doesn’t support a lot of basic CSS properties.

desktop-other

And unfortunately, some versions of Lotus Notes — depending on how they’ve been configured — use a “rich text” view that’s even worse than Word. Think WordPad or TextEdit: not the most graphically rich way to display content.

WHAT’S AN EMAIL DESIGNER TO DO?

Overall, knowing how these clients work under the hood can save you a ton of time. Email clients using the same rendering engine display things almost identically, meaning an email that displays correctly in Outlook 2003 should look the same in Notes 8, or one that renders correctly in Apple Mail should also look great in Outlook for Mac.

The key thing here is that you can focus your initial email testing on a handful of engines, rather than a dozen different clients!

And this helps explain why Lotus Notes and newer versions of Outlook are the most difficult desktop clients to design for. They simply don’t work the same way web browsers do. On the other hand, Gecko and WebKit are great standards-compliant web browsers, so Apple Mail and Thunderbird should rarely give you problems when creating HTML emails.

If you’re using Email Analytics to collect open data from your readers, your rendering engine report is invaluable — it breaks down how many of your subscribers are using Webkit, MS Word, Firefox or Internet Explorer.

Rendering Engines

You can use your stats to focus your testing efforts where it matters most.

What about mobile?

Check out part three in the series, “Mobile Email: How Devices, Operating Systems, Apps, and Engines Affect Rendering.”

GET THE LATEST DELIVERED STRAIGHT TO YOUR INBOX

Want to get more tips and advice like this? Subscribe to our newsletter and get the latest content for email marketing pros delivered straight to your inbox.