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 query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using 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 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 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 section of the email:
Lets walk through this. First of all, there's the condition:
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 declaration to override any inline styles, change the padding of the and the 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 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 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 query. Here's the same email in the Android and Palm Pre's default mail clients:
We also tested 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 query to override any inline styles, it's better to make your default styles inline from the start and add your styles to within the 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.
http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
