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 the “basic” template from MailChimp’s “basic layouts” library.

…and styling it with basic CSS:

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 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.” Whatever. 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:

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 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:

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 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{…} ):

CSS attribute selectors

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):

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:

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.

Brownlow consulted with Tom Buchok, co-founder of Bannerflow and Chad White, Research Director at Smith-Harmon, for information about best practices and some relevant examples.

Q: What benefits can animated GIFs bring to your marketing emails?

Tom notes that because animated GIFs are used much less frequently in marketing emails, a certain amount of novelty remains– and novelty can be an asset when trying to get your audience’s attention. “More importantly, animated GIFs allow for a more creative message. Retailers can use a single space to highlight multiple products, advertisers can use animation to highlight their call-to-action, or click-throughs-to-video can be easily visualized with an animated GIF.”

Q: What kind of things are retailers doing with animated GIFs?

Chad mentions that animated GIFs seem to appear more often during the November and December holiday season as retailers are trying to “stand out in the inbox.” Chad gives a number of examples, a couple of which I will mention here.

“For instance, starting with a Nov. 7 email, Williams-Sonoma has been using animation in their header to draw attention to shipping deadlines and other information, but also just to get subscribers to give the email a second look.”

“…There are definitely opportunities to go-big with animation. One of my favorite examples remains the GIF used by Lands’ End in a March 6 email last year. They not only used animation to show off some of the colors that their Beach Trekker Sandal comes in, but they also demonstrated how the Croc-inspired shoe becomes a slider.”

Q: When are animated GIFs a bad idea?

Tom notes that one of the main concerns to consider is the GIF’s file size (in kilobytes). “Animated GIFs can get significantly larger than their static counterparts, especially as the GIF file includes more and more color.” Also, if the animation is gratuitous that is going to be detrimental over all– be sure to keep your objectives in mind and make sure the animation serves those.

Q: Any compatibility problems with email clients or webmail interfaces?

Tom: “With Outlook 2007′s shift to HTML rendering in Word, rather than IE, animated GIFs do not display. This is the biggest compatibility issue. In Outlook 2007, the first frame is all that appears; designers may want to produce their file so that the first frame contains all the information needed.” And as with HTML emails in general, try to design any animated content in such a way that it will fail gracefully.

For more info and additional resources, see the original article here.

http://sethgodin.typepad.com/seths_blog/2008/07/if-you-dont-wan.html

These emails bug me too—except maybe some transactional messages. I don’t exactly expect to hit “reply” for an Amazon.com receipt.

Anyways, if you’re sending email marketing (not transactional) messages, you really, really should setup a dedicated reply-to email address before you send your first campaign. It’s a step that we’ve noticed a lot of newbie email marketers forget, and it’s exactly why we wrote this free guide:

Your First Email Marketing Campaign

It’s a checklist that covers lots of other little things new email marketers forget to do. Hope you find it useful.