CSS support in email: A CSS3, web and mobile client update for 2011

It’s taken 9 desktop clients, 5 mobile handsets, 4 webmail accounts and a solid week of hard labor, but we’ve finally updated our ever-popular guide to CSS support in email to reflect the email clients that your subscribers are using today. Covering the gamut of CSS selectors and properties as well as some useful tidbits along the way, it’s a must read for anyone that’s elbows-deep in coding HTML email.

What’s new in the 2011 update

Rendering issues in Android Gmail If you’ve had a chance to check out our (also) newly-updated email client popularity report, you would have noticed that mobile clients are making a huge impact on the scene. With roughly 1-in-5 emails being read on a mobile device these days, it’s easy to see why optimizing your email newsletters for the iPhone, Android and others has quickly shifted from being a ‘nice-to-have’ item, to being standard. To reflect this shift, we’ve updated our CSS support guide to give you the skinny on the following mobile OS’s - Android, BlackBerry 6, HP webOS 2 (Palm Pre), iOS 4 and Windows Phone 7.

There have been considerable changes on the webmail scene since our last update, such as the recent rollout of Yahoo! Mail Beta and the demolition of MySpace (which we’ve dropped from the guide). However, some things have remained the same. Gmail, as always, strips the <head> tags from email newsletters and continues to be picky with whatever’s left. While there’s no doubt that Gmail’s record on CSS support has improved over time, the legacy has now extended to the Gmail client for Android (pictured). As a result, many of our beloved mobile optimizations can’t be extended to these handsets - a pain point, given that the Gmail client is undoubtedly popular amongst Android users.

Thankfully on the mobile front, it isn’t all bad news. On the upside, CSS support for newer BlackBerry handsets (ie. Bold, Curve) and the Palm Pre is surprisingly extensive, with both handset makes passing our barrage of CSS2 and CSS3 tests as good as any iPhone. It all goes to show that after years in the (text-only) dark, things can change for the better. You can take a look at the full results for these mobile clients in the guide.

Still slim pickings for CSS3

Since our CSS3 mini-update, properties like text-shadow have continued to persist as a Webkit-only affair. While our new guide shows that a few properties work pretty well on mobile clients (notably -webkit-border-radius), we still recommend that they be applied with discretion. Take a look at Panic’s email newsletters for a good primer on safely using CSS3 by targeting specific email clients.

Using the guide for easy debugging

It’s blink-or-you’ll-miss-it, so I wanted to highlight that both the updated web guide and more importantly, the spreadsheet are littered with comments in regards to peculiarities we came across while testing. We’ve paired many of the results (especially the ‘Partial/Buggy’ ones) with explanations - everything from whether a specific attribute didn’t work, to the property being wiped out due to say, background images not being supported. This is an extra little step we took this time around and I hope it helps you ironing out the inevitable quirks that come with adding CSS to HTML email designs. Scoot over to our updated guide to CSS support in email to check our our handiwork.

Finally, we’ve provided the long-form of the CSS guide as an Excel spreadsheet and as a PDF. In the future, we’re hoping to provide other formats that are easier on the eyes, so we’d love your feedback on how we can present this data in a way that can be easily digested by you. Would you love to see it presented on a poster, or can we streamline it online? Let us know your thoughts in the comments below.

Posted by Ros Hodgekiss

8 Comments

  • Patrick Kuntz
    23rd June

    I take a screenshot of the table just as it appears on the website and print that out on 12x18 paper. Basically a poster. Sorry, but the PDF and Excel versions are too ugly to have any place in a designer’s workspace.

  • Mathew Patterson
    23rd June

    Hey Patrick,

    We definitely agree, that’s why we’re looking for people to let us know what format they’d like to see most. We’d then design a specific layout to suit. Sounds like a nice poster would be what you’d like?

  • Patrick Kuntz
    24th June

    A poster would be great. Maybe something that can be printed out and replaced whenever there are updates. The HTML version on your site looks quite nice. This is such an essential resource. Thanks so much for creating it.

  • James Cready
    24th June

    It’s disappointing that this chart has now just turned into “CSS support in email (if you’re using Campaign Monitor)”

    Please remove the third footnote and adjust the chart accordingly. No, Gmail does not support <link> or <style> anywhere, just because Campaign Monitor has a tool to move the styles inline does not mean Gmail supports them.

  • Steven Weathers
    24th June

    James realize you are on campaign monitor’s blog, thus they are going to be focusing on their product rather than in general.

  • Regina Gold
    24th June

    Vertical-align can work in Outlookk 2007/2010 for numerical increments plus or minus. Only way I can get ®s smaller and lined up correctly. Otherwise, yes, it doesn’t work.

  • Ros Hodgekiss
    24th June

    @James - A lot of folks move their CSS inline using tools like the Inline Styler, prior to importing their campaigns into email marketing services other than Campaign Monitor. For this reason, I wanted to include this note to prompt email designers to inline their styles, should they choose to take this approach. Your point is valid, though and to prevent further confusion we’ll be updating the guide shortly to change these results.

    @Regina - Interesting, I’ll look into this. I think I’ve used line-height in the past to achieve the same :)

  • Vincent
    21st July

    line-height work in outlook 2007 with %

    but with px or number it doesn’t work if it smaller the line-height.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account