Discuss

iphone 5 email design

iPhone 5 Effects on Email Design

By | Blog | No Comments

Say what you will about Apple, the tech giant’s products command a significant share of the consumer market, so much so that their devices affect web and email design alike.

With the arrival of the iPhone 5, a device with a 4-inch resolution and a higher resolution of 640 × 1,136 pixels at 326 ppi, we’ve already received a number of questions about what this bodes for email designs and their designers.

Where the Problem Starts

As in previous high-res and Retina displays, the new iPhone 5 features a pixel ratio of 2 (i.e. 2 physical pixels for 1 device-independent pixel in software). This means that while the iPhone 5 has a physical resolution of 1136 x 640 pixels, its device-width resolution is only 568 x 320.

That’s not too much of a problem for email layouts in portrait mode, as all previous iPhone models still have a similar range device-width. In landscape orientation, however, the longer 568px width begins to cause problems in designs that adhere to the 480px standard, which is used across email and web CSS stylesheets.

The worst that could happen when emails designed with the 480px standard are viewed on the iPhone 5 in landscape isn’t so bad—they’d simply revert to how emails are displayed on webmail and desktop email clients. Seeing as how the iPhone 5’s 568px-wide resolution isn’t too far from the 600 – 650px widths on conventional email designs, all it takes to view emails properly is to zoom a little.

Ideal Solutions

If you’re adamant on having mobile emails display properly on the iPhone 5 in any orientation, you have the option of changing your media query declaration with the new max-device-width of 568px. You could also use a fully responsive email design, or better yet, use both options simultaneously.

Here at Enform, we’ll be carefully testing email campaigns on the new iPhone 5’s new iO6 Mail platform to determine what changes have to be made, the better to update the resources on Automailer by Enform. Stay tuned to this blog for updates and solutions.