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
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.