Mobile Email: How Devices, Operating Systems, Apps and Engines Affect Rendering

[ 11 By

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.

variances-in-rendering
Manufacturers, operating systems, screen sizes and apps each play roles in rendering

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.

mobile-rendering-in-android

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.

mobile-email-applications

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.

ADDITIONAL RESOURCES

  • Pendar Yousefi

    Awesome video: great content, and gorgeous animations!

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

      Thanks, Pendar! All animations are Jack’s handiwork :)

  • Jason Gazaway

    Awesome content! Very relevant to issues we are currently facing and have been scratching our heads about. Thanks for posting this!

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

      Thanks! We’re glad it’s been useful :)

  • Dennis, ListsUK

    Great content, thanks Litmus :)

  • Pingback: Mobile Email: How Devices, Operating Systems, Apps and Engines Affect Rendering | Litmus | Outside the Bracket

  • Desi Reuben-Sealey

    Excellent post. Awesome video.

  • http://www.moorecreative.com/ Ryan moore

    Thanks Litmus for posting such great content. I have a hard time explaining to ad agencies and design clients all of the variations and variables that go into desktop and mobile rendering, and in turn they find it impossible to relay to their end clients. A video series like this really helps give us something we can share to everyone.
    And, of course, it’s a good segue to explaining how we use Litmus and why it’s so important!
    Keep being awesome!

  • jgarite

    At my company, we need physical devices on-hand for testing. I am going to recommend the Latest Nexus device (5) and possibly the Galaxy Note II as well. I was hoping to get confirmation from users of these devices that they both support media queries in the native email app.

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

      You should be all set with the Nexus. However, there are some reports of issues with the native email app running on Android 4.4 on Samsung devices.

      • jgarite

        I have the Samsung Galaxy S3 and media queries don’t work (running 4.3) on that native email app. I think we’ll get the Nexus 4 since that has the OS that is the majority of the market share. Thank you for confirming Justine.