The State of CSS3 in Email Templates

On the heels of some of our recent findings regarding the state of CSS in email, I reckoned it was high time to shake things up a bit. So here goes – CSS3 in email lives. Ok, so I’m sorry if I made you drop your toast, there. I know you’re thinking, “But… It’s still largely experimental… In the browser, to boot!” Yes, CSS3 support is even more fickle amongst a swag of email clients that can’t even get CSS2 right. But that doesn’t mean that it’s too soon to touch any of it.

In this article, I’ll go through two properties you can use in your email templates, alongside some practical examples. So, brush off your toast and let’s get down to business.

Let’s talk CSS2 in Email.

If you’ve been designing HTML email templates for a while now, you will know that it’s often near-impossible to predict what sort of CSS-related quirks will display when testing your design across the major email clients. For example, Gmail has been notorious for stripping any CSS that isn’t inline (and for a while, not recognizing table cellpadding & cellspacing), while some clients simply choose to do away with styles altogether.

If you’re new to designing HTML email templates, this is probably the most foreboding thing you can possibly read. But fear not, there’s lots of info out there to bring you up to speed. Give 24ways’ ‘Rock Solid HTML Emails‘ a skim and you will see that there’s no reason to crank up the zefrank. It’s manageable.

Anyway, given that designers already have enough troubles with CSS2 support in email clients, shouldn’t CSS3 be a bit of a pipe dream? Well, read on.

Is it too Early to be Using CSS3 in Email?

Yes and no. For the yes case, there’s a couple of popular email clients that have pretty robust CSS3 support (more on that later). The great news is that a fair few of the CSS3 properties that display in these clients degrade gracefully elsewhere, meaning that there’s always a fallback option. But that said, if you want to ensure that your email templates display near-consistently across the major email clients, then CSS3 is not for you.

If you swing over to our guide to CSS in email, you will see that there’s a few email clients that have partial, or full support for a number of CSS3 properties. And for the most part, they have one thing in common – Webkit.

It’s a Webkit World

How your email template looks in Outlook isn’t anything like how it will look on your Blackberry, or when you’re viewing your webmail in Firefox.

If you have the blessing of always working on a Mac, checking your email on your iPhone and passing the time by browsing on your iPad, then you have one, fairly consistent view of the web. Unfortunately, the rest of us have to do with varying degrees of CSS support across a number of vendor platforms. How your email template looks in Outlook isn’t anything like how it will look on your Blackberry, or when you’re viewing your webmail in Firefox.

So it’s probably no surprise to you that Apple devices use the same rendering engine (the software that decides how to display HTML & CSS code) across their email apps and the Safari browser. For designers, it’s probably less of a surprise that this engine is Webkit and its CSS3 support is comparatively, very good.

That said, Webkit email clients (Apple Mail, iPhone & iPad Mail) account for roughly 20% of email clients used overall. However, what really counts are the email clients your subscribers are using. For example, a Mac software developer may have close to 100% of their customers viewing their newsletter on Apple devices.

With this in mind, let’s have a look at some of the CSS3 properties that are now creeping into your inbox.

Using Text-Shadow

Usage:

<!-- x offset, y offset, blur, and color, respectively -->
<p style="text-shadow: 2px 2px 2px #000;">
   Welcome to the latest issue of Widgets Inc monthly widget gossip.
</p>

Works in:

• Apple, iPhone & iPad Mail
• Yahoo! Mail, Hotmail Live! & Gmail (when viewed in browsers other than IE)
• Android default client & Gmail

Adding drop and inner shadows with text-shadow is a non-destructive way to decorate your text. Not only can it save you from otherwise creating the same effect using an image, but it looks fine in clients where text-shadow isn’t supported.

Using Border-Radius

Usage:

<p style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 3px solid #000; background-color: #ccc; padding: 5px;">
   View it in a web browser.
</p>

Works in:

• Apple, iPhone & iPad Mail
• Thunderbird
• Yahoo! Mail, Hotmail Live! & Gmail (when viewed in browsers other than IE)
• Android default client

Using rounded corners on your otherwise boxy layout or square buttons is already a commonly used technique on the web. It also can give your email templates a softer, more modern look in the above email clients, plus safely reverts to square corners when not supported.

With the announcement that border-radius will be formally implemented in IE9, we can expect to see more of its use.

One Step Further: Animation and More

Some of the more extreme uses of CSS3 in email templates can be found in situations where the recipients are using a very limited set of email clients. A great example of this is the aforementioned Mac developer. Panic, the purveyors of ‘shockingly good Mac software’, send amazing invoices after you purchase one of their titles, which include – gasp! – animated, glowing buttons:

Here’s the code they used to achieve this effect:

-webkit-animation-name: 'glow';
-webkit-animation-duration: .7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

Of course, this wouldn’t look nearly as good in an email client other than Apple Mail, but it’s certainly a neat concept!

And Another Example…

How much CSS3 can you spot in this other email design from Panic? Click through for a larger version:

Take note of how the design resizes elegantly in the browser. And those airmail stripes? They’re forward slashes (/). Genius! To find out what went into this template, check out this article.

/
<b style="color: #f5290a;">/</b>
<i style="color: #006699;">/</i>
<b style="color: #f5290a;">/</b>
<i style="color: #006699;">/</i>
<b style="color: #f5290a;">/</b>
<i style="color: #006699;">/</i>
<b style="color: #f5290a;">/</b>
<i style="color: #006699;">/</i>

So, on that Note…

Take a look at CampaignMonitor’s email client usage reports, and swing over to the definitive guide to CSS in email to get an idea of which CSS3 properties are available across the major email clients. And of course, test, test, test. With a sprinkle of CSS3, a little experimentation and a dollop of caution, you can make your email template stand out from the crowd.

If you’re of the ability, and would like to sell your email designs, now is the time to check out the Email Templates category on ThemeForest!