BLOG - EMAIL MARKETING

A Guide to CSS Support in Email

DAVID GREINER - MAR 30, 2006

Update: This study has since been superceded by the new and improved 2008 Edition

Since the rise of Internet Explorer, web designers have had to test their designs across multiple web browsers. No one likes it, but we’ve all copped it on the chin, written a few hacks and moved on with our lives. After all, 3 to 4 browsers aint that bad – and they finally seem to be getting their act together.

If Internet Explorer is the schoolyard bully making our web design lives a little harder, then Hotmail, Lotus Notes and Eudora are serial killers making our email design lives hell. Yes, it’s really that bad.

Inspired by the fantastic work of Xavier Frenette, we decided to put each of the popular email environments to the test and finalize once and for all what CSS is and isn’t supported out there.

We’ll dig straight into our recommendations based on what we found, followed by the results themselves with a few more details about our findings.

Recommendations

Because of the huge variation of support across each email environment, there really isn’t any one design approach that will guarantee consistency. Instead, you should take a couple of things into account.

1. The consistency demands of your client

If you have a client who understands the challenges you face and realizes that some email environments are just plain old broken (we can always dream), I recommend going for broke and following Mark Wyner’s recent article on CSS design in email (we even include a free template to get you started). This allows you to code your email using moderns standards based design that degrades gracefully for these “broken” email environments.

On the other hand if your client demands consistency no matter what, or the CEO’s using Lotus Notes, you’ll have to dull down your design, stick with tables for layout and use only basic text formatting via CSS. You may even have to go down the inline CSS route.

2. The potential email environment of your recipients

You’ll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using.

Business to Business

If you’re sending Business to Business (B2B) emails, you’re definitely going to have to support Outlook and to a lesser extent Lotus Notes. In a recent survey of B2B readers, EmailLabs found that more than 75% use a version of Outlook and a further 9% use Lotus Notes. The good news is that Outlook’s support for CSS is quite good, but Notes’ certainly isn’t. You’ll need to weigh up the trade-offs yourself there.

Business to Consumer

If you’re sending Business to Consumer (B2C) campaigns, then you’ll definitely need to have Yahoo!, Hotmail and possibly AOL covered. Gmail’s still purring under 5% total penetration, but if you’re targeting early adopters then this percentage will likely be significantly higher.

Yahoo and AOL offer very respectable CSS support. Hotmail isn’t too painful provided you include your <style> element in the <body> and not the <head>, while Gmail gives you no choice but to use inline styles only.

Further to these concerns, there’s also the issue of image blocking and preview panes, but that’s a whole other article.

Results

Down to the nitty gritty. To cover each email environment, we’ve split our results up into web-based, PC and Mac email software. Use the links below to jump straight to the respective findings.

  1. Web-based results – Gmail, Hotmail, Yahoo! and Windows Live Mail
  2. PC results – Outlook 2003 and Outlook Express, Lotus Notes, Thunderbird
  3. Mac results – Mac Mail, Entourage, Eudora

Web-based

Xavier covered the web-based email environments perfectly, but we decided to throw Microsoft’s new Windows Live Mail into the mix to gaze into the crystal ball and see if Hotmail may have a brighter future. The biggest improvement we found being support for the <style> element in the <head> of your page.

The <style> element

The standard place for the style element is in the <head> of the document, but to ensure the styles appear in Hotmail, you can also insert them within the <body>. We tested both, just to make sure.

Web-based support for the <style> element

Gmail Hotmail Yahoo! Mail Windows Live Mail
<style> element in the <head> No No Yes Yes
<style> element in the <body> No Yes Yes Yes

The <link> element

The <link> element is used to reference a separate CSS file. Web based email environments offer no support for this element, so I recommend playing it safe and sticking with the <style> element for your CSS.

Web-based support for the <link> element

Gmail Hotmail Yahoo! Mail Windows Live Mail
<link> element in the <head> No No No No
<link> element in the <body> No No No No

CSS Selectors

Selectors are used to “select” specific elements on a page so that they can be styled. Besides Gmail, most web-based email environments offer pretty good selector support.

Web-based support for CSS Selectors

Gmail Hotmail Yahoo! Mail Windows Live Mail
* No Yes Yes Yes
e No Yes Yes Yes
e > f No No Yes No
e:link No Yes Yes Yes
e:active, e:hover No Yes Yes Yes
e:focus No No Yes No
e+f No Yes Yes No
e[foo] No Yes Yes No
e.className No Yes Yes Yes
e#id No Yes Yes Yes
e:first-line No Yes Yes Yes
e:first-letter No Yes Yes Yes

CSS Properties

CSS property support ranges from very good (Yahoo!) down to so-so (Gmail). If you want results in Gmail, you’ll need to do your styles inline (<p style="...">this is pretty now</p>) rather than via the <style> element.

Web-based support for CSS Properties

Gmail Hotmail Yahoo! Mail Windows Live Mail
background-color Yes Yes Yes Yes
background-image No Yes Yes No
background-position No No No No
background-repeat No Yes Yes No
border Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes
border-spacing Yes No Yes No
bottom No Yes Yes No
caption-side Yes No Yes No
clear No Yes Yes Yes
clip No Yes Yes No
color Yes Yes Yes Yes
cursor No Yes Yes Yes
direction Yes Yes Yes Yes
display No Yes Yes Yes
empty-cells Yes No Yes No
filter No No Yes Yes
float No Yes Yes Yes
font-family No Yes Yes Yes
font-size Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes Yes Yes
font-weight Yes Yes Yes Yes
height No Yes Yes Yes
left No Yes Yes No
letter-spacing Yes Yes Yes Yes
line-height Yes Yes Yes Yes
list-style-image No Yes Yes No
list-style-position Yes No No Yes
list-style-type Yes No Yes Yes
margin Yes No Yes No
opacity No No Yes Yes
overflow Yes Yes Yes Yes
padding Yes Yes Yes Yes
position No No No No
right No Yes Yes No
table-layout Yes Yes Yes Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes Yes Yes
text-transform Yes Yes Yes Yes
top No Yes Yes No
vertical-align Yes Yes Yes Yes
visibility No Yes Yes Yes
white-space Yes Yes Yes No
width Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes
z-index No Yes Yes No

PC

Aside from Lotus Notes, all our PC-based email clients behaved very well. All versions of Outlook, Outlook Express and AOL 9 use Internet Explorer to render their emails, so some selectors weren’t supported. This also means you’ll still need to allow for the range of CSS problems IE introduces. Thunderbird scored beautifully.

The <style> element

Perfect support except for Lotus Notes, which ignores the <style> element altogether.

PC support for the <style> element

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
<style> element in the <head> Yes Yes No Yes
<style> element in the <body> Yes Yes No Yes

The <link> element

The <link> element is very well supported on the PC, the only shortfall being that your remote CSS file will not be loaded if images are also disabled. Once images are enabled, your CSS will also load correctly.

PC support for the <link> element

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
<link> element in the <head> Yes Yes Yes Yes
<link> element in the <body> Yes Yes Yes Yes

CSS Selectors

Thunderbird scored highly, but because the majority use IE to render your email, selector support is limited.

PC support for CSS Selectors

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
* Yes Yes No Yes
e Yes Yes No Yes
e > f No No No Yes
e:link Yes Yes No Yes
e:active, e:hover Yes Yes No Yes
e:focus No No No Yes
e+f No No No Yes
e[foo] No No No Yes
e.className Yes Yes No Yes
e#id Yes Yes No Yes
e:first-line Yes Yes No Yes
e:first-letter Yes Yes No Yes

CSS Properties

You can have a field day as long as you’re not sending to Notes. It offers dismal property support that includes only very basic text manipulation.

PC support for CSS Properties

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
background-color Yes Yes No Yes
background-image Yes Yes No Yes
background-position Yes Yes No Yes
background-repeat Yes Yes No Yes
border Yes Yes No Yes
border-collapse Yes Yes No Yes
border-spacing No No No Yes
bottom Yes Yes No Yes
caption-side No No No Yes
clear Yes Yes No Yes
clip Yes Yes No Yes
color Yes Yes Yes Yes
cursor Yes Yes No Yes
direction Yes Yes Yes Yes
display Yes Yes Yes Yes
empty-cells No No No Yes
filter No No No No
float Yes Yes No Yes
font-family Yes Yes Yes Yes
font-size Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes No Yes
font-weight Yes Yes Yes Yes
height Yes Yes No Yes
left Yes Yes No Yes
letter-spacing Yes Yes No Yes
line-height Yes Yes No Yes
list-style-image Yes Yes No Yes
list-style-position Yes Yes No Yes
list-style-type Yes Yes Yes Yes
margin Yes Yes No Yes
opacity No No No Yes
overflow Yes Yes No Yes
padding Yes Yes No Yes
position Yes Yes No Yes
right Yes Yes No Yes
table-layout Yes Yes No Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes No Yes
text-transform Yes Yes No Yes
top Yes Yes No Yes
vertical-align Yes Yes No Yes
visibility Yes Yes No Yes
white-space No No No Yes
width Yes Yes No Yes
word-spacing Yes Yes No Yes
z-index Yes Yes No Yes

Mac

While Mac Mail and Entourage offer fantastic support across the board, I wasn’t surprised to find that Eudora refused to come to the party. Basically, Eudora sucks.

The <style> element

Go for it, just ignore Eudora.

Mac support for the <style> element

Mac Mail Entourage Eudora
<style> element in the <head> Yes Yes No
<style> element in the <body> Yes Yes No

The <link> element

Same old story, no Eudora.

Mac support for the <link> element

Mac Mail Entourage Eudora
<link> element in the <head> Yes Yes No
<link> element in the <body> Yes Yes No

CSS Selectors

Mac Mail support was fantastic and Entourage was a close second.

Mac support for CSS Selectors

Mac Mail Entourage Eudora
* Yes Yes No
e Yes Yes No
e > f Yes Yes No
e:link Yes Yes No
e:active, e:hover Yes Yes No
e:focus Yes Yes No
e+f Yes No No
e[foo] Yes No No
e.className Yes Yes No
e#id Yes Yes No
e:first-line Yes Yes No
e:first-letter Yes Yes No

CSS Properties

Property support was also top notch, except for Eudora, with no property support whatsoever.

Mac support for CSS Properties

Mac Mail Entourage Eudora
background-color Yes Yes No
background-image Yes Yes No
background-position Yes Yes No
background-repeat Yes Yes No
border Yes Yes No
border-collapse Yes No No
border-spacing Yes No No
bottom Yes Yes No
caption-side No No No
clear Yes Yes No
clip Yes Yes No
color Yes Yes No
cursor Yes No No
direction Yes No No
display Yes Yes No
empty-cells Yes No No
filter No No No
float Yes Yes No
font-family Yes Yes No
font-size Yes Yes No
font-style Yes Yes No
font-variant Yes Yes No
font-weight Yes Yes No
height Yes Yes No
left Yes Yes No
letter-spacing Yes Yes No
line-height Yes Yes No
list-style-image Yes Yes No
list-style-position Yes Yes No
list-style-type Yes Yes No
margin Yes Yes No
opacity Yes No No
overflow Yes No No
padding Yes Yes No
position Yes Yes No
right Yes Yes No
table-layout Yes Yes No
text-align Yes Yes No
text-decoration Yes Yes No
text-indent Yes Yes No
text-transform Yes Yes No
top Yes Yes No
vertical-align Yes Yes No
visibility Yes Yes No
white-space Yes Yes No
width Yes Yes No
word-spacing Yes Yes No
z-index Yes Yes No

 

We hope you find these results helpful. Let’s hope that as browsers move forward, ISP’s and email client developers follow suit. It’s our sanity at stake here, right?

UPDATE: After an oversight pointed out by Lachlan Hunt, we’ve scaled back Eudora’s CSS support to nil, zilch, zero.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free