It’s been two months since the newest versions of the iPhone 6 and 6 Plus came out, and I’m still hearing about email display issues that are creating ongoing problems for email marketers. My clients have shown me a variety of snags they’re facing, and I have to admit that after my 5S took a dip in the Atlantic and I upgraded to the 6, I’ve noticed other retailers with sub-par email displays, too. If you’re having problems, take a deep breath. You’re not alone. Here’s what you need to know about designing and coding for this new, larger display.
Adjust Your Media Queries
The fix for the most common issue is pretty quick and easy. If your email appeared full-width on earlier iPhones but now displays too narrow compared to the iPhone 6’s screen size, you may need to take a look at your media queries. Most responsive design is based on media queries that trigger a change to the mobile view at a specific size. Designers call this “the breakpoint.” Until now, the standard breakpoint was 320 pixels, at two times pixel density. In other words, you’d see a media query in the email’s CSS that looked like this:
@media only screen and (max-width: 640px)
Since the iPhone 6 and 6 Plus are wider than their predecessors, you need to update that breakpoint, but the two models actually have different breakpoints. The easiest fix is to set a query like this:
@media only screen and (max-width: 415px)
Still with me? The next step is to set your styles for your containers to a max-width of 100%, and update your CSS anywhere that you specify 320 pixels for the container.
Plan for the New Inbox View
Because the display is bigger, more emails will now fit into the inbox list view – six instead of the previous five. That increased real estate means more characters will be visible in the subject line and the oh-so-important preheader. So be sure to maximize the impact of your preheader! The iPhone 6 Plus also offers a new view in landscape mode that’s pretty nifty and is much like the mail display on an iPad. In landscape, the 6 Plus shows the inbox list view on the left and a preview pane on the right. This view scales a bit compared to the actual email, so, as always, be sure to make the most of the valuable real estate above the fold. And although the larger display and new view give you more “above the fold” space to work with, don’t forget you’re also designing for smaller screens without as much space. In other words, continue to maintain the most important content as high up in the message as possible. With devices changing so frequently, our mobile responsiveness needs to be more adaptive than ever. While these changes for the iPhone 6 and 6 Plus are fairly easy to accommodate, it’s still something else to consider when preparing your messages. Have you updated your email template yet? Are your emails displaying the way they should on the iPhone 6 and 6 Plus? Are you facing any other issues? Let us know by commenting below.