Browse by...
Home Resources Blog

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 surprising 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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free