Mobile Email Design: Which Clients Support Media Queries and Images By Default

Last post, we experienced the hard knock of the following statistics:

“45% of consumers have unsubscribed from a brand’s promotional emails because the brand’s emails or website didn’t display or work well on their smartphone.” -Litmus, 2016

“34% of consumers have marked a brand’s promotional emails as spam because they didn’t display or work well on their smartphone.” -Litmus, 2016

Like it or not, fair or not: sending mobile-unfriendly emails is now an unpardonable offense.

But as we saw last post, even if you’re trying to create mobile-friendly emails, some mobile email clients can make your job very hard.

They ignore your painstakingly crafted media queries, telling them exactly how an email client like them should display your email.

Result: Awful-looking email. Spam button.

Which mobile clients do such dastardly deeds? Here’s an updated list (as of November 2016). Note that this is a very fluid area. Gmail only started supporting media queries in the past two months. Unfortunately matters can also change the other way: Yahoo! dropped media query support for its Android app two weeks ago. 

Which mobile clients support media queries:

Grrr…

C’mon! Microsoft - really! You can handle media queries in the Outlook app for Android and iPhone… you can’t handle it for the Windows Phone app? And Yahoo! - please! Up until two weeks ago you supported media queries in your Android app. Why did you drop it all of a sudden?

*sigh*

But such is the case, and you’re left with a dilemma. How do you make your emails look stunning on mobile email apps that ignore your painstakingly crafted instructions? Let’s take a look at a solution that’s been gaining traction over the past year: (Now, this is complex stuff to do. If you’re not a developer, then don’t try this at home. But if you’re in any way involved in email marketing, it’s certainly worth understanding the basic idea.)

Hybrid design, or “Mobile-first, then modify for desktop”

Hybrid design is responsive design +.

Most responsive designs start with a design that looks good on desktop. Then you use the media queries to tell your email client how to alter it for mobile. (At which point you run into the contrary clients, listed above.)

Marketing automation company Campaign Monitor did the opposite to make its templates work beautifully for all clients. They started with a design that looked good on smartphones. Then they used media queries to tell desktop clients how to alter it for desktop.

Of course, there are some desktop clients who are also media queryphobic. So they used other methods of communicating instructions to those email clients in code they DO understand. If you want to hear the play-by-play, Campaign Monitor engineering guru Stig Morten Myre explains exactly how they did it.

Litmus also has a great step-by-step of how hybrid design can work. If you look at both articles, you’ll notice that the methods have a lot in common (i.e. starting with the basis of a design that looks good on mobile, and then modifying it for desktop), but there are a good number of differences. As we said, this is complex stuff.