What the iPhone 5 Means to Email Design (and Designers)

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:

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.


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.

The post
What the iPhone 5 Means to Email Design (and Designers)

appeared first on Campaign Monitor.

Source: FS – Email Marketing Blogs!
What the iPhone 5 Means to Email Design (and Designers)