iPhone 6: What Email Designers and Marketers Need to Know

[ 0 By

On September 19th, 2014, consumers once again smashed records as they went online and in-store to purchase the latest Apple has to offer, the iPhone 6 and iPhone 6 Plus. And while the iPhone 6 and 6 Plus offer plenty of new features to get excited about, most email marketers and designers are wondering how this will affect the messages subscribers receive on these new devices. What’s going to change about iPhone 6 email design?

Screen Size

The biggest news about the latest Apple smartphones is their increased screen sizes. The introduction of the iPhone 6 and 6 Plus marks the first time that iPhones can have several different screen widths.

During the four years between the release of the very first iPhone and the iPhone 5, the width of the screen never changed. Email designers will now need to account for the diversity in iPhone screen sizes when creating responsive and mobile-friendly emails. In many cases, adjustments to media queries and breakpoints for responsive or adaptive emails will be necessary.

iPhone 4

iPhone 5

iPhone 6

iPhone 6 Plus

3.5 inch display

4 inch display

4.7 inch display

5.5 inch display

960 x 640 pixels

1136 x 640 pixels

1334 x 750 pixels

1920 x 1080 pixels

Compared to Samsung, HTC, LG and other devices running the Android operating system, this is a big deal. While the Android marketplace has dozens (if not hundreds) of different screen sizes and widths, the variety of iPhone screen sizes has been minimal up until now.

Many mobile-friendly and responsive emails are optimized specifically for the dimensions—and even more specifically, the width—of the iPhone 4 and iPhone 5. Due to the popularity of the iPhone and consistency of its screen size, 320px became the defacto standard for breakpoints in media queries and other mobile optimization tactics. This has the potential to cause a variety of issues.

Before we get too far into the details, it’s important to understand some terms that we’ll frequently use.

  • Breakpoint: The width at which the layout of the email ‘breaks’ or moves from one layout to another. This is usually defined by a specific width, or range of widths, in pixels. For example, if an email’s HTML has a breakpoint of 320px, it would display one layout at widths under 320px and another layout at widths above 320px.
  • Resolution: The number of physical pixels across a device’s width and height (e.g. an iPhone 5 has a resolution of 1136 x 640 pixels).
  • PPI: PPI stands for “pixels per inch.” A List Apart describes a pixel as the “smallest point a screen can physically display,” essentially a tiny dot emitting light from your screen.
  • Device Pixel Ratio: The ratio between physical pixels and how the device defines and uses pixels. In email, the device-pixel-ratio is used to target devices using media queries.

Here’s how each of the new devices compares to their predecessor, the iPhone 5.

iPhone 5

iPhone 6

iPhone 6 Plus

Dimensions

1136 x 640 px 1334 x 750 px 1920 x 1080 px

PPI

326 326 401

Device-Pixel-Ratio

2 2 3

All of these specifications allow email designers to determine what screen sizes they need to design for and then target those screen sizes for use in their responsive breakpoints.

Traditionally, as the iPhone is the most popular device for viewing email, many email designers used that device as the main breakpoint when setting up responsive emails. A lot of templates typically use a media query like this:

@media screen and (max-device-width: 320px) { /* Insert styles here */ }

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) { /* Insert styles here */ }

Here are the exact media queries for the new iPhones.

iPhone 6 (Zoom View):

@media screen and (max-device-width: 320px) and (max-device-height: 568px) { /* Insert styles here */ }

iPhone 6 (Standard View) and iPhone 6 Plus (Zoom View):

@media screen and (max-device-width: 375px) and (max-device-height: 667px) { /* Insert styles here */ }

iPhone 6 Plus (Standard View):

@media screen and (max-device-width: 414px) and (max-device-height: 776px) { /* Insert styles here */ }

The main thing that these new media queries highlight is that responsive design is now the best way to build emails for all users. Relying on adaptive design, which targets specific device sizes and adapts the design accordingly, won’t work as mobile devices are increasingly fragmented. 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.

While the new screen sizes are the main update for many email designers, what else can be expected from Apple’s most recent offerings?

email-AA-iPhone5

iPhone 5

email-AA-iPhone6

iPhone 6

email-AA-iphone6-plus

iPhone 6 Plus

Email on iPhone 6

Apple’s Mail on iOS has long been regarded as one of the best mobile email experiences. Rendering has been top-notch, with support for the latest in HTML and CSS. Plus, email marketers have had support for some of their favorite techniques like preheader text, responsive emails, and even video in email.

But, how does iOS 8 and a larger iPhone affect the email experience? (Looking for information on iOS 9? Head over to this guide.)

The Inbox

The first noticeable difference between the iPhones 6 and older models is that the increased screen sizes allow for more space for Mail to breathe. 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 interesting for email marketers since they will be able to provide more information for subscribers right in the inbox view.

inbox02-iphone5

iPhone 5 Mail

inbox02-iphone6

iPhone 6 Mail

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.

inbox-iphone6-plus

iPhone 6 Plus Mail

Landscape Mode

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.

iphone6-plus-landscape

iPhone 6 Plus Mail (Landscape View)

While we were initially 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 as above for the iPhone 6 Plus. It should be noted that the sidebar in the landscape mode can be collapsed, displaying emails at full width.

While the new landscape mode is interesting, many email marketers likely don’t have to make too much of a fuss about it. It’s been shown that, even when using two hands, only about ten percent of mobile users rely on the landscape mode.

iOS 8 Quirks

Not everything is perfect with iOS 8 and the new iPhones, though. In our testing, we’ve identified a few interesting issues that email designers need to be aware of.

Superscripts

One of the weirdest issues we’ve noticed has to do with using superscripts. A lot of designers rely on superscripts for marking disclaimers about offers in their emails. However, we ran into a problem with them on the iPhone 6.

When viewing superscripts in iOS 8 on an iPhone 5, they render as intended:

superscript-iPhone5

However, in the same operating system on the iPhone 6, superscripts rendered as smaller text, but not in the proper position:

superscript-iPhone6

Hopefully this is just a bug and is fixed in a future update.

UPDATE: This bug has been fixed with the iOS 8.1 update.

Video

As reported by Elliot Ross, the iPhone 6 doesn’t seem to support the video tag. While not everyone uses the video tag in their emails, an increasing number have in the past year or so.

In our testing, use of the video tag results in the display of a play button. However, tapping the button has no effect.

video-iPhone6

If you’re relying on the video tag for playing media in an email, you may want to rethink your strategy for now. Using a still image with a play button and linking out to the hosted video is a great option, as are animated GIFs. It’s likely that this is a bug, as Apple previously supported the video tag. Hopefully this gets fixed in an update, but until then—proceed with caution.

Should we be concerned?

So, does the introduction of iOS 8 and the two, larger iPhones mark a new era for email designers? Do we all need to completely rethink how we approach our campaigns?

While we don’t think it’s that drastic of a shift, the new display sizes do mean that we need to think about our responsive breakpoints. It’s likely that email designers will need to adjust their media queries to account for these larger iPhones.

Try Litmus Today

Update your media queries for the new iPhones? Don’t forget to test your campaign—iPhone 6 testing is now available.

Not a Litmus customer? Try us free!

Access your free trial →