Mobile Email Compatibility Guide: What Works Where?0
My original mobile email compatibility post offered up a one-stop shop for knowing what was supported where in each of the major mobile operating systems. Two years later, mobile email is still as confusing and popular as ever, meaning an update is in order! While nearly every major mobile operating system has great support for HTML and CSS (and many even utilize WebKit to render), there are plenty of quirks and idiosyncrasies to worry about.
Mobile Email Compatibility Overview
The chart below covers some popular email apps for mobile, and mobile email compatibility basics like support for media queries/responsive design, image blocking, preview text, alt text, and more. Inconsistencies are still bound to pop up, so be sure to test your email before you send.
|App||Media queries||Image blocking||ALT text||Styled ALT||Preview text||Scaling|
|Windows Mobile 7.5||✢||✔||✘||✘||✔||✔|
|NOTES||✢ Windows Phone 7.5 does not support media queries for Gmail accounts|
|✢ Mailbox only supports some techniques used for responsive emails|
|◑ ALT text too large for the image container will not display|
|* Images are enabled by default in iOS, but were manually turned off for the purposes of testing. Mailbox and Yahoo! apps do not have an option to disable images.|
Media Query Support: Media queries are the magic behind responsive email designs. If an email app supports media queries, that means responsive designs are also supported—at least to some extent—in that app.
Keep in mind that media queries do not detect specific mobile devices; rather they help establish different rules for your email layout to follow by detecting the screen (or viewport) size that the email is viewed on. And since viewport sizes vary from device to device, the way your breakpoints are set up will also play a factor into the responsiveness of your design. Campaign Monitor has some great tips for fine-tuning breakpoints for various screen sizes.
Image Blocking: Many desktop clients, and most mobile email apps, automatically disable the images in HTML emails. Instead of showing you the images in the email right away, the applications that disable images will leave an empty box where the image should be, either displaying ALT text, or a message to download images. To work around image blocking, use as much HTML-based text as possible (which may also help your spam scores!), and be sure to use ALT text for the images in your email (see more info below).
ALT Text: As mentioned above, ALT text (short for alternative text) is a great way to optimize emails in images-off environments. ALT text does just what it says by providing an alternative to an image when it cannot be viewed. Using ALT text to communicate your message and any blocked images can help increase open and click rates.
Styled ALT Text: It’s possible to take ALT tags a step further by specifying the font, color, size, style and weight of the text. While styled ALT text won’t work in all mobile email apps, it adds a really nice touch when it is supported. Our comprehensive guide to styled ALT text explains how to do this in your emails.
Preview Text: Preview text gives readers a glimpse of the content in your email before they even open it. This text shows in the inbox—usually 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 encourage readers to open.
Automatic Scaling: While the Mail app on iPhone automatically zooms into your email to fit the message to the width of your screen, most other devices will only display the upper left-hand corner of your email. In what equates to a mobile preview pane, lack of autoscaling cuts off the right side of emails and forces users to scroll left-and-right in addition to up-and-down to view your entire message.
APPS VS. DEVICES: WHAT CONTROLS SUPPORT?
It’s important to note that support for mobile email is tied to the application used to view the email, not the device or the operating system. For example, Android has two commonly used email applications that each have very different support for HTML email. An Android user could be using any one of the dozens of popular Android devices (perhaps a Samsung Galaxy, or an HTC One). They may use the Gmail app on their phone to read email, or they might use the native mail client, simply called “Email” (Litmus uses the latter in our screenshots).
iOS (the operating system that runs on iPhone and iPad) also offers different apps, although they’re arguably less popular than the native client (again, simply called, “Mail”). There are provider-specific apps (such as a Yahoo! or Gmail) and third party apps that work with a variety of inboxes. Anna Yeaman at Style Campaign has a comprehensive review of several iOS email apps on her blog.
FONTS ON MOBILE DEVICES
It’s been my experience that every mobile OS will modify email fonts to some degree, although it’s a bit of a mixed bag. iOS has a 13px minimum font size and will auto-adjust anything under that size, often breaking navigation bars and other tiny text. While you can “fix” this issue with a bit of CSS, use caution, as the OS is upping your font size for a good reason: anything under 13px isn’t very readable on a tiny iPhone screen.
In other email apps, I’ve observed text being condensed, breaking at random intervals and changing from specified fonts to default system fonts. 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. Also, avoid <br> tags used solely for layout and design purposes to prevent odd breaks in different apps.
DO YOU HAVE A MOBILE AUDIENCE?
Make an informed decision about where to focus your mobile design efforts with Email Analytics, and use Email Previews to make sure your emails are rendering properly in those clients. Sign up for a free 7-day Litmus trial today!
Discover your mobile audience →