Design: Keep calm & carry on coding – designing for iOS 11

Posted on November 17, 2017 at 10:00 am Written by

The latest incarnation of Apple’s mobile device operating system, iOS 11, became generally available on 19th September 2017, coinciding with the launch of the new iPhone 8 and iPhone X smartphones.

iOS 11 is here!

Predictably, the OS swiftly progressed through several update versions (the latest which, as of writing, is iOS 11.1.1 released on 12th November) – as ever, there’s no Beta tester like the general public! At one point, you couldn’t even type in the letter ‘i’ without it being changed to a ‘[?]’. How did that get missed?!

Major overhauls to any operating system also rightly give rise to concerns about changes in the way HTML emails may work or are rendered. Bugs that we’re used to working around may be resolved, but equally may still be present and now need a different method of fixing. New and freakish issues may arise. Forums will likely fill with the laments of deadline-ridden designers casting about for answers…

Is there anything Email Designers need to worry about?

There was one major issue initially with the release. Turns out the native iOS Mail app had a bug whereby any email accounts hosted on Outlook.com, Office 365, or on certain Microsoft Exchange Server configurations, were being prevented from sending email using this app. Fortunately, this was resolved by Update iOS 11.0.1 – phew!

iOS 11 Outlook bug fixed!

Litmus as ever have done a fine job of providing Email Previews for iPhone 8, iPhone 8 Plus and iPhone X for email testing within their online application. There was also a comprehensive article written around the time of release, detailing the main differences between iOS 11 and older iOS versions.

Good news, everyone!

There doesn’t appear to have been any major changes to the way iOS Mail works in this update, so all current HTML and CSS coding methods still work fine! To be fair, Apple were never the worst offenders when it came to support for advanced HTML email coding techniques. Along with continued support for HTML5 video, there are no awkward changes to screen sizes, resolutions or Pixel Density Ratios, and the iPhone X’s new edge-to-edge touchscreen even extends the useful height of the display with no change to its width.

Just one wrinkle…

…which actually made its first appearance in iOS 10: Mail tries to be helpful by automatically scaling emails. However, the result doesn’t always making best use of all that lovely screen space…

iOS 11 with incorrect zoom

Fortunately, you can disable this unhelpful zoomed-out effect by the simple addition of this <meta> tag in the <head> of your email’s HTML code:

<meta name="x-apple-disable-message-reformatting" />

And… presto!

iOS 11 with correct zoom

Thanks to RĂ©mi Parmentier for generously sharing this technique on the Litmus forum.

Anything NewZapp users need to worry about?

As part of the NewZapp Design Team, we always makes sure we code each new bespoke email template in the most up-to-date way at point of delivery, so your emails will display as consistently as possible in whatever email reader or device your subscribers open it. All you have to do is create your email campaigns as normal.

However, things can and do change in the big wide world of email readers, so if you ever notice your email doing something unexpected – or downright weird – we’re just a phone call or email message away – whatever the problem, just drop us a line.

Want to know just how many people are actually opening your emails in iOS Mail? Just look in your NewZapp account under Track: Clients – all the stats you need are right there.

Notice anything else?

Any niggling little email rendering issues got your proverbial goat? Or have you come up with a genius solution to a problem that has everyone stumped? Let us know so we can all Make Email Marketing Great… like it’s always been!

Follow Mike Nicol on Twitter

Mike Nicol

Digital Designer & UX Craftsman at NewZapp

@zanethehamster

Get the latest Email Marketing updates & insights