Media Queries in HTML Emails

A few months ago, we started researching which mobile email clients support media queries. For those who have never used them before, media queries allow you to control the layout of your email based on the mobile device that is being used to open it. They can be either linked or embedded within your style block. Here's an example:

Media queries support boolean conditional statements that are true or false based on the type, resolution and/or size of the device. For example, 'screen' and 'print' are examples of media types whereas 'device-width', 'min-device-width', and 'max-device-width' are each examples of properties that check the width of the rendering surface on the output device. Here's another example with conditional statements applied:

So which mobile email clients support media queries?

Here's what our research showed:

Since Gmail does NOT support embedded CSS, it's really no surprise that media queries are not supported in any of the Gmail mobile apps. The native iPhone and iPad email applications show strong, consistent support for media queries as long as they meet the conditions stated above.

Unfortunately, our testing proved that the native Android email application was buggy to say the very least. At first, it seemed like media queries would render the first time I opened an email but if I re-opened it - POOF!!! - they where no longer supported. Soon after, I came to a point during my testing wherein nothing I tried would work, not even previous tests that passed with flying colors. Before discounting this conundrum entirely, I engaged a few more of our developers and each of them came to the same conclusion. It's not in our nature to give up because it when it comes to computers there's usually a reason for everything but this one had us knocking our heads against the wall.

My conclusion is that media queries are safe to use in email design, especially when optimizing for the iPad or iPhone. As long as your email looks good both ways, you should be good to go!

Devices Tested:
iPhone 4.2.1
iPad 3.2
Android: Sprint HTC Version 2.2