Wait, this is old! For the latest information on responsive techniques and email client support, take a look at our Guide to Responsive Email Design.

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):


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:


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. However, Campaign Monitor detects any media queries in campaigns on import – and will keep these in the <head>, so that they continue to work, while moving all other CSS styles inline.

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.

  • http://www.campaignmonitor.com Ros Hodgekiss

    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 :)

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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 :)

  • Reuben

    “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)?

  • http://www.kodime.com Nico Koepke

    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

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

  • http://www.davidmcdonald.org David McDonald

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

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

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

  • Chris

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

  • http://foxinni.com foxinni

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

  • Pedro Manacas

    Great article Ros 😉

  • http://isendemailforaliving.blogspot.com Gregg Oldring

    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!

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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!

  • Ed

    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.

  • http://www.antics.com Aric Harris

    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

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

  • daveosty

    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.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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)!

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free