The iPhone 5 revolutionized mobile email design forever in 2012, and this essay was created to prepare email marketers for the inevitable changes.

The mobile email design scene has altered much more in the eight years afterwards, notably with the recent debut of the iPhone X.

The iPhone’s Impact on Mobile Email Design (and Designers)

While many of the same mobile design ideas have been carried over into the most recent technology, there are a few new peculiarities to be aware of. The most visible of these peculiarities is the iPhone X’s size, which necessitate changing the layout of mobile emails.

Here’s how the iPhone 5 altered email mobile design in 2012, and how things have evolved since then.

The iPhone 5’s Impact on Email Design

Following the launch of the Apple iPhone 5 yesterday, many of you are surely wondering how the bigger display of this new smartphone will effect both email designs and designers.

While these changes are unlikely to have a significant effect on those who have implemented responsive strategies into both their templates (and, of course, web sites), others may wake up to discover their media queries tumbling over in certain cases.

Will the iPhone 5 revolutionize everything?

If you set max-device-width: 480px in your mobile CSS and view your design on the iPhone 5 in landscape mode, the email will return to how it appears in desktop and webmail email applications (i.e. the media query will not be applied).

In most circumstances, this will be a good thing. The iPhone 5’s 568px-wide display isn’t far off from the 600-650px widths that most people use for email layouts, so some scaling will be required.

However, for individuals who are concerned about the mobile version displaying in any orientation, there are three options:

• Change your @media just screen and (max-device-width: 568px)…
• Choose an email layout that is flowing and completely responsive.
• Use both of the above.

No (please!) to user-scalable

Don’t use the viewport meta tag with user-scalable = no to control zoom in mobile email clients. Preventing users from freely zooming in and out is a usability problem in and of itself.

After all, mobile display sizes other than 480 x 320px existed long before the iPhone 5, but with the iPhone 5’s increased display dimensions and impending popularity, having zoom disabled is certain to become more of an issue.

How has email mobile design evolved since the release of the iPhone 5?

Mobile email design hasn’t only evolved in the years since the iPhone 5’s introduction; it’s more crucial than ever with the iPhone X.

Indeed, 53% of emails are opened on mobile devices, with iPhones accounting for more than half of this figure.

Here’s all you need to know about designing email for mobile devices in the age of the iPhone X.

How can I make my iPhone X email mobile friendly?

Many of the same concepts apply to iPhone X-optimized email design, such as knowing the intricacies of pixels (which now have a ratio of 3) and responsive email design.

However, certain significant improvements must be made in order to provide the most user-friendly experience.

The aspect ratio of the iPhone X screen, which is 5.65 inches, is one of the most noticeable differences. It’s much taller than prior versions, particularly the iPhone 5, which stood at 4.87 inches. This is something you should consider while developing your emails.

When someone opens an email on the iPhone X, for example, the initial glance of the email contains more material. In other words, you gain a lot more real estate above the fold.

This implies you won’t have to cram as much information into such a little area. You have more space to design a responsive and informative mobile email.

What is the typical email width on an iPhone X?

The width of the iPhone X is 2.79 inches, compared to 2.3 inches for the iPhone 5.

While this may not seem to be a significant adjustment—certainly not as dramatic as the height difference—the little change in width does need a change in email format.

When it comes to width, one of the most essential factors is your line length for text. It is generally recommended that you maintain your lines between 45 and 75 characters long. This keeps your email from disappearing or leaving any blank space on the screen.

A responsive email design like this might be the difference between a high bounce rate and a high click-through rate.