If you were one of a handful of people who tuned in for Apple’s announcement today, a couple of things may have caught your attention. Sure, there were some big reveals, but if you’re an email geek like myself, you were likely hoping to get one big question answered – how can we optimize our email newsletters for this new batch of devices?

Apple's iOS email client and Watch

With Apple’s current iOS devices accounting for almost 90% of mobile opens recorded and about 41% of opens overall, it goes without saying that the new iPhone 6, iPhone 6 Plus and Watch will have a big impact on how our subscribers interact with email – and how we will design for these different interactions.

For starters, Apple’s first foray into wearable devices can hardly be described as a toe in the water. Alongside a whole bunch of really interesting and interpersonal actions such as sending heartbeats and sketches, they’ve launched the idea of “handoff” from the Watch to the iPhone (or another device) into the realm of email – which could result in even shorter attention spans and scenarios in which an email is judged based on a few lines of text-only content.

Based on the information that Apple has provided so far, here are a few observations on what we can likely expect in the months ahead.

The iPhone 6 and 6 Plus: More of the good stuff

Earlier in the day, I suggested that email designers would soon be busily tweaking the media queries within their responsive email templates. And yes, if your HTML email relies on breakpoints like the traditional max-device-width: 480px, then the larger 4.7″ and 5.5″ Retina HD displays may mean that we’ll be making a few tweaks to handle these devices’ higher screen resolutions.

If John Gruber’s math is as on the mark as many of his predictions regarding screen sizes, then we’re likely looking at a device pixel ratio of 2 for the iPhone 6 (@2x Retina display) and 3 for the iPhone 6 Plus (@3x Retina display). This means that media queries targeting these devices (and smaller screens) may likely look like this:

iPhone 6

@media only screen and (max-device-width: 667px) { /* 1334 x 750px @2x Retina display */ }

iPhone 6 Plus

@media only screen and (max-device-width: 640px) { /* 1920 x 1080px @3x Retina display */ }

If this has gone over your head a bit, I really recommend Peter-Paul Koch’s old, but good explanation of device pixel ratios.

That said, if you look at the device resolutions and media queries above, it’s likely preferable to display the desktop version of an email newsletter on these devices, over a skinnier, mobile-optimized view. However, should you really want to target these devices specifically, you could add the CSS media features min-device-width, -webkit-min-device-pixel-ratio and min-resolution to your expression, to aid you in your quest.

So, to wrap up a long story, we’re likely going to end up keeping our media queries as-is and treating these larger displays like we already do with iOS Mail on the iPad – and that’s as if it was a desktop email client. Or, we’ll adjust our media queries to specifically target these high-resolution displays. Given that iOS Mail is still the benchmark as far as good CSS support in email goes, email designers will likely have very little to worry about from these two new devices.

Naturally, we can’t wait to get our hands on the new iPhones and will be sure to add new observations to this blog as we progress. Be sure to subscribe below for updates.

Watch: Handoff is almost here

While information on Apple’s new Watch email client is thin on the ground leading up to its 2015 release, what we have seen so far has been revealing. For one, our earlier predictions of it being a rather spartan, text-only client seem to be true, making the use of effective subject lines and opening text in email campaigns more relevant than ever.

Tim Cook announcing the Watch and email client

Apple’s Tim Cook announcing the Watch and email client

Apple has also confirmed that the idea of “handoff“, or email triage will be a behavior that we’ll more commonly see – that is, reading a summary of an email on the Watch, then using an iPhone or another device to respond. It’s too early to guess how this will affect email open rates or other engagement metrics, but we’ll be keeping a keen eye on things from here. In the interim, you may want to read our advice on optimizing email campaigns for wearable devices.

So, there’s no doubt that there will be lots of surprises in the lead up to all 3 devices going mainstream – and many things we won’t discover until we’re all responding to email, exchanging sketches and in the rhythm of doing a whole bunch of recently unheard-of things. So, let’s open it up to a little speculation – how do you think these new devices will change email marketing? Let us know in the comments below.

  • Peter Eko

    Amazing! Thanks so much Ros for bringing putting this up so quickly. You guys are rock stars!!

  • Jeff Tibbetts (Tibbs)

    Front the screenshots on their site, it looks like we have even more evidence to support crazy-short sublines. But hey, at least we get maybe a dozen or so words of the preheader to play with. Thanks for the write-up! Funny that your assessment of the event is more accurate than a lot of tech blogs. It’s almost like you actually watched it (gasp!) and thought about what it means (swoon!). Keep up the good work.

  • Ros Hodgekiss

    Hi Pete and Jeff, it’s great to hear from you following TEDC! Admittedly a lot of this is quite speculative right now, but watching the announcement did get me very excited – in part, because it did provide a pretty good look at what’s to come. I’m really looking forward to actually getting my hands on an iPhone 6 and will keep you posted if more information comes out of that.

    Thank you so much for being so supportive – I really enjoy covering new devices :D

  • Jaina

    Excellent write-up here, Ros – great work!

    Personally, I think the future is fluid emails. Have slowly been converting to fluid emails, and while tricky, they’re in some respects easier than trying to map out emails at certain breakpoints. And work well when new devices get released.

    As for the Apple Watch – well subject lines and pre-header text is going to be all the more important now, it seems. Perhaps even text only emails will be making more of a come back with more wearable tech.

  • Ben Carver

    We really don’t have to worry about the Apple Watch for at least another 5 months. What we should be talking about is how Android Wear handles these alerts.

  • Amy

    So if I normally have all of my media queries set for the iPhone 5 and below (max device width is 480px, and my mobile emails are 320px), what would my new dimensions be to target 6 Plus?

    And do I need the entire block of media queries I wrote to be set for each of these new breakpoints? That would be a TON of extra code…

    Thanks in advance for your insight!

  • Ros Hodgekiss

    HI Amy, in my experience with the iPhone 6s, I haven’t had to change any existing media queries in emails if they using the staple max-width: 480px expression. The emails we’ve been creating in say, Canvas have so far been working a dream, fortunately. That said, I do recommend testing in real life, especially if you’re building your templates from scratch!

    Thanks, Amy – we’d love to know your experiences with designing for the iPhone 6s :)

  • Amy

    My regular media queries don’t look ideal on the 6+ — too much space on the sides. I’d like to make it a bit wider, so looking for the exact measurements I should use to leave about 15 pixels on the sides.

    Any guidance much appreciated!

  • Plug Pulled

    Thanks for the info

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free