Responsive Email Design

Chapter 5

Targeting devices with media queries

You may have noticed that we've been using one standard media query in this guide, being @media only screen and (max-device-width: 480px) { ... }. This is great for targeting Apple iPhones and other handheld devices that make up the majority of mobile email client share.

But if you, or your clients want to target tablets, larger-screen Android devices and some of the more exotic screen resolutions that feature in the mobile ecosystem, then you'll need both unique media queries and unique styles to match.

As you may know, media queries are not supported by every mobile email client - for example, Gmail will not show the responsive version of your email, on any platform. For more information on which email clients do and don't support the techniques in this guide, view our support chart.

Fine-tuning your media queries

Lets go back to the max-device-width: 480px rule in our earlier media query. What this tells mobile email clients (and browsers) is that below the 480px threshold, a mobile-friendly layout defined therein should be displayed. Above that, CSS styles outside of the media query should be used.

However, the dimensions you can design for can be even more specific than that, for example, only targeting displays that are 320px or more in width, but smaller than, or equal to 480px. Here's an example:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

What a lot of folks don't know is that media queries can be quite focused - apart from designing around a range of widths and heights, you can also design for screen orientations (ie. portrait and landscape) and pixel ratios (how the width of each pixel in an image compares to the width they're displayed at).

This provides is the ability to target devices with obsessive precision. Want to create an iPad-specific layout? Sure. How about targeting devices with Retina displays? Why not. While the effort that goes into adding targeted styles may often outweigh the benefits, sometimes it takes only a couple of lines of code to say, get an email newsletter looking edge-to-edge perfect on both your phone and favorite tablet.

Our friend Andy Clarke created a wonderful boilerplate for targeting popular devices. It's a great starting point for designing and building email designs that aren't limited to two views each side of 480px.

Being paranoid about Android

That said, there are folks who are critical of focusing on creating layouts around fixed widths like 480px, commonly known in the industry as 'breakpoints'. As Marc Drummond argues:

"If you are using responsive web design techniques (and you probably should be!), then this means that using default media query device-width breakpoints is mostly pointless."— Marc Drummond, "Responsive web design default breakpoints are dead"

Marc acknowledges that there are oodles of breakpoints that exist outside of say, Andy Clarke's earlier boilerplate, particularly amongst Android devices. Besides, new mobile devices come out all the time, so the media query you're using to target the top-of-the-line Android handset today may be redundant tomorrow.

Building fluid layouts with media queries

The proposed alternative is to design fluid layouts that gracefully adjust to the width of the viewport. By using a simple media query that applies a percentage width to elements (instead of fixed widths like 320px), it's possible for your newsletters to feature content that has a standard 'desktop view', but below a certain viewport width, stretches and contracts to fit. As a result, the newsletter can display optimally in a variety of settings, from small preview panes, to the tiny screens on web-enabled Nokia devices:

Image courtesy of Style Campaign, "Fluid mobile email design (part 4)"

To see this technique in action, I recommend viewing this Starbucks email newsletter and resizing your browser window. Props to designer Ed Melly for this great example.

We have a detailed blog post that goes into the mechanics of fleshing out fluid layouts for HTML email and in the next chapter, will touch on how fluid-width images can be used effectively in your newsletters.

Finally, a word of advice - while it's very easy to become fanatical about tailoring your responsive email design for specific devices, don't lose track of the big picture. If 85% of your mobile-toting subscribers are viewing your email in 320px x 480px viewports, don't feel like you have to break your back for that one guy using a 184px x 307px display (unless it's your client, of course!).

Optimizing images for mobile

Sign up for free.
Then send campaigns for as little as $9/month

Create an account