The Current State of Mobile Email Compatibility
Designing and coding for email is hard enough just when you’re dealing with all the quirks that desktop and webmail clients toss your way. Introducing mobile into the mix can add a lot of time and frustration. Our email previews can help lighten the load by showing you screenshots of how your emails are displaying on all the major mobile operating systems, but it’s also helpful to know where images will be blocked and where preview text is supported.
We’ve put together this handy chart that covers mobile email compatibility basics like image blocking, preview text, alt text, and more. Use this guide as you’re planning out your next campaign, or trying to explain to your client (or boss!) why you’ve decided to replace your 8px type with some larger fonts!
HTML: This column is an indication of native HTML support on the device. The great news is that most modern mobile operating systems support HTML and CSS, some even better than desktop clients! The days of worrying if your subscribers will receive a garbled text-and-code mash on their Blackberry are mostly over. As long as your recipients aren’t reading on a Blackberry that’s more than a couple years old, they’re most likely receiving either the text part of your message, or the HTML version if they’ve enabled the option on Blackberry 4.5/5. With webkit support finally coming to Blackberry 6, the future is even brighter!
Images: While HTML support in mobile is mostly good news, the bad news is that image blocking is back in a big way. The only mobile OS that doesn’t block images by default is the iPhone/iPad. All’s not lost, though. Of those devices that block images, most offer a big touch-friendly button to turn them on.
Alt Text: If you’ve been designing email for the desktop for a while, you’re probably a master at the fine art of alt text. Unfortunately, only Android will display alt-text behind a blocked image.
Preview Text: Preview text has gained a ton of traction in recent months due to it’s prevalence in Outlook, Gmail and the iPhone. It shows up right after the subject line, and pulls in the first few lines of live text from your email to give readers a “snippet” of what’s in the email. It’s a great way to pack more punch in your email, and it will show up in iOS devices as well as Windows Mobile 7.
Scale: While the iPhone zooms into your email and fits the email to the width of your screen, most other devices will display the upper left-hand corner of your email, leaving users to scroll left-and-right in addition to up-and-down to view your entire message. You could think of this space as the preview pane, reborn for the mobile age.
Modify Fonts: Reading email on a tiny screen is hard. Every mobile OS will modify your fonts to some degree, although it’s a bit of a mixed bag. iPhone and iPad have a 13px minimum font size and will auto-adjust anything under that size, often breaking navigation bars and other tiny text. The folks over at Campaign Monitor wrote up a post on how to fix this using a bit of CSS. In other devices, I observed text being condensed, breaking at random intervals and other unfriendly behaviors, but nothing that seemed consistent or predictable. The best course of action is to plan for unruly text behavior in your design, and learn to accept that your fonts may not be the size or shape you intended.
Mobile compatibility in the wild
Here’s a quick roundup of examples of image blocking, preview text and text modifications on actual devices:
Do you have a mobile audience?
Optimizing email for mobile isn’t for the faint of heart. Make an informed decision about where to focus your mobile design efforts with Email Analytics. Just embed one of our tracking codes into your email and start collecting real-time data on where recipients are opening your emails.