Article first published September 2012, updated April 2019
In 2012, the iPhone 5 changed mobile email design forever, and this post was written to prep email marketers for the changes that would inevitably arise.
Seven years later, the mobile email design landscape has changed even more, especially with the recent release of the iPhone X.
What the iPhone Means to Mobile Email Design (and Designers)
While many of the same mobile design techniques have carried over into the newest technologies, there are several new quirks that you must learn. The most obvious among those quirks is the iPhone X’s dimensions, which require mobile emails to alter their layout.
Here is how the iPhone 5 changed email mobile design back in 2012 and how it’s changed since.
How the iPhone 5 changed email design
In the wake of the Apple iPhone 5 announcement yesterday, at least a few of you are probably wondering how this new device’s larger display is going to affect both email designs and designers alike.
While for many who have incorporated responsive techniques into both their templates (and, undoubtedly, web sites), these changes won’t have a considerable impact, it’s likely that others may wake up to find their media queries falling over in some circumstances.
Pretty much everyone who’s dabbled with mobile design has used @media only screen and (max-device-width: 480px) { … } as the starting point for their stylesheets.
This has been sufficient when targeting earlier iOS devices (and a variety of other vendor handsets, for that matter). However, the iPhone 5’s 1136 x 640 pixel resolution has moved the goalposts somewhat.
When a pixel isn’t a pixel
Like previous Retina and high-resolution displays, the iPhone 5 screen has a device pixel ratio of 2, which means that every 2 physical pixels on the display equals 1 device-independent pixel (or “dip”) to software. If you’re unfamiliar with this concept, QuirksMode explains it really well.
So, while the iPhone 5 has a physical pixel resolution of 1136 x 640, the dip/device-width resolution is 568 x 320. Thus, to target iPhone 5s specifically, the declaration would look like this:
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
/* iPhone 5 CSS styles */
}The good news is that, in the portrait orientation, all iOS devices (with the exception of the iPad) still have a device-width within this range. However, things get interesting in landscape mode, where the 568px width is in excess of the max-device-width: 480px commonly used across web and email CSS stylesheets alike.
Will the iPhone 5 change everything?
If you’ve used max-device-width: 480px as the basis for your mobile stylesheet and view your design on the iPhone 5 in landscape orientation, the email will revert back to how it displays in desktop and webmail email clients (ie. the media query won’t be applied).
In most cases, this won’t be such a bad thing. The iPhone 5’s 568px-wide display is not too far off the 600-650px widths that most folks use for their email layouts, so a little zooming will be in order.
However, for those sensitive about having the mobile version display in any orientation, there are three options:
- Change your media query declaration to @media only screen and (max-device-width: 568px) { … }
- Go for a fluid, fully responsive email layout
- Apply both of the above
Avoid user-scalable = no (please!)
If you’ve used the viewport meta tag with user-scalable = no to tame the zoom in mobile email clients, don’t. Preventing users from freely zooming is a usability issue in itself.
After all, mobile display resolutions outside of 480 x 320px have existed well before the iPhone 5 came along, but having zoom disabled is sure to become more of a problem with the iPhone 5’s new display dimensions and inevitable popularity.
How has email mobile design changed since the iPhone 5?
In the years following the iPhone 5’s release, mobile email design hasn’t just changed; it’s more important than ever with the iPhone X.
In fact, 53% of emails are opened on mobile devices, with iPhones making up more than half of that number.
Here’s what you need to know about designing email for mobile devices in the iPhone X era.
How do I make my email mobile friendly on iPhone X?
Many of the same rules apply with mobile-optimized email design in the iPhone X era, such as understanding the nuances of pixels (which now have a ratio of 3) and responsive email design.
However, there are some important changes to make in order to have the most user-friendly experience.
One of the most immediately obvious changes is the aspect ratio of the iPhone X screen, which is 5.65 inches. It’s much taller than the previous models, especially the iPhone 5, which came in at 4.87 inches. This is something you need to factor in when designing your emails.
For instance, when someone opens an email on the iPhone X, their first sighting of the email includes more content. In other words, you get far more real-estate to work with above the fold.
This means you won’t have to shove as much pertinent information into such a small space anymore. You have more room to create a mobile email that is as responsive as it is informative.
What is the average width of an email on an iPhone X?
Whereas the iPhone 5’s width came in at 2.3 inches, the iPhone X comes in at 2.79 inches.
While this might not seem like a huge change—certainly not as dramatic at the height difference—this slight change of width does require you to alter your email format accordingly.
As for what width is going to factor into, one of the most important elements is your line length for text. Generally, the recommendation is that you keep to between 45 and 75 characters per line. This prevents your email from going off screen or leaving any wasted space.
Responsive email design such as this can truly make the difference between getting a high bounce rate or a high click-through rate.
Source: Campaign Monitor
What are we going to do about it?
If you’re new to mobile email design, or are unsure about any of the above, I highly recommend you check out our guide on Responsive Email Design, which will get you confidently coding mobile-friendly emails, subscribe forms, and more.
We’ll continue to test email campaigns in iOS 12 Mail on the iPhone X and will be sure to update our resources based on the results.
Figuring out mobile email design for the iPhone is a great place to start, but you’ll need more information than that to truly master mobile email marketing. Here’s how to master mobile email in 5 minutes.