Of course the new iPhone 6 and iPhone 6 Plus boast a whole host of new features; and most email marketers and designers are wondering how this will affect the messages subscribers receive on these new devices.
Below is how each of the new devices compares to their predcessor the iPhone 5.
A lot of templates typically use a media query like this:
@media screen and (max-device-width: 320px)
The main thing that these new dimensions highlight is that responsive or mobile friendly design is now the best way to build emails for all users. And, although scaled emails look great on the larger iPhone devices, just sending a campaign optimized for the desktop is no longer acceptable in the mobile world.
With the new screen sizes of the iPhone 6 and 6 Plus, the traditional media queries need to be adapted. There is no longer a “one media query to rule them all” for iPhones. At the very least, your new media queries need to start at 414 pixels.
@media screen and (max-device-width: 414px)
To make matters a little more confusing; at this point I'd like to make a special mention of the unique display dimensions of the iPhone 6 Plus.
Internally, the iPhone 6 Plus native resolution is 1242px by 2208px. However this is actually downsampled into a 1080px display as its physical representation. The above media query breakpoint of 414px is calculated by it's native resolution of 1242px/3 device pixel ratio.
Email on iPhone 6
The first noticeable difference between the iPhones 6 and older models is that the increased screen sizes allow for more space for Mail to display content. This means that, when looking at the inbox, more emails are visible. More importantly, Mail on the new iPhones display more characters in the from name, subject line, and preheader text. This could be highly valuable for email marketers since they will be able to provide more information for subscribers right in the inbox view.
PRE HEADER TEXT
We’ve long recommended using preheader text to help inform subscribers and draw them into an email. Now, with the iPhone 6 Plus’ 5.5 inch Retina display, preheader text lovers have a whopping three lines of preheader text available to them.
Apple has also introduced a new view for the iPhone 6 Plus. With the added screen real estate, they have introduced a new landscape view, similar to how the iPad has traditionally displayed the Mail app.
While this had email designers initiallly concerned that this would add yet another breakpoint to account for, our testing has shown that there is likely some scaling going on and this view renders emails using the same targeting and breakpoints for the iPhone 6 Plus. It should be noted that the sidebar in the landscape mode can be collapsed, displaying emails at full width.
Our final evaluation: should we be concerned?
No, we don't believe the introduction of Apple's two new phones is that drastic of a shift from what we have currently been dealing with. For a long time now, email designers have had to think and consider the possiblity of their emails being viewed on multiple screen sizes and devices.
The new display sizes mean that we need to think about our responsive layouts a bit more and it’s likely that email designers will need to adjust their media queries to account for these larger iPhones at some point.
However through our initial testing of the EzyMsg mobile friendly templates we're happy to find that so far there has been some scaling taking place when viewing on these new devices and emails are still rendered in an optimised format.