Optimizing your email for mobile devices with the @media query

Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the “full web” experience, there are really not a lot of popular sites left that don’t include a mobile stylesheet for small screens.

It seems that mobile stylesheets haven’t proven to be quite as popular in email, despite the advantages they provide to devices that make use of the @media query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using @media in Campaign Monitor.

Why optimize HTML email for mobile?

To be honest, viewing HTML email on a mobile device can be plain fiddly. Even on the iPhone, it’s common to have text automatically rescaled to a size that’s near unreadable, or in a way that can break your design. Wide emails often require horizontal scrolling, especially when there’s a large image involved.

By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. Devices that don’t recognize @media will degrade gracefully by simply reverting to your default styles.

How does this work?

We’ve done it before, but lets walk through Panic software’s example again. Here’s the design (on the iPhone):

{title}

And here’s the mobile stylesheet in the <head> section of the email:

@media only screen and (max-device-width: 480px) {
     .page {
          padding: 0px 10px 5px 10px !important;
     }
     body {
          padding: 10px !important;
     }
     #airmail-line {
          margin: 0 -10px !important;
} .header { font-size: 16px !important; } .headline { font-size: 20px !important; } #screenshot { width: 275px; height: 190px; } }

Lets walk through this. First of all, there’s the condition:

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

What this says is, “Only use these styles if the screen dimensions are 480px or less” (480px being the width of a “flipped” iPhone’s display). Then, using the !important declaration to override any inline styles, change the padding of the body and the .page DIV, alongside the font-size of certain text when these styles are invoked. This maintains the pretty layout of the email and keeps the headings from being too large on the small screen.

What’s really cool is how the #screenshot is resized to fit the display. Here’s the screenshot at its original 550 x 380px in a desktop email client:

{title}

And here it is resized to 275 x 190px for a mobile display:

iPhone screenshot

Resizing your images can prevent the sort of layout breakage, or unnecessary scrolling that can occur when an image is too large for the mobile devices’ viewport.

A final tip is the addition of -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text. For example, the iPhone scales small fonts up to 12px, so it can be used to override this. That said, all your text should be above 12px and desirably, 17-22px. Anna Yeaman at Style Campaign has an excellent write-up on text sizing which wraps this up nicely.

This is great, but which devices can display mobile stylesheets?

The good news is that devices with fairly solid CSS3 support - the iPhone, Android and Palm, which all use Webkit - have no trouble with using CSS enclosed in a @media only screen and (max-device-width: 480px) { ... } media query. Here’s the same email in the Android and Palm Pre’s default mail clients:

Android vs. Palm

We tested an alternate declaration, @media handheld { ... } on the above devices devices (iPhone OS 3, Android, Palm) and more (Blackberry 8900 Curve, Nokia N96, Pocket PC, Samsung Intrepid), without luck.

And finally, a tip for use in Campaign Monitor…

We usually recommend that you move a copy of your campaign CSS inline. In this case, as we’re using the @media query to override any inline styles, it’s better to make your default styles inline from the start and add your @media styles to within the <head> section of your email. Upon import of your campaign, uncheck “Move a copy of my CSS inline” and you’ll be done in time for dinner.

With growth in the iPhone’s market share not letting up any time soon, we anticipate that we’re to see this technique used more often. After all, it’s an elegant, non-destructive snippet of code that can make your emails just as much of a pleasure to read on mobile devices as it is on the big screen.

Posted by Ros Hodgekiss

17 Comments

  • Ed
    16th June

    Very handy. I found in testing that Yahoo! ignores the @media query and applies styles meant for mobiles. I fixed this by linking to an external stylesheet, which meant that the iPhone (and I assume Android etc) read the sheet whilst Yahoo! ignored it as desired.

    Another tip if you want scalable images is to set their width in % - e.g. for Panic’s screenshot set it to 100%, and it will fill the screen in both landscape and portrait. Just let desktop clients see the images at their actual size. It’s also worth mentioning that you can design using tables and apply class/ids to tables and cells. Because you set the width of these in the tags themselves without using the style property at all, the @media rules don’t even need !important adding to them.

  • Pedro Manacas
    17th June

    Great article Ros ;)

  • Gregg Oldring
    17th June

    This is a great idea! I think we’ll still want to have a “Mobile Version” link for older or crappy smartphones for a few years though. I haven’t been able to test BlackBerry 6 or Windows Mobile 7 yet. Let’s hope they do a better job rendering email than their predecessors!

  • Ros Hodgekiss
    17th June

    Thanks everyone, this has been great feedback :)

    Ed - Brilliant, those are some great tips. I’ll have to give them a test shortly. You never know, they could form a new blog post!

    Gregg - It’s true, there’s still a while yet to go for mobile phones. Hopefully this will change soon, considering that Apple is teetering on dethroning Nokia as the most purchased handset in Australia and others. I’ll let you know if I get a chance to test these devices, too - fingers crossed!

  • Chris
    20th June

    Have you considered updating your algorithm for in-lining the styles to exclude the @media section (or similar)?

  • Ros Hodgekiss
    21st June

    Hi Chris, that’s a good call. I’ll definitely suggest that to our devs for a future update!

  • foxinni
    29th June

    Awesome. Lots of details and the end product look spectacular!

  • David McDonald
    30th June

    Great article. More info on CSS3 media queries can also be found in a recent presentation by Russ Weakley.

  • Nico Koepke
    1st July

    While technically a great article, the solution does not overcome the core fact that Mobile is a DIFFERENT channel than EMAIL, and just formatting the copy to become scrollable on a small screen will not do the trick - you then have click-throughs to WEBSITES that again won;t work on Mobile etc. It is a major and increasing issue for our clients, and we - as a Mobile AND Email service provider - are working hard to manage the transition - with the risk of others here disagreeing, we at KODIME believe Mobile will be 1st touchpoint - a view shared by Google’s CEO. We have some campaigns seeing >30% open rates on iPhone - that’s for EMAILs, not SMS.

  • Reuben
    10th July

    “Why optimize HTML email for mobile” versus creating a separate webpage designed specifically for mobile using Wireless Markup Language (WML)?

    For example, I recently received a HTML e-mail from JCrew.com which included a link in the header to “View this email on a mobile device.”  The link referred to a webpage which appeared to be designed in WML, specifically for viewing from mobile devices.

    Do you recommend using WML to accommodate modile users, or is it best just to send the “optimized” HTML e-mail described in this article along with a text-based version (for those e-mail clients that do not allow HTML-based e-mails)?

  • Ros Hodgekiss
    12th July

    Hi Reuben, that one is fairly subjective. WAP sites have been largely superseded, except in cases where subscribers are largely using older phones. Sitepoint has a good article on designing for mobile which touches on that.

    Personally, I think having a solid text-version of your email is mandatory, not just for mobile subscribers. You might also want to consider using the mobile stylesheet techniques mentioned in this article on your landing pages, to optimize them for the small screen, while not limiting the experience for everyone else. That would be certainly less work than creating a WAP site, anyway :)

  • Reuben
    13th July

    I agree… thanks for your feedback Ros, and the great article.

  • daveosty
    12th August

    Does this work for survey/forms for data collection? I don’t have an iphone to test with and I have a client who sends out alot of surveys and they want the surveys to work on mobile devices as well as email on the web.

  • Ros Hodgekiss
    13th August

    Hi daveosty, if you don’t have a mobile device to test with, I’d personally skip the hand-coding and use a service like Wufoo to create your surveys and forms. They’ve already done the legwork to ensure that their pages look great across as many platforms as possible (plus, they’re easy to sync with Campaign Monitor)!

  • Aric Harris
    14th August

    It appears this article is designed for single column layouts. What if the email is a two column layout that needs to be cross-browser compatible for clients like Hotmail (or Windows Live), GMail, or Outlook 2007. The mentioned email clients have poor/no CSS within HTML emails, and the HTML often has to be written in a table based layout to account for those clients.

    I wind up, typically, having to support the email clients I have mentioned more than the email clients that have average to good support of CSS in HTML emails.

    Any suggestions on how to optimize for mobile in this case? Or is the best path just to create the email as I usually would.

  • Michael
    24th August

    Are those screenshots taken natively on each platform or in an emulator? I’m having trouble reproducing these results quite this well.

  • Ros Hodgekiss
    24th August

    Hi Aric, sorry for not getting back to you earlier. For mobile clients I’d recommend that you stick to a single column layout. I’d certainly use tables if you want to do otherwise, as you can’t bank on floats/anything other than static positioning to work.

    Michael - iPhone screenshots were taken in iOS3. Android and Palm screenshots were taken in an emulator for convenience, however you can contact our support team as we can possibly check your code on the real thing. Let us know if there’s anything else we can do to help out :)

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

Create an account