BLOG - HOW TO

Optimizing Your Email for Mobile Devices with the @Media Query

ROS HODGEKISS - JUN 16, 2010

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:

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:

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.

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.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Request a demo