A Guide to CSS Support in Email: 2007 Edition

Outlook 2007

Microsoft OfficeNo 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

The new Yahoo! Mail BetaOn 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

Windows Live MailIt 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.

Screenshot of the new report

Download the spiffy new results in PDF iconPDF (91kb) or Excel iconExcel (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.

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.

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.

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.

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.

CSS Selectors

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

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.

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.

The <link> element

Same old story, no Eudora.

CSS Selectors

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

CSS Properties

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

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.

source:http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html