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 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.