What the iPhone 5 means to email design (and designers)

iPhone 5In 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, its 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 bluntly 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 5's 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.

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. Packed with all sorts of useful tidbits, it will get you confidently coding mobile-friendly emails, subscribe forms and more in 8 simple chapters.

We'll be keenly testing email campaigns in iOS 6 Mail on the iPhone 5 in the coming weeks and will be sure to update our resources, based on the results. As always, keep an eye on this blog, where we'll be posting what's new in mobile email design.

Posted by Ros Hodgekiss

8 Comments

  • Rick Stratton
    15th September

    The biggest problem with the iPhone is that it’s hard to predict where people will read their email. iPhone or their computer? Both, really.

    Added confusion is that while most people use the Mail program on the iPhone, some use the browser (for gmail, etc).

    So I make my Campaign Monitor emails look good on the iPhone first, and everything else second. 

    In the olden days of email design, we could target AOL and Hotmail and Mac.com and Outlook all separately. 

    At least we don’t need separate versions anymore.

  • Ros Hodgekiss
    15th September

    That’s great advice, Rick - thank you for sharing your method here! I suggested a mobile-first approach in an earlier post, given that the constraints of a small screen also encourage more critical thinking about the content and design of an email message. Glad to know that folks like you are giving mobile design a lot of thought :)

  • Jonathan Kapaldo
    18th September

    Thanks for the post! I think designing just for the iPhone is a bit short-sided. We live in the iOS and Android age. Emails should look good on any mobile phone, whether iOS or Android. This is why, when generally styling for a mobile phone, I use the media query that uses max-width of 569px. Shi Chuan outlined this reasoning last year, http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/ Hope .people find this helpful.

  • Erik Woods
    12th October

    I respectfully disagree with your comment about not disabling zoom. For starters, that meta tag does not even seem to work in email (unless I’m missing something, in which case I would love to see an article here about how to make it work, because all of my testing has returned poor results). Second of all, if you build a responsive email with large font sizes, the user won’t have to zoom in. I WANT someone to correct me on this. Respectfully. Let’s learn from each other.

  • Mike Irving
    25th October

    The new media query (using 568px) is pretty self explanatory…

    As emails old are usually discarded, there won’t be too many issues with people opening old emails and seeing them displayed incorrectly.

    Ongoing, we’ll be using the new 568 matching.

    I can see this being an issue for Adaptive Mobile Websites… there will be lots of sites online, unchanged since launch. iPhone 5 users may not see what they expect when they load these sites.

  • George
    11th January

    I think I’m also going to change the @media declaration to 568px. That way I still get all the control on how the template will look.

  • David Hernandez
    17th March

    While I think it’s important to know where the responsive breakpoints happen on the major devices, I’m finding it makes more sense to base my media queries on my design’s natural breakpoints instead of device-specific widths. While I test for various scenarios, I’m not going to test all of them and I’m definitely not going to specify differences for each. So far, it’s working really well to create a device-agnostic design (that’s also more future-proof, to @Mike Irving’s point) that works appropriately across the whole range.

  • chsweb
    13th May

    The @media query stated in the article…
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { … }

    …unfortunately targets the iPhone 4 and 5 when designing for landscape orientation, as follows:

    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape) {…}

    To solve this, I use the following query instead:
    @media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) {…}

    Now, I can target the iPhone 5 without impacting the iPhone 4.  Change orientation to suit your needs.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account