A Guide to CSS Support in Email: 2007 Edition

Update This study has since been superseded. View the latest 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

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.

Posted by David Greiner

16 Comments

  • Overground
    30th May

    Some of your css remarks are either incorrect, or MS has updated Outlook. I am using background-image: url(tile.gif) and background-repeat:repeat-x; and both of them work.

    Futhermore the Entourage that one of our clients is using renders absolutely NO CSS, dont know if this is due to bad code, a setting in Entourage or neither, but it renders absolutely NO css

  • Dion Jensen
    10th June

    Great article, definately worth the bookmark!
    This finally made my superios aware of WHY making newsletter templates take longer than making their website templates.

  • roman
    21st June

    e:hover is not supported in outlook2003 ...

  • roman
    21st June

    e:hover is not supported in outlook2003 ...

  • Jamie Harbison
    21st June

    Thanks for the article - very helpful reference.

  • wsdcent
    2nd July

    this is just fantastic, nice tutorial

  • mitesh
    15th July

    Nice and informative.. I think Yahoo is undoubtedly the best web-based email client out there for CSS support..

  • driver
    16th July

    hi, Wow Conor, that’s great to hear and thanks for chiming in with your thoughts!
    my blogs driver
    thanks you.

  • JSHAW
    25th July

    very helpful! thanks so much!

  • ag3nt42
    2nd August

    Wow!, thanks again to microsofts ability to f$%^ everything up again.

    First vista and DX-10, now outlook07 and css

    Its almost like they hate us..I swear..

    I just got finish with a totally elaborate HTML newsletter template that was designed to work with most all clients..

    including external and internal CSS

    ALOT OF CODE as most of you know..

    and now I will have to destroy all of it and revert back to tables..and now since majority of css is null and background imgaes don’t work.. I’ll get to spend all of my time making new graphics with link names hardcoded onto them.

    this is a great article and I really appreciate that you guys serve this up for all us designers out there.

    thanks for your time spent and do please keep it up!!

    thanks guys
    ~ag3nt42

  • Suchmaschinenoptimierung
    9th August

    thanks for this great post. i search many times a post like this. now i can write html emails….thanks for your tipps

  • darkrose
    24th November

    This would be even better if Evolution was included in the results. Until it is this is only mildly useful.

  • v8webdesign.com
    11th December

    This is the best Resource i’ve ever found on the Web for this polemic subject.
    Well done, Cheers !

  • xiaoselangone
    14th December

    江城医院,提供优质服务

    <a >白癜风</a>,
    <a >皮肤科</a>,
    <a >皮肤病</a>,
    <a >皮肤病网</a>,
    <a >白癜风网</a>,
    <a >怎么治疗白癜风</a>,
    <a >治疗白癜风医院</a>,
    <a >白癜风怎么治疗</a>,
    <a >白癜风最新治疗</a>,
    <a >白斑病</a>,
    <a >皮肤病白癜风</a>,
    <a >白癜风早期症状</a>,
    <a >白癜风的早期症状</a>,
    <a >白癜风资讯网</a>,
    <a >白癜风论坛</a>,
    <a >上海市皮肤病医院</a>,
    <a >上海市皮肤科医院</a>,
    <a >上海皮肤专科医院</a>,
    <a >上海皮肤医院</a>,
    <a >皮肤病医院</a>,
    <a >上海皮肤科医院</a>,
    <a >皮肤病专科</a>,
    <a >皮肤科医院</a>,
    <a >上海皮肤科</a>,
    <a >皮肤病专科医院</a>,
    <a >皮肤病治疗医院</a>,
    <a >白癫风</a>,
    <a >白颠疯</a>,
    <a >白殿疯</a>,
    <a >白癜疯</a>,
    <a >白癫风医院</a>,
    <a >白殿风的症状</a>,
    <a >白殿风治疗</a>,


    Boyuan metal,the best aluminiun alloy ingot producer

  • iGrapix
    16th December

    Useful Resources… Thanks a lot

  • Affivesteamma
    16th December

    Funny foto <a >here</a>

Sign up for free.
Then send campaigns for as little as $9/month

Create an account