Responsive email support

Responsive emails = fluid grids, fluid media and media queries. The idea being where @media isn’t supported, you can fallback on a fluid layout. As fluid layouts pose issues on some desktop email clients, alternatively you can fallback to a fixed-width mobile template. I tested media queries in our device lab, I’ll update the chart as I add new clients.


media query support
iPhone native Mail client Yes
iPhone Mailbox app Yes
iPhone Gmail app No
iPhone Sparrow app Yes
iPhone Outlook app Yes
iPhone Boxer app Yes
iPhone Yahoo! Mail app No
iPad native client Yes
iPod native client Yes
iPhone Inbox Google No
Android 2.1 Eclair native client No
Android 2.2 Froyo native client Yes
Android 2.3 Gingerbread native client Yes
Android 4.0 Ice Creme Sandwich native client Yes
Android 4.1, 4.2 + 4.3 Jelly bean native client Yes 
Android 4.4 KitKat Yes 
Inbox Google Android No
Android Outlook Exchange via native client No
Android app (including Hotmail) Yes
Android Gmail app No
Android Yahoo Mail app 1.4.6 & 2.0 No
Microsoft Surface tablet ( Yes
Windows Mobile 6.1 No
Windows Phone 7 No
Windows Phone 7.5 (Mango) Yes
Windows Phone 8 No
BlackBerry OS 5 No
BlackBerry OS 7 Yes
BlackBerry Z10 Yes
Palm webOS 4.5 Yes
Original Kindle Fire + HD (New vr. of Silk) native client Yes Mail app Yes
Sony PlayStation Vita game console (Gmail) Yes
Alto Mail app No



Platform versions

You need to know how many users are on each platform version to get the full picture. For instance ~96% of Android users are on version 2.2 and up. Which means they’ll get the mobile layout if using the native client. 28% of BlackBerry users are using OS 7 according to this chart.

I can’t find recent Windows Phone stats, though Microsoft has been aggressively pushing 7.5 upgrades. Since May 2012, they’ve been preventing version 7 users from downloading apps from the Marketplace. The post also states, “Most phones are already running Windows Phone 7.5″.

While there are grey areas - like how many Gmail app users we have - iOS, BB and Android all support responsive email design in their latest platform versions.


Update: we’ve had mixed reports on WP8 support, while we own a WP7 and WP7.5 we don’t have a WP8 phone so haven’t been able to confirm this ourselves.


20 Responses to “Responsive email support”

  • Michael C.
    October 7th, 2012 04:20

    “~96% of Android users are on version 2.2 and up. Which means they’ll get the mobile layout if using the native client.”

    This statement is grossly misleading, since the majority of Android users use the native Gmail app, which inexplicably still doesn’t support @media queries.

  • Anna Yeaman
    October 7th, 2012 08:27

    Hi Michael, that’s why it states “if using the native client”…native being the default Android client and not the Gmail app. The chart shows that the Gmail app doesn’t support @media.

    As far as I know, we’ve no stats showing how many Android users are accessing email natively or via the Gmail app. If you have some please share…myself and others have been trying to get this data for a while. I’ve been told there are issues differentiating the UA string.

    I try to design for both set ups, by making sure the top left corner of my desktop creative works for Android Gmail users.

    There’s also a third option, Outlook Exchange. Android ships with built in Exchange support, alternatively you can access it via a third-party app. The apps I tested don’t support @media, I haven’t tested natively yet, as it would mean setting up a server. Though as it’s using the native mail client my guess is it supports @media. If anyone can confirm that, it would save me the hassle.

  • A note on responsive email design | Email Design Review
    October 25th, 2012 13:06

    […] a large amount of users (pretty much everyone except Gmail app and the remaining Blackberry users) that we can enhance the experience further […]

  • AlexJB
    October 26th, 2012 07:51

    Any word on the recently released Yahoo mail app for Android?

  • Anna Yeaman
    October 26th, 2012 08:49

    Hi Alex,

    I just installed Yahoo Mail 1.4.6 Android app and it doesn’t support media queries: on the plus side it doesn’t block images either. Though the ads are nasty…

  • Lauren
    November 1st, 2012 11:52

    Awesome post! I just referred to this article & included a screenshot of the chart in a blog post ( and have gotten some feedback that the chart is a bit difficult to view since the “yes” and “no” are both green. Figured I’d share this feedback with you :)

  • Anna Yeaman
    November 1st, 2012 13:00

    Cheers Lauren I’ve been buried under a deadline this week so I missed that Litmus post. I like how Twitter switch out the CTAs in that responsive layout.

    Yeah I’ve had a couple of people complain to me about the green yes/no’s on Twitter. I’m going to add the Yahoo app and Surface tablet to the chart shortly, when I do I’ll also change the color of the no’s to make it more scanable. Thanks for the heads up!

  • Ian
    November 13th, 2012 10:24

    Quick question for the gurus out there.

    Phone: Verizon Galaxy Nexus
    OS: 4.0.4 ICS (AOKP Rom)
    Default email client

    Situation 1: Test sent directly to my address linked with the default email client did not display the email properly based on the media query.

    Situation 2: Exact same test attached (not forwarded) to an email, when opened, did display the email properly based on the media query.

    Side note, the Enhanced Email app *DOES* accept media queries and all is well on that front.
    Not sure about the Touchdown app as it seems many use it to access their corporate emails.

    Any thoughts will be greatly appreciated.


  • Anna Yeaman
    November 13th, 2012 11:37

    Hi Ian,

    yeah I tested Android Outlook Exchange app K-9 Mail on ICS and it supports media queries. Though does have issues. One of my more simple responsive layouts worked perfectly, but when I tested templates that required stacking two columns into one it didn’t turn out so well. I haven’t been able to test Touchdown, was surprised to see million+ downloads so both are popular apps. If anyone has Touchdown installed let me know if it supports MQ…

    Not sure I totally understand your question - sorry bit tired today - are you saying when you send an email directly to the default Android ICS client it doesn’t show the mobile build based on the media query? Or when you forward an email to Droid from another client it doesn’t show?

    Default email client running ICS should work fine if sent directly (does on my Galaxy Nexus)…it might be the way it’s defined. Have you tried max-width vs. max-device-width? 9 times out of 10 that’s the culprit if your mobile build isn’t triggering on Android.

  • Ian
    November 14th, 2012 12:02

    Hi Anna,

    Many thanks for the swift reply. My layouts are not as simple, unfortunately, but seem to work well when testing on desktops and the iPhone. I can ask my boss to test on Touchdown once he gets back as that’s his app of choice for corp email. I’m actually pretty stoked about Enhanced Email and the developer is always available for troubleshooting / product updates.

    As for my question:

    I sent the same tests directly to the following: Corporate email account, Yahoo! account, and Gmail account.

    Using the default email client, my corporate account rendered the desktop version as if the media query did not work.

    My Yahoo! account rendered the mobile build based on the media query.

    My Gmail account also rendered the mobile build based on the media query.

    I did try other known-working templates yet they worked fine in my corporate email account which is confusing me a bit.

    I also spoke with my team and they confirmed the use of max-width in our templates. :)

    Thanks again for all the help! Now we’ll see how it all renders on Touchdown and I’ll report back.

  • James
    November 18th, 2012 20:35

    Hi Anna,

    I’ve tested media queries that work perfectly fine on desktop and iPhone. I cannot get the Android native mail client to respect the simplest media query. I’ve tested on an HTC running Gingerbread 2.3.4 and Samsung phone running Ice Creme Sandwich(not sure exactly what version).

    I’ve scoured the blogs and I’ve tried everything I could find. I’ve used:

    @media only screen and (-webkit-device-pixel-ratio: various values)
    @media only screen and (max-width: various widths px)
    @media only screen and (max-device-width: various widths px)
    @media all

    Nothing working for me. Is there somthing wrong here? -

    @media only screen and (max-width:480px){.hide {display:none !important;}}

    I can’t get my image to hide.

    Thanks much in advance.

  • Anna Yeaman
    November 18th, 2012 20:54

    Hi James,

    I feel your pain, I spent part of today trying to get media queries to trigger on my new BB OS7, drove me nuts. I had a totally blank screen for ages, no email at all (doesn’t like viewport meta tags we usually put in).

    It’s hard to say what’s wrong without looking at your code. I can say with certainty, that the Droid native default client supports media queries under GB and ICS:

    Feel free to drop me your code if you like and I’ll test it on some of my Androids - anna (at) - see if I can find out what’s up.

  • Anna Yeaman
    December 12th, 2012 11:23

    Hi James, I just had someone else contact me who couldn’t get media queries to run in Android’ native client. After some research we realized it’s the exchange server. He sent me a test template and the mobile version worked fine for me, the exact same creative didn’t work on his Android device.

    Turns out he was testing via an exchange server and I wasn’t. When he bypassed Exchange it worked fine. So looks like Exchange is messing with the mobile code. Not great news for b2b…but may explain what’s up with your tests.

  • Lina
    February 11th, 2013 21:03

    Why does it say that Windows 7 is not supported? I optimised for both Windows 7 and Windows email and it picks up media queries just fine. Thoroughly tested. And of course I do not just mean fitting the screen. But responsive looking the same as on iPhone, minus the usual hairline borders typical of Windows mail.
    What do I do wrong? :)

  • Anna Yeaman
    February 12th, 2013 08:07

    Hi Lina,

    lol would be great if you’re right! I couldn’t get it to work on our WP7 devices, only WP7.5 seen here: and

    I’ll retest in case I missed something and report back.

  • Robert Harrelson
    March 15th, 2013 09:01


    We’ve also been dealing with blank screens on BBs with os7. When you said:

    “I feel your pain, I spent part of today trying to get media queries to trigger on my new BB OS7, drove me nuts. I had a totally blank screen for ages, no email at all (doesn’t like viewport meta tags we usually put in). ”

    Are you saying the it was the viewport meta tag that caused the problem? Did you figure out a workaround?


  • Anna Yeaman
    March 15th, 2013 09:57

    Hi Robert,

    yes normally we’ll add the viewport tag… width=device-width, initial-scale1.0 ect but we found that this was causing the BB screen to be blank on OS7. When we took out the viewport meta tag it was fine. We only placed the MT in for when you viewed an iOS email online, so you can ditch it without emails in the iOS client being affected:

    I need to do more research, the BB viewport is not the same as the iPhone or Android (we have a few BB’s and the viewports are all different sizes) some quite large over 500px so your breakpoints might need to go up as well.

    Hopefully BB10 will not be such a pain…if you want to fry your brain (or maybe it’s just me that struggles with viewports) check out PPKs video “A Pixel is Not a Pixel”

  • Michael Muscat
    January 24th, 2014 21:55

    Media queries do work on Windows Phone 8, but the email client renders in Quirks Mode by default.

    Simply add this metatag to tell the mail client to use IE10’s rendering engine.

    < meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

    The mail app is surprisingly capable, it even has full support for css3 animations.

  • Paul
    March 6th, 2015 01:14

    Hi Anna!

    Yahoo finally supports media queries!

    Few clients are still missing but it’s finally going to be a standard.

    Paul de Fombelle

  • Anna Yeaman
    March 6th, 2015 16:07

    Cheers for the reminder Paul, yeah I saw that will update the post, going to do some testing this weekend. Really hope Gmail follows suit like it’s been hinting!


Leave a comment: