What Email Designers Need to Know About iOS 9

[ 0 By

In September 2015, Apple released the latest version of their mobile operating system, iOS 9. While many anticipate the yearly arrival of a new operating system (and some shiny new phones), those in the email industry often dread the inevitable quirks that go along with these releases. We did the heavy lifting for you: here’s what you need to know about iOS 9 email design.

Just like in years past, iOS 9 has been a mixed bag for email. Although Mail has added support for a few new CSS properties—and a brand new way to interact with emails—it has also introduced a few changes that are bound to frustrate email designers. So, what can the email world expect from iOS 9? Let’s dive in.

The Bad News

Let’s start with the bad news first. iOS 9 has a number of bugs that have been causing email designers headaches. On top of the still missing support for the <video> tag, iOS 9 adds a new feature that breaks some layouts, removes support for a common interactive email trick, and displays some rather odd behavior on full-width designs.

Zooming and Broken Layouts

A couple of months ago, Community member Remí Parmentier dug into the iOS 9 beta before its public release. One of the new features documented was zooming, which automatically fit an email to the device’s screen width. While this feature is great in theory, it can have some undesirable effects depending on how your email is built. Here’s Remí’s take:

Basically, if you try to position any content blocks next to each other horizontally, and the sum of their width is bigger than the width of your device’s screen, Apple Mail will now wrap your content blocks below each other.

Remí did mention a fix for it: using the min-width CSS property instead of width. And, while it likely won’t affect email campaigns using more modern, responsive techniques, fixed-width email designs can run into problems with the new zooming feature. Head over to the Community to read more about the problem and let us know if you figure out any other solutions.

Update

Along with the zooming feature, Remí pointed out that the wrapping images could be a result of a bug with inline-block level elements. When inline-block level elements are next to each other in the code, but have a space between the end of one element and the start of another, the wrapping issue occurs. Removing that space appears to fix the issue. Check out his comment over in Community to learn more.

Interactive Emails

One of the more frustrating problems for email designers is a bug with the CSS general sibling selector, which is commonly used to build interactive email campaigns. Both Remí and Justin Khoo of FreshInbox have reported that the general sibling selector ~ is not supported on iOS 9 when used with the :hover or :checked pseudo class selectors.

A lot of interactive emails use those pseudo classes to check whether or not something has happened in an email and style things appropriately depending on the state. With this bug, though, some email designers will be left scratching their heads when a formerly interactive email is left completely static. After doing some digging, Justin did mention a fix. Designers can instead rely on the adjacent sibling selector +. Although not as flexible as the more less-specific general sibling selector, it will allow designers to achieve the same results.

The Magical Padding

Arguably the most noticeable change to iOS 9 Mail is the addition of some rather magical padding on emails with full-width backgrounds. Nicole Merlin first broke the news over on Twitter:

She later elaborated on the problem over in the Litmus Community. It appears that Mail is now adding padding to both the left and right side of email campaigns. While this isn’t apparent on some emails depending on the design, for emails using full-width background colors, you will now see white spaces on either side of the campaign.

The oddest part is that there are some reports of the padding disappearing when the iPad is rotated between portrait and landscape modes and back again.

iPad padding issue before and after rotating.
iPad padding issue before and after rotating. Source

While there hasn’t been a definitive fix for this quirk yet, a few ideas were floated over on the Community thread. Have a solution or have you seen any other problems? Let us know over in the Litmus Community.

TEST ON iOS 9 ON IPHONE 6S & iPHONE 6S PLUS

Test your campaigns in iOS 9 on iPhone 6s and iPhone 6s Plus with Litmus.

Start Testing

 

The Good News

It’s not all bad, though. iOS 9 did add support for a few things that could make email that much better.

Responsive Images

The biggest news is that iOS 9 now has better support for responsive images in email using the HTML srcset attribute. This allows designers to reference multiple images for an email campaign and automatically display the appropriate image for a specific device size. While srcset has had support since iOS 8, it was limited to specifying different images based on the pixel density of a device. Now, designers can specify the width of a screen size to trigger the different images, making srcset much more flexible.

The best part is that you can still declare the usual HTML src for an image, and progressively enhance the experience with responsive images for any clients that support srcset.

<img src=”http://path.to/image.jpg” srcset=”http://path.to/image-small.jpg 320w, http://path.to/image-medium.jpg 720w” alt=”responsive FTW” />

Using code similar to the above, you can now serve multiple images to fit different scenarios. This is a huge win for email designers and should open up some interesting possibilities for controlling content across a wide range of screen sizes.

Advanced CSS Support

iOS 9 also includes support for some more advanced CSS, allowing designers to serve up some new tricks to subscribers on the latest Apple devices. In his comprehensive post, Remí noted that iOS 9 now supports both the @supports CSS declaration and the awesome backdrop-filter property.

Similar to media queries, @supports allows you to test certain conditions of an email client. In this case you can test whether or not that client supports a specific CSS property and, if it does, make use of it in an email. This is a nice update for those looking to progressively enhance campaigns all while keeping their code clean and manageable.

And for those that want to pull off some really cool designs, iOS 9 now supports the backdrop-filter CSS property, which allows you to apply certain effects to whatever is behind the element you are targeting. A practical application of this would be to blur the background image behind a block of text, increasing the readability of the text in the process. You can also do things like make the background grayscale or even change its hue using backdrop-filter.

Even with the bugs mentioned earlier, it’s clear that Apple is still committed to adding cutting-edge support for CSS in its mobile operating system, allowing designers to pull off better designs than ever before.

Peeks, Opens, and Good Content

Along with all of the changes to the Mail rendering engine, Apple introduced an entirely new way to interact with your device and, in turn, your emails. The newly launched iPhone 6s and 6s Plus feature 3D Touch, which adds pressure sensitivity to the latest iPhones. 3D Touch brings along with it two new interactions: peek and pop.

When scrolling through your inbox, you can now use a light press to “peek” at an email, which opens the email itself in a modal window. Using that same touch, you can then press harder to “pop” into the email itself and see the entire email, just like opening it normally.

Apple's Peek and Pop from their website.
Apple’s Peek and Pop. Source

Some email marketers are concerned with this new interaction and whether or not it will affect open rates. The good news is that, since the peek still loads images in an email, peeks will count as opened emails. The bad news is that, even though opens are registered, engagement could easily drop for campaigns if subscribers are just peeking at—and not reading—your campaigns.

While we wouldn’t go so far as to bring the idea of “the fold” back to life, it does reinforce the need for great content in any email campaign. Along with your from name, subject line, and preheader text, you need to make sure the content in your email is valuable for your subscribers—and hopefully packaged up in a nice, mobile-friendly design that helps get users from peek to pop.

STAY UP-TO-DATE WITH iOS 9 QUIRKS

There’s always a lot to take in when Apple updates its wildly popular mobile operating system. You can always keep up-to-date with all of those developments in the Litmus Community, where some of the brightest minds in email design and marketing discuss the latest changes affecting the industry. Or, subscribe to our newsletter and get the latest content for email marketing pros delivered straight to your inbox.