What you need to know about Apple Mail in iOS 10
Apple just released iOS 10, and with it, a new version of Apple Mail. I have been playing with iOS 10 since the very first beta back in June. And here are some of the things I think are noteworthy about this new update for email developers and email designers.
<video> is back!
Since iOS 7, videos didn’t work in Apple Mail. You could add a <video> tag. The video would correctly load and display its first frame with a big play button. But nothing happened if you touched that button. After three years, Apple finally fixed that bug. The <video> tag now work almost as you expect. The following code embeds a video in MP4 format.
<video muted playsinline>
<source src="https://i.imgur.com/FvJ5aP5.mp4" type="video/mp4" />
</video>But videos in Apple Mail can only play fullscreen. With Safari 10 on iOS 10, Apple introduced a new “playsinline” attribute to allow videos to play inline on an iPhone when they’re silent or muted. Unfortunately, this doesn’t seem to work on Apple Mail.
Since videos didn’t work in previous versions of iOS, we also need to make sure that our video player only appears on iOS 10 (and future versions). Using @supports declarations in CSS, we can target rendering engines that only support some CSS properties. The property “-webkit-overflow-scrolling” is a proprietary property only supported on iOS, so we can use that to target iOS. To target iOS 10, we can use one of the properties introduced in the OS’s WebKit version. For example, we can now use #RGBA color notations to have semi transparent colors.
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.video-player { display:block !important; }
.video-fallback { display:none !important; }
}Here’s a complete demo for this.
Auto-scale has changed (again)
With iOS 9, Apple introduced a new zooming mechanism that was sometimes a bit annoying, especially on iPad. They did it again with iOS 10. It was reported very early on the first beta that non responsive emails were no longer auto-scaling. I’ve been testing this very thoroughly and reporting my observations on the Email Bugs Github repository. While the initial behavior seen on the first betas was fixed, the final version of iOS 10 still has bugs that might impact (even responsive) emails. These bugs might make your emails appear zoomed out or off-centered with wider margins.
One common fix that I found to work in three different emails (from Bonobos, Zara, or ONL) is to add a `padding:0;` to your <body> tag:
<body style="padding:0">However, for some emails (like this one from Boulanger or this one from Uncommon Goods), it seems the bug is due to coding mistakes (like a fixed desktop width that is never changed for mobile, or a miscalculated colspan). So make sure to triple check your code if you encounter an auto-scaling bug in iOS 10.
Edit: James Magahern from Apple shared on the comments and on Github a brand new meta tag aiming to fix all these kind of scaling problems.
<meta name="x-apple-disable-message-reformatting" />This is an amazing news and a great way to prevent these kind of problems for email developers.
You can block images by default
For the first time in ten years, the Mail app has its own settings in the Settings app. You can set your own preferences for the app, including an option to “Load Remote Images”. It is enabled by default. But if you chose to toggle it off, all images will be blocked by default in the Mail app. In fact, not just images, but any external ressource will be blocked (this includes fonts and videos as well). A new banner will then appear on top of every email asking to “Load All Images”.
Other things
Here are a few other notes I made during the beta testing.
- Animations keep playing on scroll. I absolutely love this change. Any animated element (may it be with CSS transitions, CSS animations, animated GIFs or inline videos in Safari) keep playing when you scroll. This makes everything feel much smoother and snappier.
- Fixed positioning (with “position:fixed” or “position:sticky”) no longer works in Apple in iOS 10. It’s really a shame because it means interactive emails like this one from Email on Acid no longer work.
- <iframe> tags are no longer supported. Not that they were ever widely used in emails anyway. But I find it interesting that Apple suddenly decided to remove support for iframes in Apple Mail.
- You can delete the Mail app. But you can’t set another email app by default. (A popup asks you redownload the default Mail app if you hit a mailto link.)
- There is now an unsubscribe link at the top of newsletters.
Here are other articles worth reading on this new version of Apple Mail:
- What to Expect When You’re Expecting the iOS 10 Mail App, by Email on Acid
- How iOS 10 may impact email marketers, by Campaign Monitor
Have you noticed anything else? Let #emailgeeks know in the comments.
