Feb 2, 2012

MailChimp and Media Queries

July 2012 Update: I don’t do this nearly often enough, but following some comments, I’ve made a few updates to this post to alleviate confusion. Most importantly, I’ve added a new version of the template provided at the end; it looks virtually the same, but is built with more stable and modern code that reflects our current techniques. I’ve also updated the screenshots in the post itself, adding "!important" declarations that were missing (which made it unclear as to whether they needed to be there or not – they are needed). I’ve left the majority of the content as-is, since it still reflects a sound methodology.

It’s no secret that mobile readership of email is skyrocketing. In May of 2011, Return Path released a study in which showed an 81% increase in mobile viewership over the prior 6-month period. Then, in September, Litmus released its own study which bore out many of the same conclusions.

Litmus’ number was a little higher: 150% over the previous 6 months. I don’t know what the margin of error is in either study, but even being conservative and splitting the difference between the two numbers nets you a healthy increase. Either way, these numbers show that people are overwhelmingly choosing to view email on their Androids, iPhones, and iPads, and that means finding a way to optimize email for smaller screens.

All of this is a long-winded way of saying that media queries are a way to optimize email for mobile devices, and MailChimp v6.8 now supports them in the normal campaign workflow.

Now, chances are that if you do code your own templates, you already know what media queries are, you stopped reading at "MailChimp v6.8 now supports them in the normal campaign workflow," and have moved on to implementing media queries into your templates. For the rest, what follows is an overview of what a media query looks like, how to implement it into your code, and even how to set it up so that you can adjust the media query style rules within MailChimp’s campaign editor.

We’re starting with a simple, blank template…

A lightly-modified version of a basic layout template.
A lightly-modified version of the "basic" template from MailChimp’s "basic layouts" library.

…and styling it with basic CSS:

The basic template, styled and filled with content.
The same template, after some styling and content.

If you’ve never worked with one, the idea behind a media query is basic: it’s pretty much a CSS stylesheet within a CSS stylesheet; a collection of CSS rulesets that are read and rendered when the trigger for the query is hit. Here’s what the opening lines of a media query look like:

The opening code lines of a CSS media query.
The opening of the media query.

The media query contains two important components: "screen" and "max-device-width." The "screen" component is the media type and the "only" is, as the W3C so eloquently puts it a keyword that’s "…used to hide style sheets from older user agents." The second component, within parentheses, is the actual query; the media feature (max-device-width), along with the trigger value (480px). In short, this media query says "These styles should only be used for screens, and only when the screen’s horizontal width is 480px or less."

The W3C Article (or W3C Candidate Recommendation Document, if you’re feeling fancy) linked above lists out the other media features you can trigger on, but for the purposes of this email template, we’re only concerned with device-width.

While you can do all sorts of neat stuff with email-valid CSS, there are three things I’ll focus on: email width, header image width, and font sizes.

Since most emails are wider than 480px (the landscape width of the average device), most emails will trigger horizontal scrolling. For the sake of this post, we’ll assume we don’t want that. Thus, the two basic ways to change the width are by either setting a hard value like 300px for your email’s tables, or to set a hard upper limit with max-width, then set table widths to 100%. That’s what I’ve done here, targeting each table that gets its width set:

The style ruleset dictating the width of the email.
This method lets the email fill the viewport up to a limit of 600px.

Next, since the header image in this email is also 600px wide, we should scale it down in line with the email’s total width. The same method used above can be applied to the image (The vendor-specific style rule "-ms-interpolation-mode:bicubic;" is there to account for IE7’s inability to scale images down without making them look horrid):

The style ruleset dictating the width of the email's header image.
The header image will fill adjust with the template, to the same limit of 600px.

Finally, we should increase readability on small screens, so bumping up the font sizes automatically is important. A good rule of thumb is a font size of at least 16px for your copy and 20px for your main headings. That might strike you as big, especially if you send tons and tons of content (which you shouldn’t). Our friends at Smashing Magazine posted an article that argues otherwise. The article isn’t specifically concerned with email, but it’s relevant and right. For this email, I’ve bumped the font size up to 18px:

The style ruleset dictating the font size of the copy in the email.
An 18px font size allows for comfortable reading.

After adjusting font sizes in the preheader, body, and footer, and adjusting heading sizes, this is what the full media query looks like:

The entire media query stylesheet for this email.
The full media query stylesheet for this email.

I’ve left one detail for last. If you look at the media query styles, you’ll notice I targeted my tables and table cells using an attribute selector ( table[id="templateContainer"]{…} ) instead of using the traditional CSS route ( table #templateContainer{…} ):

A CSS attribute selector in the media query.
A CSS attribute selector

This method, discovered by Campaign Monitor, prevents Yahoo! Mail from reading the query styles and rendering them instead of the normal CSS.

Finally, here’s what the email looks like on both iPhone (4S) and Android (HTC Incredible):

What the email looks like on iPhone and Android.
Some basic media query CSS really helps produce a better mobile email experience.

Not bad, for such a small amount of work. You can even save yourself a bit more time by marking the CSS rules in your media query with MailChimp’s template language editable tags. This will allow you to edit the values of your CSS properties when inside the app’s campaign editor. Simply follow the same pattern already established by the template language:

Media query styles set up with MailChimp's template language.
Avoid digging into your code every time by making query styles editable in the app.

You can download and play around with the template I used right here. That’s all I’ve got. Time to dance.