A Guide to CSS Support in Email: 2007 Edition

It's been just over 12 months since I posted our original Guide to CSS Support in Email and quite a bit has changed since. Sadly, the most significant of these changes was in the wrong direction, with Microsoft's recent decision to use the Word rendering engine instead of Internet Explorer in Outlook 2007. We've written plenty about it already including an explanation of the reasoning behind it. More on its impact on CSS support later.

It hasn't all been doom and gloom though, a number of vendors have maintained or improved their support for CSS, especially in the web-based email environment. The new Yahoo! Mail looks very promising and the old Hotmail will be making way for the new Windows Live Mail in the coming months. Desktop based apps tend to move a little slower and not a great deal has changed on that front, but traditionally they've been the best performers anyway. This year we added Outlook 2007, the new Yahoo! Mail and Mozilla Thunderbird for the Mac to our test suite, and also noticed some subtle changes in others.

So what's changed?

Outlook 2007

No doubt the Outlook 2007 "incident" had the biggest impact on CSS support in email over the last year. Many commentators in the industry claimed the change was no big deal, that this change doesn't really make a difference. Funnily enough, most of these comments came from the marketing side of the fence, not the design side. Understandably, most marketers and project managers couldn't care less about this change - there are ways around it using tables and inline CSS, so who cares? Well, designers care.

I wasn't kidding when I said Microsoft took email design back 5 years. Using tables for layout is a dying art in the web design community, in fact many designers who have started CSS/XHTML in the last few years have never even coded a table based layout before. This is a good thing. CSS based emails are more lightweight, much more accessible to those with disabilities and because content is separated from presentation, much easier to dumb down for those reading email on mobile devices. This change by Microsoft means that for at least the next 5 years any designer not familiar with table based layouts will need to learn a completely different way of creating a HTML page if they want to send emails to an Outlook user.

The new Yahoo! Mail

On a much more positive note, Yahoo! have been putting the finishing touches on their brand new mail interface. Mark did some solid testing on the new Yahoo! Mail vs Windows Live Mail back in January, which is certainly worth a read. The exciting news is that Yahoo! have maintained their lead as the best web-based email client out there for CSS support. There are some subtle differences to the older version, which we've noted in our results below.

Early talk from the Yahoo! camp suggests they will not be forcing all of their current users to the new platform, but instead make it the default for new customers and give existing customers the option to upgrade.

Windows Live Mail

It should also be noted that Windows Live Mail (the new Hotmail), which we covered an early beta of in last year's test is rolling out in the coming months. Unlike Yahoo, Live Mail will be completely replacing the older Hotmail interface over the course of the next few months, meaning our days coding for Hotmail's quirks will soon be over.

It's not all rosy though. In the 12 months since I last tested the Live Mail beta, they've dropped support for a number of key selectors and properties. As detailed in the results, a number of key CSS selectors are no longer supported. The most significant of these is e#id and e.className, which as many of you know means inline CSS will be the only way to get much of your formatting to work for Hotmail subscribers moving forward. Very frustrating.

New Recommendations

When I initially wrote about the Outlook 2007 shock a few months back, I said:

If your email breaks in Notes or Eudora, it was often an acceptable casualty, but if it breaks in Outlook, you're more than likely ostracizing too many recipients to justify your design approach.

Unfortunately I still think this is the case. If there's a chance that a reasonable percentage of your recipients will be using Outlook 2007, then a completely CSS based email design just won't cut it. If your layout is column based, you have no option but to use tables for the basic structure of your email. You're also going to need to dumb down your CSS usage (see our results below for the nitty gritty on what does and doesn't work).

Business to Business emails

I wasn't able to track down any predictions on Office 2007 penetration in the business world. Considering it was only released a few months ago, you might have some time before the install base becomes significant. Either way though, you're going to get caught eventually. Considering Outlook's 75% domination over corporate email, you've got little choice but to bow down and stick to tables and basic CSS for all your email templates.

The verdict: Table-based and possibly inline CSS.

Business to Consumer emails

Across the spectrum of consumer based email environments little has changed really. Yahoo! has maintained their position as the industry leader, while Hotmail has simply been replaced with new wrapping but next to no improvements. Just like last year, Gmail still provides very limited CSS support. If you've got a decent percentage of Gmail subscribers, it's table based with inline CSS all the way I'm afraid. Of course, you can never assume that none of your home based subscribers are using Outlook 2007, so this is a judgement call you'll need to make yourself.

If you do decide to stick with CSS based layouts for B2C emails, I'd recommend doing plenty of testing across Hotmail, Yahoo!, AOL and Gmail to make sure it's presentable in each.

The verdict: Either CSS or table-based layouts but make sure you test, test, test.

Results

Just like last year, I'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, Windows Live Mail, the old and the new Yahoo! Mail
2. PC results - Outlook 2003 and Outlook Express, Outlook 2007, Lotus Notes, Thunderbird
3. Mac results - Mac Mail, Entourage, Eudora, Thunderbird

We've also compiled all the results together in a single PDF file, which you can download below. This 2 pager breaks up the various properties and selectors into groups of Safe, Risky and Poorly Supported to make it much easier to decide which properties to aim for.

Download the spiffy new results in PDF (91kb) or Excel (80kb)

Web-based

The biggest change this year was the release of Yahoo!'s new email platform, which is built upon an already great base and provides solid CSS support. Microsoft will also be ditching the old Hotmail layout in the coming months for Windows Live Mail, which provides reasonable CSS support but has unfortunately lost ground since the early beta I tested this time last year.

The <style> element

Here's a Hotmail predicament for you. The old Hotmail requires the <style> element to be in the <body>, while Live Mail requires it to be in the <head>. Until Microsoft completely update all customers to the new Live Mail interface (rumoured to be in the next few months), you'll need to include a duplicate copy of your CSS in the <head> and the <body>, or stick with inline styles to get the best results for all Hotmail users.

Web-based support for the <style> element
	Gmail	Hotmail	Live Mail	Old Yahoo!	New Yahoo!
<style> element in the <head>
<style> element in the <body>

The <link> element

The <link> element is used to reference a separate CSS file. Except for the new Yahoo!, 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. When you import a page that uses the <link> element in Campaign Monitor, we automatically suck it in and include it within the <style> element for you.

Web-based support for the <link> element
	Gmail	Hotmail	Live Mail	Old Yahoo!	New Yahoo!
<link> element in the <head>
<link> element in the <body>

CSS Selectors

Selectors are used to "select" specific elements on a page so that they can be styled. Unfortunately, Microsoft have scaled back their selector support in the new Live Mail, so you'll need to tread carefully.

Web-based support for CSS Selectors
	Gmail	Hotmail	Live Mail	Old Yahoo!	New Yahoo!
*
e
e > f
e:link
e:active, e:hover
e:focus
e+f
e[foo]
e.className
e#id
e:first-line
e:first-letter

CSS Properties

CSS property support ranges from very good (Yahoo!) down to so-so (Gmail). If you want results in Gmail and Live Mail, you'll still need to do your styles inline (<p style="...">this is pretty now</p>) rather than via the <style> element. On one positive note, Gmail now includes support for the display and clear properties.

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

PC

What can I say, it aint pretty this year. Basically, you'll notice a lot more crosses in the Outlook 2007 column than the 2003 column. The combination of Lotus Notes and Outlook 2007 basically leave the CSS layout option for dead. It's tables and basic CSS for the PC based email environments unfortunately.

The <style> element

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

PC support for the <style> element
	Outlook 2003/Express	Outlook 2007	AOL 9	Lotus Notes	Thunderbird
<style> element in the <head>
<style> element in the <body>

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/Express	Outlook 2007	AOL 9	Lotus Notes	Thunderbird
<link> element in the <head>
<link> element in the <body>

CSS Selectors

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

PC support for CSS Selectors
	Outlook 2003/Express	Outlook 2007	AOL 9	Lotus Notes	Thunderbird
*
e
e > f
e:link
e:active, e:hover
e:focus
e+f
e[foo]
e.className
e#id
e:first-line
e:first-letter

CSS Properties

Very limited support in Notes and Outlook 2007, the most significant of which is no support for the <float> property, generally rendering CSS based layouts useless. Outlook 2007's padding support also leaves a lot to be desired. While it got a tick, it's unpredictable at best - don't say I didn't warn you. Just like last year, Thunderbird performs flawlessly.

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

Mac

One interesting piece of news on the Eudora front is that Qualcomm plan to release an open source version of their application some time in 2007 that will use the same underlying technology as Thunderbird, which will be a huge improvement to say the least. Again, Mac Mail and Entourage continue to offer fantastic CSS support. We've also included Thunderbird for the Mac in our testing this year, which had the same great result as its PC sibling.

The <style> element

Go for it, just ignore Eudora.

Mac support for the <style> element
	Mac Mail	Entourage	Eudora	Thunderbird
<style> element in the <head>
<style> element in the <body>

The <link> element

Same old story, no Eudora.

Mac support for the <link> element
	Mac Mail	Entourage	Eudora	Thunderbird
<link> element in the <head>
<link> element in the <body>

CSS Selectors

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

Mac support for CSS Selectors
	Mac Mail	Entourage	Eudora	Thunderbird
*
e
e > f
e:link
e:active, e:hover
e:focus
e+f
e[foo]
e.className
e#id
e:first-line
e:first-letter

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	Thunderbird
background-color
background-image
background-position
background-repeat
border
border-collapse
border-spacing
bottom
caption-side
clear
clip
color
cursor
direction
display
empty-cells
float
font-family
font-size
font-style
font-variant
font-weight
height
left
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
margin
opacity
overflow
padding
position
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
white-space
width
word-spacing
z-index

So there you have it. Some pretty big changes to get our heads around this year. Here's hoping Microsoft reconsider their position and improve Outlook 2007's CSS support in the first service pack for Office. If you'd like to improve the chances of this happening, make your voice heard with the rest of us.

Update - 4 June 2007: It seems Live Mail has dropped support for a number of CSS selectors. We've updated the findings and PDF summary above, and you can read more about this here if you're interested.