Optimizing emails for mobile 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:

{title}

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 the @media query. Here’s the same email in the Android and Palm Pre’s default mail clients:

{title}

We also tested @media handheld { ... } on these 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 via email from SwBratcher’s Posts

Subscribe

Get notified when new posts show up. This is sometime slow, sometimes not, sometimes professional and sometimes just my personal interest.

No comments yet.

Leave a Reply