Media Queries in HTML Emails

0

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 ClientEmbedded Linkedmin-device-width max-device-widthTypes 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 timeall,screen
Android Gmail

n

n

iPhone Mail

y

y

>=320px<= 480pxall, screen
iPhone Gmail

n

n

iPad Mail

y

y

true if min-device width >= 768true if value is <= 1024all, 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

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

Free Email Goodies