Why Clients Render Email Differently | MailChimp Email Marketing Blog

• Updated on: 2018-10-29
• Read original article here

We recently discussed email client popularity and covered some strategies for testing your campaigns with Inbox Preview. Today, we’ll explore the different ways clients render emails and investigate why those differences exist.

It’s relatively simple for a human to look at a set of images and determine which are most (or least) similar, but we needed a computer in order to quantify those similarities. Fortunately, given the right algorithm, a computer can determine which of the following pairs of images are similar and which are different.

[According to the algorithm we used, images 3 and 4 are most similar to each other. Images 3 and 2 are least similar.]

We compared thousands of Inbox Previews to understand the similarities and differences in the way email clients render emails. The network graph below illustrates the 3 email clients that are most similar for each of the other clients. Not every client is connected, so that means the relationships illustrated aren’t necessarily reciprocal. For instance, the Outlook cluster on the top of the graph is strongly connected through reciprocal relationships. It’s like identical triplets whose mother insists on dressing them in matching outfits—they’re all really similar to each other, and that similarity is strong in each direction.

However, iPhone’s relationships with Yahoo, iPad, and Gmail can be thought of more like the younger brother who begs to tag along with his older sibling. They’re similar, but that similarity doesn’t go both ways. Older brother isn’t inviting the little guy to the movies or the skate park, even though he’s trying his darndest to be included.

Now that we’ve established that there are quantifiable differences in how different clients render the same email, let’s take a look at why those differences exist.

Yahoo in Chrome, Gmail in Chrome, and iPad all render emails similarly. “Though it’s got a few shortcomings, Yahoo is thought of as a client that renders emails reasonably well," says MailChimp’s senior front-end manager and former lead email developer, Fabio Carneiro. "Gmail stands apart from the other web clients because it requires that CSS is inlined. Due to this, it tends to be more problematic than the others in how it render emails, which has led to the industry-wide notion that Gmail is the most-difficult email client to work with."

Fabio elaborates: "It doesn’t support un-inlined CSS, and thus media queries, which can cause issues with mobile-specific content. It’s also inconsistent in the way it renders emails across desktop, Android, and iOS versions of its clients, which sometimes makes it difficult to design around and develop for. Outlook also has a reputation for rendering emails poorly, but it’s at least consistent with poor rendering, as the client hasn’t changed much over a decade, and there are well-documented workarounds to common issues.”

(Note: This research was conducted before Gmail announced support for media queries. When those changes are rolled out, Gmail will support responsive design. Which means it’ll likely behave much more like iOS or Android’s native email client when rendering emails.)

As one might expect, Outlook 2007, 2010, and 2013 are very similar to each other and very different from all other tested clients. Outlook 2015 is less similar to other versions of Outlook, but more similar to Apple Mail, Gmail, and iPad. This may seem counterintuitive, but it comes down to the rendering engines that power the clients. Outlook 2007, 2010, and 2013 all run on the Microsoft Word rendering engine. Outlook 2015, however, runs on WebKit—just like Apple Mail and iPad’s native mail app.

Mobile email clients all typically have a smaller screen and serve a similar purpose, so it’s easy to assume they would all display email in a similar way. But the truth is that iPhone 6 and Gmail on Android are actually the most different of any clients we studied. They’re not only different from each other, though—they’re also different from all other clients.

This is explained, at least in part, by the fact that there’s no such thing as a true Gmail mobile client. There’s web Gmail ported to a mobile user interface, but all forms of Gmail are the same under the hood. The native iPhone mail app is powered by WebKit, so differences between these two clients are due to differences in WebKit and Android rendering.

If you don’t have the resources to develop custom-coded emails for each client, consider testing any mobile clients that have a strong presence on your list. If Outlook 2007, 2010, or 2013 are popular among your subscribers, you can probably safely test just one of those, as they all run on the same rendering engine. Finally, test Gmail if it’s widely used among your subscribers, as it’s consistently inconsistent.

“A lot of people think any [email] they design and build has to be perfect across all clients, when really, the work to do that is kind of wasted effort,” Fabio explains. Because email clients cluster together in terms of how they present an email, “thinking about designing a baseline experience and enhancing for each major cluster of clients on your list could net better results and make development much easier and faster.”

All of which is to say: test, tweak, and repeat! Inbox Preview can help.