Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Media Queries in HTML Emails

Posted March 14, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

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:

<style type="text/css">
  @media {
  * { font-family: sans-serif }
  }
</style>

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:

<style type="text/css">
@media screen and (max-device-width: 480px) {
   * { font-family: sans-serif }
   .mobile_content {display: block} !important
   .nonmobile_content {display: none}  !important
 }
</style>

So which mobile email clients support media queries?

Here's what our research showed:

Mobile Client

Embedded

 Linked

min-device-width

max-device-width

Types Supported

Android Mail

y
(buggy)

y
(buggy)

Not supported every time (sometimes it will display, sometimes it won't)

Only max-device-width 480px and device-width 480px are supported every time

all,screen

Android Gmail

n

n

iPhone Mail

y

y

>=320px

<= 480px

all, screen

iPhone Gmail

n

n

     

iPad Mail

y

y

true if min-device width >= 768

true if value is <= 1024

all, screen

iPad Gmail

n

n

     

Blackberry 8000

n

n

     

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

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!