What does the iPhone 6 mean for Responsive Email? (updated)

U2 have barely finished up on stage at today’s Apple announcement, but we figured we’d take a quick look at a couple of the more immediate changes the new iPhone could bring to your email coding workflow.

iOS 8’s native email client, which will be shipped to iPhone users in a couple of weeks, doesn’t change much in terms of email rendering, so it’s pretty much business as usual there. However both sizes of iPhone 6 mark a departure in screen width from previous models.

Before we start, we need to remember that unlike Android devices, when it comes to media queries, iOS devices report their screen size already considering the pixel density.
A high definition screen on Android that contains, say, 640 physical pixels, will be reported to the HTML rendering engine as 640 pixels wide. A retina iPhone, on the other hand, will consider that 1 high resolution pixel is formed of 4 (2×2) physical screen pixels, and therefore as far as CSS is concerned, the screen is infact 320px wide.

Currently an iPhone 5S screen is made up of 1136×640 pixels, at 326 ppi. Once you consider @2x sizes for the retina screen, this is reported as 568px high and 320px wide. So to target the iPhone 5S using media queries, we need to target a screen size that is at least 320px wide in portrait view.

The iPhone 6, on the other hand, comes in two, larger flavours. The 6 (smaller) is 750px wide, which with 2x pixels is reported as 375px. The larger iPhone 6+, is 1080px wide, at scaled 2.6x pixel density, which is 414px wide as far as media queries are concerned.*

*Edit – there’s a bit of debate around the CSS size for the 6+ screen, and it currently could be 360px (at 3x pixel density) or 414px (at 2.6x). The 414px argument is supported by the amount of 413px based media queries on Apple’s new site, and several iOS dev articles.

What that means for email designers, is that if you’ve previously been specifically targeting iPhone users as being on a device that is 320px wide, you’ll need to adjust your code to also consider iPhones that are effectively 360px, 375px or 414px wide.

One approach that we’ve adopted in recent years is to move away from device-specific media queries, and instead make our email 100% wide for any screen below 640px wide. (640px, up until now, being double the width of the iPhone screen, which makes the maths nice and easy for responsive techniques)

And what about the watch?

Well that’s the million dollar question, or at least the starting-at-$349 one. We’ll find out more in 2015, but from the keynote and the new look Apple site, there does appear to be some kind of mail app on the watch itself.

Mail.app on Apple Watch has an inbox view, which looks broadly similar to that on iOS, including part of the subject line and a short preheader piece of text. It’s also possible to view emails on the Watch itself, but as all of the demos show a regular text based email, it’s unclear how much HTML capability there is. As there doesn’t seem to be a web browser for the Watch, it does seem unlikely that there would be that much in the way of HTML support.

The saving grace for marketing email, of course, is that it’s unlikely that users would be able to convert in any meaningful way using the Watch, so perhaps it’s better to use what subject line and pre-header copy we can to entice users to open the email on their phone.

Time will tell.

More

• Campaign Monitor’s thoughts