Your Email on Mobile: How Each Mobile OS Displays Your Message

[ 26 By

As more mobile devices are introduced into the marketplace, the number of screen sizes we need to consider when designing email is exploding. This superabundance of screen sizes directly impacts the design and planning process—affecting how you determine breakpoints in media queries, lay out your design and use responsive design techniques.

To make matters more confusing, each mobile device will likely run one of four popular operating systems, each with its own ecosystem of downloadable applications for reading email. These applications offer differing support for HTML and CSS—meaning that emails opened on the same device might display differently from program to program and app to app. It’s worthwhile to note that the concept of pixel density also plays a part (see callout below).

IS A PIXEL REALLY A PIXEL?

With the introduction of retina and high-resolution displays came a lot of confusion about how wide emails and websites would appear on devices. If the specs for the iPhone 5 tell us that the resolution is 1136 x 640, why isn’t the phone physically wider than the iPhone 3GS (which had a resolution of 480 x 320)?

The iPhone 5 displays 1 device-independent (or density-independent) pixel, or ‘dip’, for every 2 physical pixels on the display, making the iPhone 5 have a device pixel ratio of 2 and a dip resolution of 568 x 320. So, while Samsung’s Galaxy Note has a massive physical pixel resolution of 1280 x 720, the dip is 640 x 360.

While we can’t cover every conceivable option, the graphic below begins to communicate the wide variety of mobile screen sizes out there, and shows how a standard 600px-wide email without responsive elements will display on several popular devices and the default mail applications in each of their operating systems. You can also see a hands-on review (and video!) of how BlackBerry’s new Z10 smartphone displays email in a separate post.

Click on the graphic for an enlarged view. The entire text of the graphic is also available below.

Litmus-Your-Email-on-Mobile

Infographic design: Brandon Cooper

With 43% of all email opens occurring on a mobile device, it’s important to understand how your email will look when opened on one. Factor in ever-increasing screen sizes to the various mobile operating systems and email programs available, and you are left with a dizzying array of combinations to consider.

We’ve taken some of the guesswork away by visualizing how the same email will appear in five common devices and operating systems available.

Apple iPhone 5

With 47.8 million iPhones sold in the last quarter of 2012, Apple ranks as the #1 smartphone manufacturer and #2 smartphone platform in the US with 36.3% market share.

  • 4” display
  • 1136 x 640 resolution at 326 ppi
  • iOS 6

All iPhone and iOS versions zoom into emails to fit the message to the width of the screen.

Samsung Galaxy Note II

The Note runs Android, the #1 smartphone platform in the US with 53.4% market share. Samsung was the #2 device manufacturer in 2012, taking 21% of the market.

  • 5.55” display
  • 1280 x 720 resolution at 267 ppi
  • Android 4.1 Jelly Bean

Android displays the upper left-hand corner of your email, leaving users to scroll left-and-right in addition to up-and-down to view your entire message. The exact dimensions of this “preview pane” vary.

LG Nexus 4

While LG ranks as the #5 smartphone platform, their Nexus 4 phone runs Android, the #1 operating system. This popular phone has been frequently sold out, especially in the weeks leading into the 2012 holiday season.

  • 4.7” display
  • 1280 x 768 resolution at 320 ppi
  • Android 4.2 Jelly Bean

Android users may choose to view emails with the platform’s popular Gmail application or the manufacturer-provided native email application. The Gmail app (like its desktop counterpart) lacks support for embedded CSS, essentially ignoring any responsive elements in your email. However, the native email app has built-in media query support, displaying responsive messages in their full glory.

Nokia Lumia 920

With just 2.9% of smartphone platform share, Microsoft has managed to generate a lot of buzz surrounding its latest operating system, Windows Phone 8. More popular outside the US, Nokia reports sales of 4.4 million Lumia devices in Q4 2012

  • 4.5” display
  • 1280 x 768 resolution at 332 ppi
  • Windows Phone 8

The from name and subject line dominates the inbox view on Windows Phone 7+. The email is also “zoomed in” to fit the entire width on the screen, although less so than on iOS.

BlackBerry Bold 9900

BlackBerry has maintained a spot as the #3 smartphone platform, but continues to lose market share, declining from 8.4% in Q3 2012 to 6.4% in Q4 2012. BlackBerry devotees love the physical keyboard while enterprises appreciate the built-in security features.

  • 2.44” display
  • 480 x 360 resolution at 244 ppi
  • BlackBerry OS 6

Similar to Android, BlackBerry phones running OS 6 will display the top-left corner of emails.

ADDITIONAL RESOURCES

  • http://essbee.co.uk/ Sean Botha

    Excellent article – mobile email campaigns are becoming increasingly important, good to see this covered in such detail.

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

      Thanks, Sean!

  • Gianni Boffa

    Been testing all of tizaro.com new email templates through Litmus. Sailthru with Litmus is a great combination. Defiently recommend you to everyone I know

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

      Thanks so much, Gianni!

  • betona

    It’s not just readability in the device – you need to test the functional aspects on devices going to mobile payoffs. For example, Pizza Hut has yet to figure out that when they send a special offer email and you click on the email link on a phone or an iPad, their web server senses mobile and redirects you to the top of their mobile site and you never see the offer. It’s frustrating because I want my pizza offer, dammit!

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

      Very good point! You’re right… what happens after people get an email is very important, too. Pizza Hut is making you frustrated AND losing money at the same time. Not a good combination!

      • http://rmwpublishing.net.au/ Mountain/Ash

        Well they are actually saving money (well not loosing more) as he’s not able use a coupon to lower the spend price of their products.

  • http://twitter.com/thomasfuchs Thomas Fuchs

    Hey there—nice work! It would be great to show the infographic in 2x resolution on Retina screens, looks really fuzzy (in WordPress, you can just upload the high-res image and use CSS to scale instead of letting WordPress resize the image).

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

      Thanks for the feedback! Right now we do offer a much larger version after click-through. We’re working on a redesign, too!

  • Isaac Rodriguez Payan

    Then? how can this be fixed??

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

      While there’s no way to be sure that your email will look the same in every mobile device, there are some different strategies you can use to improve how it looks, including responsive design. I recently gave a webinar explaining this. You can see a recording here: https://litmus.com/blog/webinar-mobile-email-strategies-approaches

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

    Great to hear that it was useful!

  • Jonathan Schwartz

    Your infographic notes that Android’s native app has @media support but I have not found that to be the case, unless you’re referring to something other than the Android Outlook Exchange client.

    http://stylecampaign.com/blog/2012/10/responsive-email-support/

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

      Anna’s blog is correct, @media does not work on Android Outlook Exchange. We’re referring to the native “email” app on the phone. She refers to the native email app as “Android 4.1 Jelly bean native client” or similar.

      • Jonathan Schwartz

        I’ve got a Galaxy Nexus, so it’s my native email app (and I’ve got 4.2). Since it’s the native client for jelly bean, does this mean that google is moving away from compatibility or towards it? I guess I’m asking: Will future versions of the native email app in Android be @media query compatible?

        Thanks.

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

          Android has supported @media in the native email client since Froyo (2.2), so there is no indication that Android would move backwards. I think you’re confusing the native app with Outlook Exchange, while they are two different clients with different compatibility.

  • http://www.wpguru.com.au/ Robin Thebs

    Great insights.
    But one things always frustrate me is the when your client targets mostly use Outlook, you can even think of mobile while doing EDMs

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

      You can definitely use mobile optimization techniques alongside Outlook. Here’s a campaign that uses media queries to target mobile, and still looks great in Outlook: https://litmus.com/pub/84b6bdc/screenshots

      • http://www.wpguru.com.au/ Robin Thebs

        Thanks Justine.
        Demos were good.

  • Pingback: Tus emails en dispositivos móviles ¿has superado el test? - ecommondays | ecommondays