What to Expect When You’re Expecting the iOS 10 Mail App
iOS has become one of the biggest players in the world of email, and as a developer I look forward to each new iOS release with apprehension and excitement. The newest version of iOS should be coming out in the next few months, so we wanted to give you a heads up on the challenges and opportunities that this new OS will bring.
We tested a ton of emails in the Mail app for iOS 10 public beta, and here’s what we found.
The Good News
Video is Back!
In my testing, I found that the <video> tag would play in the email client when paired with an mp4 video. The user will see a play button, and after tapping it the video will play in fullscreen. I found that OGG and WebM video didn’t work, so be sure to use mp4 if you want to include video in email.
Check out our article on adding video to emails.
Interactivity (and Sibling Selectors) Work
Techniques like interactive carousels and mobile image swaps still work correctly. I tested a lot of interactive and animated emails created by Justin Khoo as well. Here’s a list of techniques that still work in iOS 10 Mail:
- FreshInbox’s CSS3 Star Wars animation
- FreshInbox’s Image Carousel Tool
- EOA’s Interactive Content Carousel
- FreshInbox’s Snowball Surprise
- EOA’s Image Swapping for mobile
- Freshinbox’s Collapsible menus
- EOA’s Hamburger menu
- FreshInbox’s Tap to Reveal
As with all things email, make sure you test before you send! If you’d like to use an interactive or animated email, make sure you do some testing in iOS 10 before hitting that send button. We found that CSS translate and fixed positioning are not always supported in iOS 10 Mail, more on that below.
Targeting with Media Queries
Of course, media queries still work in the iOS10 Mail app. What kind of modern email client wouldn’t support media queries? Huh, Gmail? You monster.
Supported media queries include the usual min-width and max-width as well as webkit-min-device-pixel-ratio. You can also use min-device-width and max-device-width to target devices only.
Orientation queries don’t really work, as landscape will trigger this query regardless of orientation and portrait will never be triggered.
Queries targeting height returned a viewport height of 1px, which is obviously incorrect. This may just be a bug in the beta, but we won’t know until the final release.
The Bad News
Wrapping Block Elements
As iOS 9 Mail did before it, iOS 10 Mail has a built-in resizing feature that will wrap block elements down to the next line if they are too wide for the viewport, even if they are inside of a fixed-width container.
For example, if you have two 300px images inside of a 600px table, on iOS 10 those images will be stacked instead of side-by-side. In iOS 7 and 8, the email would have been “zoomed out” to make the images fit side by side. While the “zoom out” effect could make the email appear like a tiny desktop version, this was at least predictable behavior. The new stacking effect can cause the layout to change in ways that are unexpected and make the layout look worse.
You can defeat this bug by adding min-width to your fixed-width container. This will prevent iOS Mail from collapsing it and stacking the elements within. If all of your content is built inside of a single container element, you can apply this style to it and the whole email should not collapse in iOS Mail 10. You can also get around this but putting the content that should be side-by-side into two TDs. iOS Mail will not cause TDs that are in the same row to stack.
You can check out this code sample which highlights these differences.
CSS Transitions & Fixed Positioning
Some CSS transitions may not work properly in iOS 10. Instead of showing the element moving, it will instead appear in its final position. This problem happens especially when an element is moved from “off screen” to a final resting position on screen. You can see this problem in action with Justin Khoo’s Entrance Effects email.
Another issue I found was that the iOS 10 mail app doesn’t play well with fixed position elements. For example, adding a “position:fixed” menu to the top of your email worked in iOS 9 Mail (sticking to the top of the screen as the user scrolls down), but in iOS 10 the element will remain where the top and left styled placed it and will not stick to the top of the screen.
Neither of these techniques is seeing widespread use, but it’s good to be aware of when using advanced techniques like the ones Alex covers in his Ultimate CSS Animation Guide.
Just a Heads Up
All of this information has been gathered from testing emails in a public beta, so we can’t know if Apple will make any additional changes before the new iOS goes live. We’ll make sure to update this blog if anything changes when the new iOS is released.