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

https://litmus.com/blog/your-email-on-mobile-how-each-mobile-os-displays-your-message?utm_campaign=mar2013news&utm_source=newsletter&utm_medium=email

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.

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

• Email design tips and examples for Windows Phone and Android
• A downloadable file of various Android preview panes
• More information on pixel density, including common pixel-device-ratios
• Worldwide mobile phone sales, top smartphone platforms, details on Nokia sales, and a summary of growth
• Distribution of screen sizes/densities across Android devices
• Responsive design and media query support for email