Media query trifecta

Want to reach Moms? Send them a mobile email at 7am

That was one of the finding’s in this (pdf) Babycenter report, with 78% of moms saying they use email on their smartphone. So when WhatCounts approached us to design a welcome series for SavvyMom, it was no surprise their mobile usage was over 20% (higher factoring in image blocking as BB & Android were only 2%).

With 90% of mobile users on iOS, Brittany Schneider (Director of Strategic Services), Aaron Grey (awesome coder) and I set out to re-design their welcome email. Here’s some of the challenges, with Aaron contributing.

Email 1

View email1 (resize your browser / @media not supported in IE8 or below FF3.5)

Click to play with actual email

Fixed to fluid

16mths ago I wrote how some app sites favor 320px blocks of content, I had the same idea for SavvyMom. 640px wide fixed layouts on the desktop, that would reformat into one fluid column on the iPhone. With content blocks like the navi 320px wide or less.

Hide desktop content

In all three emails we hid the online version link, logo and recovery footer from mobile users. In email 1 we also hid the desktop image. One downside of display:none, is all the desktop code and images are still downloaded. The fluid layout as baseline would have been preferable, but there’s little support for @media on the desktop.

Branding vs. content

Putting, “SavvyMom” into the title text of each email allowed us to hide the logo. Freeing up first screen space, while retaining branding. Here’s a couple of my drafts, with and without the logo.

Font size vs. optimizing 1st screen

We had the choice of keeping the large desktop fonts (left). Or using @media to reduce the font size, moving CTA’s onto the first screen (285px). We went with the smaller title font (right).

Bigger text or more content on the first screen?


As we’d reduced the font size, I changed the font color from gray on the desktop to black on mobile devices to aid legibility. I also drafted up a mobile version with more contrast in the background. Though the lighter pastel pink was chosen, to keep things consistent.

Email 2

View email2 (resize your browser / @media not supported in IE8 or below FF3.5)

Click to play with actual email

Swapping images to minimize scrolling

I drafted three options for email2: desktop images, mobile images and no images. We picked alternate mobile images, they were instructional so I didn’t want to hide them. Support for jump tags is flaky, it takes two taps on the iPhone, but it’s something to test. Though the best advice to minimize scrolling is use less copy.


In her audit, Britanny noted that SavvyMom’s s-curve layouts consistently out-performed vertical aligned layouts. Only I wasn’t sure you could go from an s-curve into a single column, and have all the content in the right order. So I prepared two options. Even Aaron had doubts, before finding a working solution:

“I was able to use @media CSS to remove the desktop image from each section and bring forward the mobile image. I accomplished this by defining the mobile images in the @media CSS as background images and then calling them into the HTML using a div tag. I also used @media CSS to center the call to action buttons for the mobile version.

In email 2, I built a two column table for each content block. Then, I was able to use @media CSS to make the table size to the window, decrease the table cell width that held the image to 0, and then hide the image. So the 2nd column cell of the middle content block appears to bump over to the left in the mobile version and all three remaining content blocks line up vertically”.

Here’s the code (or just view source in email 1, email 2, and email 3):

#main .wrap { width:100% !important; }

#main .photo { display:none !important; width:0 !important; }

<td align="left" valign="top" width="320" height="100" id="main" class="photo">

Email 3

View email3 (resize your browser / @media not supported in IE8 or below FF3.5)

Click to play with actual email

Designing for touch

All targets were proportioned for touch. The navi is 320×44px and CTA buttons are CSS3 and finger-sized. The copy has only one link per paragraph. You have to be careful when fluid text wraps, that you don’t end up with one URL on top of another.

We also tested on real devices. Moving quickly from sketches, to Photoshop mock-ups, to testing and refining on iPod, iPad and Android. This enabled us to finesse the footer, which was initially prone to mistaps. As Aaron points out,

“To create the desired spacing in the footer and an easier link to tap, we added padding, increased the font size, and increased the line-height in the @media CSS”.

Test on real devices

Segment by context

Designing this series, reinforced what a powerful tool media queries are. But it also highlighted limitations around image use, desktop support, placeholder content and sharing HTML across desktop and mobile.

To be fair @media never claimed to be a cure all, it simply changes your layout and does a fantastic job. But by itself, screen size is a vague indicator of context. We need more real-time data, like time of day and location.

Now that we’ve got a handle on mobile layouts, I’m left thinking about what Paul Gelb of Razorfish said recently,

“In two years or so we are planning for a shift where we will segment not by device anymore but by behavioral context. Is it at home, is it on the go…”

Update: when compared to the control, email 1 in this series saw a 3x lift in click-to-open rate. Comparing mobile vs. desktop views, 12% of those who opened the redesigned email on a mobile clicked and 6% who opened on the desktop clicked.

11.04% of the subscribers who read either the second or third email in the series had not read the first one.


12 Responses to “Media query trifecta”

  • Trav
    September 23rd, 2011 09:08

    This is a great write-up, thank you very much. I’ve been contemplating some layouts like this, and one thing that concerns me is the chance that the <style> tags get stripped by certain clients. Did you have any issues with that?

  • Katie
    September 23rd, 2011 14:53

    Congratulations on understanding your audience and adapting your content to fit them. Great article outlining the steps you took.

  • Anna Yeaman
    September 24th, 2011 17:08

    Cheers Katie! Hope it was useful…

  • Adam Q. Holden-Bache
    September 26th, 2011 06:33

    Great article Anna. Really nice work. We’ve also run into the image use problems with @media, but your workarounds here are quite clever and helpful.

    Would you be willing to share your QA process for this? Are you using real world devices or using a third party testing service like Litmus or Email on Acid? Or possibly a combination of both?

    Keep up the good work- love your posts.


  • Scott Hardigree
    September 26th, 2011 08:58

    Hi Anna - Another really great post; thanks for sharing all of your hard work.

  • Anna Yeaman
    September 26th, 2011 09:13

    Thanks Adam,

    We used real devices for this, I’ve also mainly used DeviceAnywhere in the past for mobile QA.

    If you can I’d supplement preview tools like Litmus, with at least one real device. Your layout might look ok in a static preview, but you can miss nuances without getting your fingers & thumbs all over it (plus test load times ect). If you’re just looking for a testing tool, you can use an iPod touch as an iPhone stand in…

  • Anna Yeaman
    September 26th, 2011 09:16

    Cheers Scott, enjoyed your imageless email btw!

  • Aaron
    September 26th, 2011 10:21

    Hi Trav,

    I did not run into this issue because the desktop version CSS is coded inline. So, I coded the email to be compatible on all major email-clients for the desktop, and then I added the media query CSS and called it into the HTML. The @media CSS is not recognized until the browsing screen is 480 pixels wide and over-rides the inline CSS with the use of “!important”. So the iPhone and Android versions use the @media CSS when rendering the email.

    - Aaron

  • John
    October 4th, 2011 09:44

    Awesome post, however, are there any issues with duplicate ID’s in html email?

  • John Brett
    October 9th, 2011 06:36

    “With 90% of mobile users on iOS, ” - seriously?

  • Anna Yeaman
    October 9th, 2011 10:17

    Hey John,

    I know, whenever we see mobile email reports they bear little relation to comScores US mobile marketshare stats. How can Android be 2%?!

    It would have been more accurate to say, “With 90% of SavvyMom’s TRACKED mobile users on iOS”. Images need to be enabled for a mobile email open to be recorded. So devices like the iPhone and iPad - which don’t block images by default - have the advantage. Android and BB usage stats are always heavily understated.

    It’s why I tell my clients to use mobile web analytics on their “Mobile version”, survey’s, website stats and research the demographics of each platform as well as tools like Litmus.

    I was getting a bit tired of infographics but that’s a good one, thanks!

  • Stephanie Miller
    October 31st, 2012 08:20

    Hi Anna, this is so great. You are, as always, incredibly generous with your knowledge and sharing what you have learned. I think Responsive Design is great, but it’s also a pretty big investmnt. Do you see more and more marketers taking advantage?

    Also, I wonder if you are okay if I borrow some of this (with full attribution) for a presentation I’m doing.

    Please let me know!


Leave a comment: