The CSS support in Email today

When I mentioned that a lot of CSS properties out there work fine in many email clients, I wasn’t trying to be vague. Thankfully, the research into what works and what doesn’t has already been done. You need only skim this guide to CSS support in email clients to see what properties are within and off limits. Or just know that most of your CSS rendering troubles will come from Outlook 2010, Lotus Notes and Gmail, due to their refusal to do anything useful with CSS style sheets.

These issues are nothing new. Indeed, the battle for market share between email clients that play nice with CSS versus those that don’t has been pitched for years now. But progress is being made. Looking at the data from over 3 billion emails sent, we found that mobile email clients have gained ground dramatically with the growth of mobile professionals. In fact, one in five emails are now opened on a mobile device. Here is how desktop, Web and mobile email clients have fared comparatively over the last two years:

Desktop, Web and mobile email client market share, 2009 to 2011.

Mobile’s ascent is great news for email designers everywhere for one reason: roughly 75% of mobile email is read on an iOS device. iOS devices use the Webkit rendering engine, which means they can display really nice-looking HTML emails.

Our friends at Panic (the creators of such popular Mac titles as Coda and Transmit) were well aware of this when they got started on their email announcements. As purveyors of Mac software, they can pretty much always count on their emails being read in Webkit-powered email clients like Apple Mail and the iPhone. As a result, they’ve been able to pull a lot of CSS3 trickery out of the toolbox, including border-radius and text-shadow:

But what really impressed me was their use of CSS3 animation. Check out the mesmerizing glowing button effect in this video:

To sate your curiosity, here’s the code they used to achieve this effect:

And you thought HTML email was a boring medium? Well, to temper things a bit, CSS3 still has very limited support beyond a handful of Webkit-powered email clients, so use it with discretion. But with that in mind, let’s look at Panic’s newsletter again, this time on the iPhone. For comparison, here it is both with and without a @media query (which calls the mobile style sheet):

Let’s now look at how you can optimize your email newsletters for small displays as well.