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.
- Web-based results – Gmail, Hotmail, Yahoo! and Windows Live Mail
- PC results – Outlook 2003 and Outlook Express, Lotus Notes, Thunderbird
- 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.