Mobile Email: How Devices, Operating Systems, Apps and Engines Affect Rendering11
Predicting how emails will render on smartphones and tablets can get complicated because there are so many factors involved. Differences between device manufacturers, operating systems, screen sizes and email applications can all impact how your email will render on a mobile device. Just in case desktop and webmail rendering weren’t already giving you enough trouble (we’re looking at you, Outlook), the popularity of mobile has only added fuel to the fire.
MOBILE WEBKIT OFFERS GREAT SUPPORT FOR HTML AND CSS
As explained in earlier desktop and webmail rendering videos, the WebKit rendering engine has top-notch support for all modern web standards and is unlikely to give you much trouble when designing HTML emails.
The mobile version of WebKit has similarly superior rendering capabilities and is used by Android, BlackBerry and iOS. This means that most modern mobile operating systems have great support for HTML and CSS, but there are still some things you’ll want to be aware of.
PREPROCESSING TO BLAME FOR RENDERING DISCREPANCIES
Similar to webmail rendering, each mobile email client uses a proprietary preprocessor which removes anything that could be dangerous, introduce privacy concerns or cause the email client to behave unexpectedly. The preprocessor doesn’t alter the HTML until it arrives to the phone and, once the preprocessing is finished, the HTML is passed to the phone’s browser to render. Each email application on the phone “borrows” WebKit to render the email, even if the email’s not being read in the browser itself.
So, while it’s very likely that emails read on a mobile device will be rendered using WebKit, differences in preprocessors and behaviors between email apps, even on the same device, can result in rendering differences in each one. For example, the Gmail app on Android removes all CSS, including media queries used in responsive designs, while the email app on Android has better support for responsive elements. And while the iPhone scales designs to fit the screen, users with a BlackBerry Z10 will need to scroll and pinch to view their messages.
VARIATIONS IN WEBKIT LEAD TO INCONSISTENCIES
To make matters more confusing, there are subtle differences between each devices’ implementation of WebKit, so Android, Blackberry and iOS all use a slightly different variation of WebKit to render. For example, each manufacturer may opt for a different style of button, or slightly different font smoothing.
WINDOWS PHONE USES INTERNET EXPLORER
Windows Phone also uses a preprocessor before passing HTML to the phone’s browser, but uses Internet Explorer rather than WebKit. The newest versions of Internet Explorer render similarly to WebKit, although you may see subtle differences. You’ll also want to be sure to exclude IE 10 or higher from any HTML directly targeting Internet Explorer.
WHAT ABOUT SUBSCRIBERS THAT DON’T USE AN EMAIL APP?
And what if you don’t use an email app? Some users prefer to use the browser on their phone to log in and read messages. Viewing email in your phone’s browser is essentially identical to using a webmail client on your desktop, but on a smaller screen; though sometimes there’s an extra layer of preprocessing since the client knows you are opening the email on a mobile device. Be sure to test!
WHAT’S AN EMAIL DESIGNER TO DO?
Needless to say, mobile rendering is complex and there are literally dozens of ways to view an email on mobile, sometimes even on a single device. You’ll definitely want to test your emails on the native email app for iPhone, as well as the email and Gmail apps for Android, since they represent the majority of situations you—and your users— are bound to encounter.
You can use Litmus to see how your email will render in many of these variations, and, if you’re using Email Analytics, you can also see which mobile devices are most popular to focus your testing efforts and help optimize your emails for viewing on mobile.