Mobile email design in practice: the new Campaign Monitor newsletter

For the latest mobile email tips and advice, visit our Guide to Responsive Email Design.

To coincide with our Worldview announcement last week, we also put together a fresh new design for our regular monthly newsletter. I thought it might be interesting to walk through the redesign process and highlight some of the interesting techniques we went for, especially on the mobile side.

Before starting on a new design for our newsletter, I spent some time looking at the reports for the last few issues to see if there were any hints about what we could improve. One of the more suprising discoveries I made was in our email client report. I was amazed at just how many subscribers were opening our newsletter on a mobile device. The iPhone alone accounted for close to 15% of our subscribers.

Email client report showing 15% iPhone usage

Once you throw in Android, Palm and the iPod Touch this jumps a couple more percent. We’ve shared some great techniques and examples of mobile optimization before, and it was clearly time to start practising what we preach.

The new design

One of the things I liked least about our old design was that it didn’t really allow us to more heavily promote our bigger announcements. The new design also puts our social sharing tools in a more prominent position and did a better job exposing the great email designs we feature in our gallery.

Here’s what we finished up with. Click to see the coded version.

The new design - click to see the full version

Because we kept the design simple, I managed to get it looking great in all the major email clients (even, shudder, Lotus Notes). You can view the results from a design and spam test I did before sending to see exactly how it looks on 20+ web, desktop and mobile clients.

Simple steps to mobile optimization

By using the @media query and some design common sense, I was able to produce a tweaked design for mobile devices that was easy to scan and looks great. Here’s a cropped version of the finished product on a rather stretched iPhone (click to view in full).

Here’s the same email in the Android email client, which unlike the Android Gmail client, has full support for the @media query.

The mobile optimized email on the Android email client

While you’re left with a much more streamlined design for mobile devices, this targeted version was actually fairly straightforward to put together. It’s all about focusing on a few important areas.

Target with the @media query

By adding a simple @media query to my CSS, I was able to provide custom CSS that only mobile devices (and Yahoo!, more on that later) would see. Here’s a simplified version of the code I used:

@media only screen and (max-device-width: 480px) { 
    .hide { display: none !important; }
    .table, .cell { width: 300px !important; }
    .divider { height: 1px !important; }
 }

Using this approach I can adjust widths, tweak padding and hide content altogether for smaller screens. Notice you also need to add the !important declaration to ensure the @media query supersedes any inline CSS you have for desktop and web-based email clients.

Tighten your cell widths

While the regular version of our newsletter is 600 pixels wide, the mobile version is only half that. By adding a class to each table and cell in my design that sets the width at 600 pixels, the table and cell classes in my @media query will automatically halve it to 300 pixels for mobile devices. This means the text is clearly readable as soon as it loads. There’s no need for your subscriber to zoom in or pan around your email to try and read your message. It’s a much better experience.

Adjust larger images accordingly

I applied special classes to a number of images in my design. The Worldview screenshot and gallery image widths were automatically halved with CSS. Both the iPhone and Android do a great job of scaling down images without any nasty artifacts, especially if you’re reducing the width by exactly 50%.

To get the Campaign Monitor logo looking as crisp as possible on the iPhone 4 retina display, I actually created the image at twice the size I planned on displaying it. Again, by sticking to exactly double the size it looks just the same in regular email clients and super crisp on an iPhone 4.

Turn off webkit font resizing

Webkit (the browser rendering your HTML emails on the iPhone, Android and Palm devices) has a great feature where it will automatically adjust text sizes as the viewport changes to give you the best reading experience. But, now that you’ve gone to all this trouble to get your widths and font-sizes right for a mobile device, I recommend turning off font resizing.

This is done by applying the following CSS inline to your body tag.

<body style="-webkit-text-size-adjust:none;">

Hide low priority content

One of the main aims of a mobile version of your email should be to ensure it’s as scannable and easy to read as possible. This often means that some of the secondary content in your newsletter should be hidden to keep the focus on what’s most important.

By applying a simple hide class to any image, paragraph or entire table I didn’t think was top priority, it was automatically hidden from the mobile version. Here are some of the elements I deemed unworthy for the mobile version:

  • The web version and preference center links - Traditionally you might put high priority on things like a link to view the email in a browser for a mobile device. But by optimising the design, the version you’re sending is actually the best way possible for it to be viewed.
  • Social sharing links - This was a tough call, but I felt that in order to “Like” us on Facebook, the subscriber would need to be logged into Facebook on their phone (instead of just using the Facebook app). Same goes for sharing on Twitter or using our forward to a friend feature. These are easy on a desktop, but possibly too involved on a mobile device. I might try and include it in the next issue and see what the reports show me.
  • Additional footer content - The links to our Flickr, Twitter and Facebook pages were nice-to-haves, but didn’t have a place in the mobile version. I actually made the mistake of hiding our address too, but will be sure to include that in the next issue for CAN-SPAM compliance.
  • The month name - I figured our readers have got a pretty good hold on that already.

Stick to a single column

To make the process of optimizing our newsletter as painless as possible, I deliberately opted for a single column design. Because we need to rely on nested tables these days, it makes it very difficult to re-order columns or stack blocks of content on top of each other. This is relatively easy with CSS (open this site and then resize your browser), but next to impossible given the rigidity of HTML tables.

If you do go for a two or three column design, you still have the option of simply hiding certain columns altogether. If you’re using a column for secondary content that isn’t important, this might be a great option for your mobile version anyway.

Yahoo! Mail won’t come to the party

Frustratingly, it looks like the current release of Yahoo!’s email client isn’t processing the @media query correctly and is applying it instead of ignoring it. This means that our Yahoo! subscribers are also seeing the mobile optimized version by default.

I was originally bothered by this, but given the fact that only 1.6% of our subscribers use Yahoo! Mail and the mobile version still looks great, I learned to live with it. I’d recommend checking your own email client stats to see the split between Yahoo! and mobile clients for your own list before making that call yourself.

Update: We’ve found a fix to the Yahoo! Mail’s @media woes - read about it in our blog.

Yours to download and tweak

I’ve always found the best way to learn new techniques is to peek under the hood at other implementations and have a go yourself. To get the ball rolling, we’re making our new template free to download and modify as you see fit. No need to link back to us or attribute in any way, we just hope it encourages more email designers to go down this path.

Download the templateDownload the mobile optimized template (zip file, 147kb)

The most important thing I learned during this process was that it’s actually quite simple to create a mobile version of your email. Throw in the @media query, start tweaking widths and hiding the less important stuff. Plus, if you’re re-using the same template over and over, you only need to do this once. As more of your subscribers start reading your emails on a mobile device, they’ll thank you for it.

Posted by David Greiner

34 Comments

  • Luke Hinchliffe
    5th April

    I did notice the last email from CM was very tidy on the iPhone. I will be trying out the media query technique in our next campaign. Nice one guys!

  • W.Heinen
    5th April

    Awesome! So the !important overrules the inline styles that are necessary for Gmail?

  • David Greiner
    6th April

    @Luke, awesome. Let us know how it goes.

    @W.Heinen, that’s right. Gmail looks at the inline CSS, and because it ignores anything in the style tag, it overlooks the media query altogether. Win win.

  • Adrian Hill
    6th April

    Love it. Beautiful HTML email continues to move forward thanks to Campaign Monitor.

  • Fred Carlsen
    6th April

    I use Google Apps Gmail, and it doesn’t scale correctly there. Is there a difference between the two versions?

  • Brian Allen
    6th April

    Looks great! From what I can tell, blackberry does not support @media queries. Is that correct? We have quite a few clients with that and wanted to be able to speak accurately.

  • David Greiner
    6th April

    @Adrian, thanks a lot. This was a really fun process for me, it’s been too long.

    @Fred, I use Google Apps Gmail too, and the email came out looking good in all our testing. Here’s what I see, are you getting a different result? From memory Google serves slightly different content depending on your browser, but I made sure I checked in Chrome, Firefox, IE and Safari just to be safe.

    @Brian, unfortunately BlackBerry offers no support for @media queries right now, and there is no way to target the device that I’m aware of. Having said that, there’s a very good chance the next generation of smartphones and tablets from BlackBerry will offer much improved support for these kinds of technologies. They’re just not quite there yet.

  • Kevin
    6th April

    This question is from a non-techie so excuse any misuse or terms or sheer stupidness.

    Do you think it is possible/feasible to build a web based tool that imports existing emails/e-newsletters and automatically adds the necessary scripting and design changes you suggest here to create mobile friendly versions?

    Presumably this would require the end client accepting certain, best practice driven decisions (e.g. image resizing, one column).  In other words, something for emails that is conceptually akin to what http://bmobilized.com/index.php does for website to mobile website conversion.

  • Damien Buckley
    6th April

    I absolutely love this - and timely too - our e-newsletter is getting long a bit long in the tooth. Thanks for sharing.

  • Rich Simisker
    7th April

    My only gripe: the universal “-webkit-text-size-adjust:none” override for the body, which has accessibility consequences in desktop Webkit browsers. I’ve not toyed with it yet, but I imagine you could use media queries to target mobile devices only.

    Having said that, I’m really digging the new design. Simple, clean, flexible, and a quiet structure to let the content shine. Lovely :)

  • David Greiner
    7th April

    @Ric, that’s a good call. There’s no reason why that override can’t only be applied via the @media query so it only impacts mobile devices. Nice idea, I’ll make sure I try that for the next issue.

  • Stefan Velthuys
    8th April

    There is a way to prevent Yahoo from displaying the mobile version.
    With the CSS3 :not() selector you could exclude the mobile-styles in Yahoo! Mail.

    instead of
    .hide { display: none !important; }
    it would look like this:
    div:not(#cg_msg_content) .hide { display: none !important; }

    This way, the styles would only be applied if the surrounding div does not have the id “cg_msg_content”
    Which is the case for all other clients than Yahoo! Mail.

    Beautiful Newsletter by the way!

  • Rad Dougall
    9th April

    Top work David, had never considered using @media in an HTML email given the difficulties with even the most simplest of HTML and CSS sometimes.

    Looks great and now I’m going to look at it actually on my iPhone :)

  • Shaf Syed
    9th April

    @David: A timely article. I just got a new job and the optimizing the mobile representation of the newsletters is on the long list. An item which still confuses me is that the newsletters are constructed using Lyris list Manager 10 and currently all the graphics and layout is stripped on mobile email. Is the solution one which can be applied in the Lyris environment or is it exclusive to yours only? Thanks.

  • andjules
    10th April

    I notice you use a lot of spacer.gif images in the non-mobile part. What’s the latest best-practice on this?

  • Ed Melly
    11th April

    Similar to @Stefan’s solution, you can ensure that Yahoo! ignores the styles by using attribute selectors within your media query, instead of regular ids/classes. So instead of this:

    .table, .cell { width: 300px !important; }

    use this:

    table[class=table], td[class=cell] { width: 300px !important; }

    This is only slightly less readable than the original, and seems more logical to me than using the :not selector. Of course, it is a bit hacky, but in my testing works as required on the iPhone/native Android clients. Worse case scenario is that Yahoo! adds in support for the attribute selector in future and starts showing the mobile styles.

  • Ros Hodgekiss
    14th April

    @Ed - This is an excellent solution. So excellent, that I’ll be writing a blog post on it shortly. Stay tuned.

    @Stefan - Excellent solution as well, however I remember seeing a few issues on the iPhone.

    @Shaf - We can’t comment on how Lyris handles @media queries, I’m sorry to say. From what you describe, it sounds like they’re most likely getting stripped out of CSS styles upon import.

    @andjules - There are most certainly pros and cons to using spacer images. On the upside, they’re often essential to maintaining layouts in email clients with poor support for margins/padding (and IE, which doesn’t like empty table cells). However, on the downside, they can mess up designs when images are turned off. In this case, we’ve used them sparingly for layout control - in conjunction with the .hide class, they provide a convenient way to toggle between a ‘spaced out’ desktop layout and a compressed mobile layout. I don’t think there is another method to achieve this reliably.

  • Jay
    5th May

    Anyone interested in learning more about code for mobile devices should also check out: http://lessframework.com/

  • gevenden
    5th May

    Just great info…. And always impressed with your balance of design and usability of your email designs.  One feedback although is that when a link is clicked it goes to your we site or blog that is not mobile ready ... I think this would ultimately improve your outcome ... After all the real info readers are after is after the ‘click’

    Great work as usual and thanks for sharing!

  • Nate Klaiber
    5th May

    This looks great. I first checked the email out on the phone, and it looked beautiful - so I saved it to check it in Mail when I was in front of my computer. It’s the best looking and organized email I have read in a while. I love the colored separators to the left - which look especially nice in the mobile version.

    But the real question is, where did you get an iPhone with that height? That is one long iPhone. :)

  • Jamie Richardson
    5th May

    Really thorough and interesting piece - thanks!

  • Tadas Sasnauskas
    6th May

    Why stick with those tables? My tip would be use nice and logical markup, 1 column and have the following on container css:

    width: 100%; max-width: 720px; margin: 0 auto;

    Result? 100% used space on mobile + very nice and readable 720px width centered column on computer.

  • mike
    6th May

    I would love to see an iPhone that tall.

  • Susie
    11th May

    Is there a way to stop iPhone from turning dates blue?

  • Dale Napier
    11th May

    I downloaded the template a few days ago and I was creating 3 x 200 pixel wide cells with images in it. When I added a media query class to change them to 100px wide, there was still space around them.

    I double checked the original template file - the final outputted width is actually 325px? Isn’t it meant to be 300px?

    In debugging, I found it was the middle-section gallery causing the problem:

    Full size:
    5*( 107 px image + 10px cellpadding ) + 10px left border-color+gap + 5px spare on right hand side = 600px (perfect width)

    Half size:
    5*( 53 px image + 10px cellpadding ) + 10px left border-color+gap + 0px spare on right hand side = 325px (not perfect halve)

    This then causes all tables set to 100% to fill to the 325px width.

    I can understand why you did it, as cellpadding is hard to change with media query css, but would have saved me a couple of hours wracking my brains out. Maybe a warning/best practice tip should be included in this post?

  • Ros Hodgekiss
    11th May

    @Susie - This is something that’s built into iPhone Mail, to make it easy for recipients to create calendar events. To my knowledge, it can’t be disabled.

    @Dale - That’s a good gotcha there. The truth is that if you look at the @media query, the output width is not 300px. The width of an iPhone display is 320px - if you look at the classes ‘promotable’ and ‘promocell’, you will see that we’ve set the width to 325px to achieve a full-width look. The ‘table’ class should have also been 325px too by the look of things. Thanks for pointing this out - we didn’t perfectly halve the layout to 300px, because it would have then been too narrow.

    Note that cellpadding is far more reliable than margin and padding across a variety of email clients. It can’t be set using an @media query, so it’s wise to ensure that it looks good at both full and ‘half’ width :)

  • Dale Napier
    12th May

    Thanks for the explanation Ros. I’m not saying cellpadding is a bad thing! (In fact, it’s one of the most useable things when designing for email). I think a good tip when reducing email widths for mobile devices is to take care with cellpadding as they are fixed and adjust image scale (be it exactly halve or as near to as possible) accordingly.

    The whole reason I brought it up is because all throughout the post, it was indicated it would be halved exactly to 300px (Table width: 300px etc) and when I tried to create new columns based off 300px in the downloaded template, I ran into trouble. (Even in the template, the table width is set to 300px, but promotable is set to 325px?)

    Doesn’t the iPhone 4 scale the 325px to full width anyway? So wouldn’t iPhone 3G/S would scale a 300px width layout to 320px? Not sure what you mean by too narrow.

    Thanks for the reply!

  • Nathan
    17th May

    I’ve sent out some tests using your template & it hasn’t been rendering as intended on some Android OS phones. Any thoughts?

  • John
    20th May

    Does anyone find that the extra coding makes this get picked up by spam filters when sending?

  • Eran Galperin
    31st May

    How come Apple Mail accounts for 30% of the mail clients while Macs account for 4% of computers? makes me doubt the other numbers as well

  • David Greiner
    31st May

    @Eran, that email client report is for the Campaign Monitor subscriber list that we send our regular monthly newsletter to, it’s not a reflection of the entire email client market. We build our software for designers, and a big percentage of those work on Macs, which is the reason for the unusual numbers.

    When you send your own campaign with us, we’ll show you exactly which email clients your specific subscribers are using, so you know exactly which clients to test in.

  • Patrick Desmarais
    2nd June

    David, is there any way through the api that I could get the email client usage stats for ALL the campaigns sent through our account (and subaccounts ideally) ?
    We have a dashboard which includes browser stats acquired from Google Analytics for all our web properties and our clients’ properties to which we have access, and it would be just AWESOME if we could get the same kind of data for email client usage from CM…

    Thanks!

  • Ros Hodgekiss
    3rd June

    @Patrick - Sorry about the late response here. This information isn’t available via the API at present, so I’ve added your vote for it internally. We’ll be in touch if it’s something we consider releasing in the future.

    If there’s anything else we can do to assist with your dashboard, please get in touch with our team. We’re always keen to hear about ways we can improve our API and our service in general.

  • don@csschops.com
    17th June

    Thanks David. Excellent article! Really useful work.

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

Create an account