iPhone 5 (now available for testing) & Its Impact on Email Design

[ 0 By

There has been a steady increase in mobile opens — 123% in 18 months — and the majority of these opens are being made on iOS (80.34%) and Android (18.93%) devices.

Mobile Clients % Opens

Even taking image blocking into account, it’s undeniable that opens on smartphones are rising rapidly. Our September 2012 email client market share stats show that more emails are opened on an Apple iPhone (21%) than any other email client! In fact, email opens on the Apple iPhone have increased 76.62% since September 2011 — WOW! With these kind of statistics, it’s no surprise that email marketers have their eye on the newest member of the iPhone family — the iPhone 5.

iPhone 5 — Now Available for Testing!

We’re very excited to announce the introduction of the iPhone 5 to our email testing suite! We now offer testing on iOS 6 with the iPhone 5, iPhone 4S and iPad.

iPhone 5 now available for testing

iPhone 5 and iOS6 testing is now available on all Litmus accounts. Don’t have a Litmus account? Sign up for our free 7-day trial today & give it a try!

What does iOS 6 on the iPhone 5 mean for email designers?

With its retina display and effective 1136×640 pixel resolution, it’s certainly larger than previous incarnations of the iPhone. While the portrait orientation width remains the same at 320px, the landscape view has changed from 480px to 568px on account of that taller screen. (Note: Due to a device pixel ratio of 2, the iPhone 5’s physical pixel resolution is 1136×640 and the dip/device-width resolution is 568×320.)

Effects on Responsive Design & Media Queries

Creating responsive designs and concerned about how your emails will render in landscape mode on the iPhone 5? Our friends over at Campaign Monitor released a great post about the effect this change in resolution might have on your responsive designs.

To create a media query specifically for an iPhone 5, it would look like this:

Media query - Campaign Monitor

Since all iOS devices (besides the iPad) are within this device-width range, this media query would work fine on iPhone 5’s portrait orientation. However, things aren’t so easy with the landscape orientation; due to the length of the iPhone 5’s screen, the “568px width is in excess of the max-device-width of 480px commonly used across web and email CSS stylesheets alike.”

If you have used max-device-width of 480px and an email is viewed in an environment with a width larger than 480px (such as the iPhone 5 on the landscape orientation), your design will revert back to the default email (or desktop version). As long as your default email follows a mobile aware approach, it will still be legible and easy to interact with. However, if you’re concerned with having your responsive/mobile version displayed in landscape mode, simply change the max-device-width to 568px, rather than 480px.

Extra “Above the Fold” Visibility

The term “above the fold” refers to the portion of an email that you see when you open it — without scrolling. As SendBlaster states, “since many people simply scan their email, it is very important to place your most important and compelling information content above the fold.” Key information to include above the fold includes the company name & logo and the CTA and other important links. By presenting interesting content above the fold, subscribers are given an incentive to scroll to view the rest of the email.

With 176 more pixels than its iPhone predecessors, the iPhone 5 provides email marketers with a more space to put important content “above the fold.” This can be seen in the example below:

iPhone 4S vs iPhone 5 - "above the fold" content

In this example, there are four more clickable icons/CTAs in the iPhone 5 than there are in the iPhone 4S. iPhone 5 users are able to see a much larger portion of “above the fold” content than users of previous versions of the iPhone.

So what does this mean for email marketers? Due to the fact that there is no standard “above the fold” length in emails — it could be 600px on desktop clients, 300px in webmail clients or 150px on a mobile device — one of the only ways to make sure that the important content you want included “above the fold” is featured in each of the different email clients and environments is to preview your emails in different environments.

Litmus’ email testing tool enables you to see “above the fold” content rendered in over 40 different desktop, webmail & mobile clients. In addition, you might consider customizing “above the fold” content based on screen sizes using responsive design.

Our biggest tip for “above the fold” optimization is to only include pertinent information in this space — don’t cram it all in there! Oh, and also, test it!

iOS 6 Mail App Features

Prior to iOS 6, the Mail app was missing one major feature — the ability to add photos and videos directly from within an email. In the past, you had to start your email from the Photos app or paste an image in it, but now you can finally add photos & videos directly from within an email. This features makes it MUCH easier to send media via email.

Another new addition is the VIP option for emails. With this feature,  you can click on any sender’s name & add them to a VIP inbox.

VIP Inbox

Emails from senders marked as VIPs will automatically be pushed to the VIP inbox; this will save users from having to sort through emails to find their most important emails (example: emails from their boss). Users also have the ability to set up notification settings so a notification message (like a text message alert) will pop up whenever they receive a message from a member in their VIP inbox. Will marketers begin asking subscribers to add them to a VIP list? Time will have to tell!

Additional Resources