Media Queries in HTML Email: Cover all your bases

Open Signal's visualisation of different device screen sizes — Android on the left, Apple on the right

Open Signal’s visualisation of different device sizes — Android on the left, Apple on the right

Update: Be sure to check the comments for further discussion where Lucas has suggested sticking with max-device-width alone, but pulling the media queries into the body of the email. This does also seem to fix the problem. Read the conversation for more.

These days it’s possible to hold a smartphone in your hand with a higher screen resolution than a computer. This can pose a small issue when using media queries since there are a few devices that can fit in your hand, but actually have way more pixels than your mobile design width.

What I’ve been using

In my experience up to now, it was best to use the following media query when coding HTML email, using 500px as an example*:

@media screen and (max-device-width: 500px) {}

(I use screen instead of all to prevent any possible long-shot issues if an email is printed. It is potentially irrational.)

The reason to use max-device-width is because our old friend, Outlook.com on IE9, displays the mobile version of your email if you only use max-width (Such an amazing feature!).

*It’s a good idea to use max-width during development, so that you can easily resize your browser to preview the responsive behaviour.

Great. So what’s changed?

Well, now with all these new giant phones, they have a max-device-width of much larger — the HTC One, for example, has a physical screen resolution of 1920 x 1080. They ‘think’ their width is ~320px which means max-width would work, but we can’t because of the Outlook.com/IE9 bug mentioned above.

How to fix it? Easy! Just double up

The best way to fix this is to double up on your media query, and cover everything with a max-width of 550px, and a max-device-width of 550px.

@media screen and (max-device-width: 500px), screen and (max-width: 500px) {}

I was concerned that Outlook.com/IE9 would still render the CSS contained in the media query because max-width is still there as an option, but it doesn’t. Thankfully, our problem is solved!

PS: This all originates from a bug I had with an HTC One displaying the desktop version of an email when using max-device-width. While plenty of smartphones have happily obeyed the max-device-width rule when they have physical pixel widths higher than their maximum display widths (the iPhone4+ displays at 320px wide when it actually has 640 physical pixels across), for some reason I haven’t seen this problem until testing with HD devices. Pixel density and media queries makes me go a bit woolly between the ears at times, so my assumption is that the HTC One ignored max-device-width because it has 1080 pixels to play with, but I could be wrong. If you know more, please jump in the comments!

About Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • Fabrizio Calderan

    Since the comma between mediaqueries behaves like a logical “or” and not like an “and” – for the sake of clarity – I think the statement before the last snippet could be rephrased with “or” instead of “and”. Anyway thanks for sharing :)

  • inorganik

    Then again if you just use “all”, it solves this problem. As for printing, I’d say the chances of an email being printed from a mobile device are slim. If you do print it from a mobile device, this is just a guess but wouldn’t the width adjust to size of page?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    True! As I said, it’s quite irrational, but I guess I figure if Outlook.com is reading media queries, what if someone prints from Outlook.com and they end up with the mobile version being printed? It would definitely not be the end of the world, but that’s my reasoning behind it. Happy to be challenged on this.

    Do you mean that using @media all and (max-device-width) on its own should stop the bug from occurring at all?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Good point! I totally see what you mean.

    I guess the way I am speaking, in that sentence, is about it solving the problem with both, hence the use of ‘and’ rather than ‘or’.

    So at the point of executing, it’s looking for either/or, but from the perspective of the bug fix, it’s going to apply the right CSS to one scenario AND the other scenario. But I totally acknowledge that the code in itself is not saying that, you are definitely right there.

  • inorganik

    You are definitely right about outlook.com on ie9 – I think I skimmed over the article too fast. But about printing: depending on the browser/client you’re printing from, it re-evaluates the media query for the post-script file sent to the printer. But even given that I think you’re right to use “screen”. Nice article. Did you use Litmus to find that outlook.com on ie9 bug?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    I found it using Email on Acid. Quite an annoying bug… Microsoft is definitely our biggest nemesis!

  • Pingback: Responsive Design Weekly #74

  • James

    I have tested this and it doesn’t seem to work. When I ‘double up’ I still get the problem of Oulook.com in IE9 displaying the mobile version instead of the desktop. It still does that weird thing were if you resize the browser window slightly it changes to the desktop version.

    I have multiple break-points at:

    @media
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {}

    @media screen and (max-device-width: 580px), screen and (max-width: 580px) {}

    @media screen and (max-device-width: 480px), screen and (max-width: 480px) {}

    @media screen and (max-device-width: 380px), screen and (max-width: 380px) {}

    Any ideas why it is not working?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi James,

    Thanks for sharing! I actually added this trick to someone else’s template yesterday and it didn’t work either.. they also had multiple breakpoints. Clearly this requires more investigation as to why it doesn’t seem to work with more than one.

    Have you been testing on a high res device like an HTC One or a Galaxy? Be interested to know if you’re seeing the mobile version okay when you use max-device-width.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Also, it could be an issue with using max-device-width instead of min-device width and the overriding from mobile first. I will check it out.

  • Tahsin

    Not sure if this has been asked before but were you able to get any responsive emails looking right on web email client such as yahoo mail app? I pretty much can get my responsive perfect in outlook, iphone email and android email but the yahoo app I just cant get it to work at all and I noticed Zurb free email templates seems to work on yahoo but looks pretty bad on Outlook email client as they are using divs in some cases.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey Tahsin, do you just mean the web client? Or the mobile app? I never have any problems with the web client. The mobile app doesn’t seem to render media queries anytime I have tested it out.

    Avoid those Zurb templates, they don’t work in Outlook which basically renders them useless.

  • Tahsin

    Mobile app sorry. Its kinda weird that Zurb templates work on yahoo mail apps and their coding style is something like not at all the best practice I am aware of in email coding as in using divs and classes and no inline style at all.

    I also noticed monster newsletter renders out well also in yahoo. So its kinda weird how they managed to get the media querie to work on ymail app since ymail and gmail arent suppose to.

    Great site by the way and really enjoyed reading your articles.
    cheers

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi James,

    I ran some more tests today on my own templates with multiple breakpoints and this fix DID work as planned.

    This doesn’t really bring me any further towards knowing why it did NOT work in your case, or in the case of the other template, but it could have something to do with this line:

    @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)

    Which doesn’t look right to me. If you are going to have specific styles for everything from 760px and 768px up to 1024px, they might as well be your default styles that you then overwrite with the media queries below it. I am also not an expert in the syntax, but it doesn’t look like the right way to create a media query that will work as expected… perhaps someone else with more knowledge may be able to chime in!

    Good luck.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Have you ever got media queries working in the Yahoo mobile app? Is this on Android or iOS? iOS has never given me any love but I confess I haven’t dug into it much on Android.

    What’s the monster newsletter? I am in Australia so perhaps don’t know. Are they that career/jobs company? I’ll sign up to their newsletter to see :)

    Yeah the Zurb templates are really weird; they sound so exciting but then it turns out they are actually pretty fail.

    Thanks for the kind words :)

  • Tahsin

    On android. I have a yahoo email account and i am subscribed to monster.com the job website thing and noticed their newsletter are responsive and works well on yahoo. Problem is I cant get the source code as they dont have the view web version and view the source code from yahoo is way too messy. I did change my email add to my outlook desktop one so maybe their next newsletter I may be able to grab the code and see whats so special but would be great if you can look into it and do a review of it as it would help others I am sure :)

    cheers!

  • Seth Wieder

    Are you using a linked stylesheet to include blocks of code for your css @media queries?

    I was under the impression we still had to use inline CSS to render to most mail browsers… Is this no longer the case?

  • Jimbo

    I’d be interested to learn if the queries above work on the Samsung S3 (and other argumentative types) in portrait…

  • Jimbo

    What meta viewport are you using in your responsive emails?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Jimbo, generally this: meta name=”viewport” content=”width=device-width, initial-scale=1.0″

    I know there are some issues with BlackBerry and the viewport tag.. I’ve actually found it to be quite hit and miss, sometimes it shows a blank screen, sometimes not. Very weird.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    I just got access to an S3 so I’ll be checking it out! The HTC One sure is argumentative enough in portrait.

  • Lucas

    I think I’ve found a solution, but just maybe.

    Instead of using the which contains the media queries in the section, I placed it at the end of the section.

    Everywhere I looked it said that this should not be done because of HTML standards and watnot, but this seemed to completely eliminate this issue with outlook in IE9 and allowed the e-mail to keep its mobile version with the max-width only.

    It works everywhere I tested (Outlook.com, Gmail, Outlook 2003/2007/2010/2011/2013, Yahoo, Lotus, Iphones and Androids – some of this tests were made with Litmus, btw).

    Could anybody confirm if this works for them as well? I promise I’ll keep my fingers crossed for you tests to succeed! Thanks! (Posted this in E-mail on Acid as well to see if anyone can also test this).

  • Pingback: How Nonprofits Can "Go Mobile" On A Budget | #fundchat

  • James

    Hi Nicole,

    I finally got this working for a while but now I seem to have a very weird issue:

    When an email is opened in Outlook.com in IE9 the first time the email is opened it displays the desktop version correctly. But in subsequent opens (if you go back to the Inbox and then open it again) the mobile version appears and if you resize the browser window even in the slightest it automatically changes to displaying the desktop version.

    Has anyone else experienced this? I am confused as to how it works the first time and then displays the wrong version after that???

    I tested emails in all other combinations of browsers and email clients and had no problems. It was just Outlokk.com in IE9.

    Regards,
    James.

  • Lucas Mainardi

    Hello James,

    In the comments bellow I posted a possible solution to this issue in Outlook.com.

    The problem seems to be the area in which the email is loaded. Apparently, the area starts out in a small size and is resized a few seconds later, but in that time the media queries fire up and display the mobile version. This is because the media queries are read first in the hierarchy of the code (they’re at the head section) and the HTML email is read second.

    The solution I found is to place the style section which contains the media queries after the HTML e-mail, specifically right above the closing body tag.

    I tried this out in Litmus and all seemed to work just fine across the board (no other browsers/mobile devices/e-mail servers seem to be affected negatively, displaying the exact same version of the email with the styles in the head section).

    This allowed me to use the “max-width” media queries as a solution for all mobile versions without the need of the “max-device-width” or the double-up solution described here (which really didn’t work to eliminate the Outlook.com issue for me).

    I need to inform you that I found no documentation supporting this other than my personal experience with the issue. I wish there was more people trying it out so we could know for sure, but it has been working for me with no issues up until now.

    Hope this helps.

    All best.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Lucas, This is really interesting. I will try this out and see what happens!

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Thanks again for sharing your solution. Like I said I am definitely going to give it a try and we’ll see what happens.

    I hate you Outlook.com!

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Ok, I tried it and it definitely does work across all my tests in Litmus and Email on Acid.. no negative effects to Android or iPhone in real tests.. haven’t checked on a PC with IE in actual Outlook.com though. All in all, seems like a good solution! Thanks Lucas!

  • James

    I tried it and it is now showing the mobile version in Outlook.com in IE9 on the first open (rather than the second)!! As soon as you start to resize the browser window the desktop version appears as before.

    What I don’t understand is I have tested the code of other companies emails (Lufthansa etc.) and they are using:

    @media only screen and (max-width: 580px) {}

    But don’t seem to experience the same problem in Outlook.com in IE9.

    The other thing that is puzzling me is how the correct desktop version displays on the first open but on no subsequent one.

    That is mental!!!!

    I am considering a new career if I can’t get this working soon.

  • James

    I tried it in Litmus and it does look ok in Outlook.com in IE9. But that is probably because I have been experiencing the correct desktop display on the first open. It is the subsequent opens that are showing the mobile version. Is anyone else experiencing this??

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    I have honestly been thinking the same thing the past few days as I’ve been fighting with the Gmail app for Android and creating a hybrid fluid/responsive layout. I know how you feel.

    Anyway — that is so annoying! I have also had the suspicion before that something else may also be interfering with the issue. Perhaps you could strip down the Lufthansa email and test that, then slowly add in your content? Sometimes I do that.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    You could perhaps take solace in the fact that people are probably only going to open the email once, too. Not a huge help, I know, but still it’s true.

  • Lucas Mainardi

    Hello James,

    I experienced the exact same thing, but it was when the media queries were in the head section.

    After putting them in the end of the body section, I opened the e-mail with Outlook.com multiple times and it works everytime. Could you post the media queries of the email that is giving you trouble so we can take a look?

    I completely understand the overwhelming feeling of hatred toward some email readers (I’m looking at you, Outlook.com and your sidekick, IE).

  • Pingback: Creating a Simple Responsive HTML Email | Webdesigntuts+

  • Pingback: Creating a Simple Responsive HTML Email | Lanka enews

  • Pingback: Creating a Simple Responsive HTML Email

  • Pingback: Creating a Simple Responsive HTML Email | Directory Net

  • Christian Matthew

    Hi Nicole… Great ariticle.

    I am having a problem with my page rendering multiple media queries… is this possible in HTML email.

  • Pingback: Creating a Simple Responsive HTML Email | Tutorial Store

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Christian, thanks! Yes it is possible, where are they being rendered? Media queries often get rendered in Yahoo! Mail because it will read them. You can read more at Email on Acid http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries

  • alex

    I don’t want to advert this but it could help some people just entering the responsive mail-theme…. :)
    http://zurb.com/ink/process.php
    also offers an paste your code – and get it inlined back.
    just found this blog here searching for an outlook-@media fix and thought maybe could be useful.

  • Pingback: CENT Technology | Deliver Opportunities

  • becksd

    Hi, i have tried this in an email creative and it has not worked.
    max-device-width=”500″

    is the code i have put in. iphone’s seem to be fine but android phones it doesn’t seem lt make a difference to.
    Am i missing something? Our email client cannot support CSS coding so trying to reslove it other ways.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey there! That code should read as:

    (max-device-width: 500px)

    Make sure you have the “px” in there, and make sure there are no quotation marks. If you keep having trouble, perhaps share a link to your full code so I can have a look!

  • Katie

    Hey, I’m having an issue with the yahoo web client turning it into the mobile version. All clients are fine, just yahoo. Anyone know why this would be?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin
  • Stefano D’Avascio

    Hi, I’m sorry but I’m a noob in email design.
    I’d like to know how to embed the style in an email’s html.
    Until now I write it inline because when I send the email doesn’t read , but I can’t use media-queries.

    Can You help me?
    Thanks

  • Travis

    In the of your file, Media queries and styles go in here

  • Travis

    Sorry in the

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey Travis, thanks for answering that! Yep Stefano, if you want to include media queries, put them inside a style tag in the head of your document. It will get ignored by email clients that can’t read them, but it will be read by mobile apps that support them.

  • Pingback: Creating a Simple Responsive HTML Email | CLOUD FRENZY

  • dapmg
  • popopop

    ya

  • abhishek

    I still get the problem of gmail app displaying the mobile version instead of the desktop. any one plz help me

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi abhiskek, that sounds like desired behaviour? :) People try very hard to get that to happen. Can you share your code?

  • Mark Wilston

    I am a email template designer, I have created some responsive email templates. They look great in a number of email clients but look terrible in Outlook 2007 and Outlook 2010. Checking the worth website : http://bit.ly/1tJS9HA