I was in a conversation earlier today in regards to using css media queries in an email. So while I hadn’t tried this before, it definitely got me thinking that it should work. Well, needless to say I got home this evening and whipped up a couple of quick HTML emails using media queries and guess what…Yup, it works.

I’m not sure why I had never thought of this before, but now that I have I am about to retool many of my projects that generate emails so they are using full capabilities of the media query options. This works fairly decent in my environment because all of the devices are either an iPhone or an iPad, so I already know what dimensions to use for my media queries. If you aren’t sure what media queries are check out my other article on how to add media queries to your website. In addition, CCS Tricks has a great run down of standard sizes for devices which I often refer back to from time to time.

Here is an example of what I did when I tested to see if this would work. I only tried it for an iPhone comparison to a standard browser, but so far so good.

While I don’t have every device out there to test with, I have been able to test with a few devices and verify whether or not this is supported. I can say that I have got it to work in the native email apps on an iPhone, iPad, Android Phone and Android Tablet, but I’m pretty sure there are quirks out there in some devices in which it may not work. If I had to guess, Blackberry probably doesn’t support it, but then again, who is designing for Blackberry browsers anyways?

Any-who, hope this helps you out in some fashion and if you have anything for me to add to this post please let me know in the comments below.

Tags: