Yesterday Apple announced the new iPhone 6 and the big brother the iPhone 6 plus. These new devices can easily be game changers for email developers.

A while ago the iPhones had unique aspect ratios. First generations had 3:2 screen sizes with 480 x 320 px or 960 x 640 px. Changes came with iPhone 5, the new resolution was 1136x640px, and the new aspect ratio is 71/40, that is very close to the 16:9.

Now the new iPhone uses the standard 16:9 ratio. The iPhone 6 has a resolution of 1334x750px, while the 6 plus 1920×1080. It makes it even harder to target your email campaigns properly.

The 326ppi is almost a unique parameter of Apple retina displays – but one of Motorola’s phone has the same pixel ratio. Actually iOS 7 native email client does not really respond to dpi or ppi based resolution media queries. Maybe the new iOS 8 will have better support for dpi/ppi based queries, but than when older iPhones will update, who knows if we will have the option to target differently with this option or not.

Actually the only way to target through pixel density is the -webkit-min-device-pixel-ratio property, but most of the Androids and other webkit based software use, the same 1, 2 or 3 value so this is also not really precise.

The guys at Campaign Monitor had very fast reactions, and already posted a possible solution for targeting the iPhone 6.

In our tests we usually use the min-width, max-width, and device-aspect-ratio combination. For iPads also, if its needed you could add -webkit-min-device-pixel-ratio. (We use to differentiate the non-retinas and retinas.)

So lot of things can change with the new iPhone. We are very excited. What about you?

Author
Gergely Mecs

Gergely Mecs

Chief Frontend Developer @ EDMdesigner.com

  • HTML Email Development Tools HTML Email Development Tools

    Would you like to improve your HTML email development workflow and learn about new developer tools? This article series is for you.

    Read more
  • Git Branching Workflows in SaaS Development and the Review ASAP Policy Git Branching Workflows in SaaS Development and the Review ASAP Policy

    This article shows you a git branching workflow which helps developers to review changes frequently, leading to better code quality.

    Read more
  • Tabular Data Representation in Modern HTML Emails Tabular Data Representation in Modern HTML Emails

    Responsive tables are the most common ways to represent tabular data in HTML emails. Learn about the best practices and the card layout design approach.

    Read more