Back at the beginning of February, I put up a post about MailChimp’s addition of support for media queries.

In the example I gave in that post I briefly touched on the thought that, using a media query, you could bump up your email’s text size. People showed interest in that idea alone, so let’s take another look at it.

As a new example, I’ll use the NextDraft newsletter. NextDraft is an awesomely entertaining daily news round-up written by Dave Pell, a writer whose blog is syndicated on NPR, Forbes, Huffington Post, and other big-name sites.

The NextDraft newsletter is perfectly suited to media query style-shifting. It’s an HTML email, and it’s primarily text-based:

Some of Dave’s readership complained about text sizes being too small on mobile platforms like the iPhone. That’s only the first part of the problem. When the subscribers zoomed in to make the text readable, the email’s width (and resulting line lengths) then forced them to scroll horizontally to read the email. Having to scroll horizontally on a phone screen to read through content is annoying at the best of times, and infuriating at the worst. So, the primary issue was the small font size, which made reading on a small screen a difficult prospect. Secondarily, there was the issue of email width, as the email had been coded to the standard width of 600px.

Here’s what the email looked like on an iPhone, unzoomed on the left, zoomed on the right:

Certainly not an ideal situation. Unzoomed, the email really can be difficult to read if you’re not sitting still, with the phone up to your nose. Zoom in, and the text is perfectly legible, but you then introduce horizontal scrolling, which is tedious.

For me, the ultimate mobile readability goal is arms-length reading. Anyone should be able to hold their phone (or tablet, to a lesser extent) with their arm comfortably extended and read an email without having to focus hard to stay on the same line of text or squint to see what they’re reading.

To that end, the first thing we can do is bump up the font size. As STYLECampaign’s Anna Yeaman points out in this blog post, Apple recommends a font size of 17-22px. For body copy, I’ve found that 19px or 21px both work well. At this size, sentences are arms-length readable, and little effort is required to keep your place in a paragraph.

Now we’re left with the email width problem, and that’s an easy one to solve. On a mobile screen, the ideal solution here is to have the email fill the screen completely, regardless of whether the phone is in portrait or landscape orientation. On email clients where the viewport is larger than a mobile screen, we want the email to act like a normal fixed-width email.

The code for this email’s media query is simple and straightforward:

The query activates when the device’s viewport width is 480px or less, which is the width of the average device in landscape orientation. Once it kicks in, the email’s width switches from a hard-coded 600px width to a 600px max-width rule, setting the upper limit for the email’s width. The actual working width of the email switches from 600px to 100%, allowing the email to fill the viewport of the device. No zooming required.

In conjunction, the email’s font size also changes. In desktop or webmail clients, the font size is set to 16px — a nice, comfortable size for a desktop monitor. When the media query is triggered, that font size gets bumped up to 19px, which looks great at arm’s length on iPhone and Android handsets:

The increase in font size, coupled with a fluid width layout makes this email as easy to read and the media query doesn’t interfere with desktop and webmail clients, so readers get a nice format regardless of reading platform. Not much work at all to make your subscribers happy.

And that’s that. Here’s a barking cat.