A Guide to CSS Support in Email: 2007 Edition
Posted by David Greiner on April 19, 2007
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.
- Web-based results - Gmail, Hotmail, Windows Live Mail, the old and the new Yahoo! Mail
- PC results - Outlook 2003 and Outlook Express, Outlook 2007, Lotus Notes, Thunderbird
- 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.
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.
Ray S
wrote on April 19, 2007 8:36 PM
This is worth it's weight in gold. Cheers!
I just have to learn how to build a layout with tables now! The irony!
Felipe
wrote on April 19, 2007 10:49 PM
In the company that i work, we use lotus notes!
Its the worst! Until working with tag tables i have problems!
Chris Harrison
wrote on April 19, 2007 11:02 PM
Fantastic resource... thanks for updating this!
Chris
wrote on April 19, 2007 11:21 PM
"The mother of all e-mail CSS support Guides"
Saving us time, money and nervous breakdowns.
Thanx !!!
David R
wrote on April 20, 2007 1:29 AM
Doesn't Microchumps do automatic updates for their software every now and then? This is probably very far fetched but is it possible they can "fix" or update their Outlook 2007 to have better css support? A user has to be connected to the internet to receive emails anyways and microsoft does those regular software updates all the time...can they include an update that fixes the css support for all users to Outlook 2007?
Maybe they didnt realize before they cam out with it that this would create all these problems in the html/css world.
I'm not a good writer right now but I hope you get my point.
Thx
Koesper
wrote on April 20, 2007 2:01 AM
Perfect timing!
I just got the request to overhaul our corporate email template, and just today this great article appears, thanks for the great list! keep up the good work!
John Lascurettes
wrote on April 20, 2007 3:32 AM
Superb data collection and presentation. Kudos!
One note about Eudora. It's often been slammed as not supporting html email. The later versions support it just fine—indirectly. And that was always the best world for me. It meant I could generally view email as text-only when the source sent the emails as multi-mime and that was my preference. When I absolutely must, or really really wanted to, see the email in all its HTML glory, I simply went to "File > View in Browser" and Eudora would pass the local email file to my browser of choice. In many ways this worked a lot better than any email client could render CSS (before Thunderbird came along).
I'm excited about project Penelope (the open-sourcing of Eudora to be combined with T-bird) because it means I will eventually be able to regain my interface preferences for Eudora while retaining the agile rendering engine of Thunderbird.
torkhum
wrote on April 20, 2007 5:25 AM
This is Awesome. I deal with emails all day. I have been programming emails for the last four years and tried to stay away from using CSS. But this is fantastic.
Thanks.
man
wrote on April 20, 2007 6:41 AM
Thanks for updating this excellent resource!
I'm still coding my emails in The Stone Age (tables/inline css), and it looks like it's going to pay off for me! At least for a while. Woo hoo!
Josh P
wrote on April 20, 2007 8:07 AM
Fantastic post.
And yes I physically cringed when I looked through the list and saw that Microsoft is successfully screwing everybody over whether they realize it or not. Man I hate that company.
Niko Neugebauer
wrote on April 20, 2007 11:40 AM
Very nice guide.
This is an article one should come back a lot of times when designing an email.
Andrew Boardman
wrote on April 20, 2007 1:46 PM
Thanks for this completely thorough and honest assessment of the 2007 HTML email situation. This is a phenomenal resource and a sad indictment of Microsoft's decision to abandon CSS. Thanks, CM, for putting the record straight.
Andrew Disley
wrote on April 20, 2007 9:24 PM
David thank you for the update, last years resource proved extremely useful.
You guys are doing a great job!
Benjamin Quorning
wrote on April 21, 2007 12:45 AM
Thanks for this really helpful guide.
One thing, though: using colored icons instead of words in the PDF might make it easier to scan, but when it's printed in black & white this certainly isn't the case ;-)
xunk
wrote on April 21, 2007 3:04 AM
Thanks for sharing, it's very helpful, and well documented !
Adam
wrote on April 21, 2007 4:48 AM
Just wanted to say thanks for posting this fantastic resource!! You guys continue to be my #1 source for everything email!! Campaign Monitor rocks!
Don
wrote on April 21, 2007 7:18 AM
Thanks for this. Great research. Thank you for doing the dirty work for us. Really appreciated.
Koziolek
wrote on April 23, 2007 6:17 PM
What about Thuderbird? Do you forget about Mozilla solutions ?
However, great article for webmasters/developers who must to make emails with css styles.
Dave Greiner
wrote on April 23, 2007 7:32 PM
Koziolek, you might want to have another peek at the results. We tested Thunderbird in both the PC and Mac varieties and they were basically the best performers across the board.
Dave H
wrote on April 23, 2007 8:24 PM
What version of Lotus Notes were you testing this on? There are major differences between versions - especially the newest version (8 - currently available in beta) which uses the OS Native browser to render HTML in emails - meaning that near Full HTML/CSS support should be available. Please could you add in the version number to your report above, as this would make these findings even more useful.
Thanks
Milan
wrote on April 23, 2007 10:10 PM
Tables-based emails are still well worth using, particularly given the situation with Outlook 2007 and Lotus Notes.
Ward
wrote on April 24, 2007 4:17 AM
1) how 'bout improving html in Word instead of crippling it in outlook although that doesn't address legacy users, barring that
2) a tag in html that tells outlook this should be rendered as word html
Junior Warner
wrote on April 24, 2007 5:57 AM
I am new to html email programming, I had not done any table layouts before this and this resources would be very helpful to me and I am sure thousands more out there. Great Job.
Dustin Diaz
wrote on April 24, 2007 8:34 AM
Um. Wow. Fantastic research. I didn't think anyone would have bothered to figure out all this information, this must have taken quite a long time to document. This will serve as a great guide of reference for debugging. Thanks for all this :)
Dave Greiner
wrote on April 24, 2007 4:53 PM
Dave H, sorry about not including that. This test was performed using Lotus Notes 6.5.4. I actually wasn't aware about the version 8 beta and will endeavor to re-test Notes performance again. Downloading the beta now (wow, all 608mb of it!).
I noticed the IBM site mentioned the new version won't be publicly released until the middle of this year, so while the new results aren't relevant right now, it will be interesting to see what's coming. If the results are as good as you mentioned, who would have thought Lotus would actually switched positions with Outlook in just 12 months.
Thanks also to everyone else for their kind comments. Great to hear the guide is coming in handy.
Michal (without the 'e')
wrote on April 24, 2007 8:04 PM
Well done guys!
Btw, I think we should sue Microsoft Outlook 2007 team for making our industry awkward. Seriously. ;-)
HTML
wrote on April 24, 2007 9:48 PM
HTML-Mails suck. So Text-based e-mails are enough for me. Anyway excellent article. Really worth reading!
Ivan Minic
wrote on April 26, 2007 2:26 AM
Great comparison, but I'm still for plain text emails...
Norm
wrote on April 26, 2007 12:45 PM
Great work! This is really helpful.
Steve
wrote on April 26, 2007 1:11 PM
well done! this is by far the most comprehensive report i've seen on CSS support for emails. i'm sure we all share your dismay at Microsoft going backwards on CSS support - imagine the extra bandwidth used worldwide every year because CSS layouts are not supported and emails are perhaps twice the kb that they could be. What a waste!
Andreas
wrote on April 26, 2007 5:13 PM
thanks, for this great documentation. its very helpful for me.
Stephanie
wrote on April 27, 2007 3:31 AM
Any tips specific to Outlook Web Access? It's showing me something entirely different from Outlook or Entourage -- it seems to be stripping even inline CSS.
Cole
wrote on April 27, 2007 10:50 AM
I couldnt agree more with HTML and Ivan, Emails should be text based. But at the same time I don't make that decision here at work, so thanks to you for this resource booking marking it right now :)
Marcos Peebles
wrote on April 27, 2007 6:45 PM
Very cool, thank you, saves a lot of time and try/error.
Cheers
Anne Stahl
wrote on April 28, 2007 3:08 AM
If this is all accurate and correct, it is indeed worth pure gold! Great compilation. I would love if I were able to download it as a spreadsheet, so I can focus on the ones most relevant to my usage.
ALSO: Does anyone know a site of usage stats. E.g. Eudora seems to really put a spanner in the works - how many people actually use Eudora?
Anyhow, thanks for this information. I've added page to my del.icio.us.
a-
karl dubost, w3c
wrote on April 29, 2007 7:23 PM
Hey. I do not know if you have noticed the HTML in Mail Workshop organized by the W3C at the same time than Xtech. That would be cool if someone could introduce your results about CSS in Email.
See http://www.w3.org/2007/05/html-mail/
Guy Leech
wrote on April 30, 2007 11:28 AM
You say that "The most significant of these is e#id and e.className.." in reference to WindowsLive Mail have you tried 'e[class="className"]'?
Dave Greiner
wrote on May 1, 2007 3:15 PM
Guy, I haven't tried the 'e[class="className"]' technique as yet. If you have any luck with it, please let me know.
Karl, we're definitely aware of that great initiative and even pointed our readers to it a while back.
Anne, if you're after a spreadsheet version you can edit, get in touch and I'll email you a copy.
Stephanie, I haven't had the chance to test Outlook Web Access I'm afraid, but from what I've seen in the past CSS support is incredibly limited.
Jukka K. Korpela
wrote on May 2, 2007 9:19 PM
I found the guide most enlightening and easy to understand. I'm considering how to cite it in a book. I wonder if it would be possible to find a "permanent" URL for the latest version of a guide like this, hopefully a shorter URL that hasn't got year and month wired in.
Alternatively, is there any other page (hopefully linking to this guide) on using CSS in Email that could be sited as a basic summary of variation of CSS support in major Email clients?
Ted Wiberg
wrote on May 3, 2007 12:12 AM
Hi!
I think its really strange that Microsoft creates a new version of Outlook (2007), that has less support for CSS then the erlier version (2003).
The big question is WHY???
Boris Mahovac, aka Your Ezine Coach
wrote on May 3, 2007 12:59 AM
Great article! Saves us all a ton of testing...
To test all my client's email newsletters, I have accounts with Yahoo Mail, Gmail, MSN and NetFirms Web Mail for web mail rendering tests. Then I also test on my Mac and PC with Outlook/Express, Apple Mail, Eudora ... I recommend you do the same.
You may also want to check these great resources out as well:
Outlook 2007 - How does it affect me?
Available from Microsoft:
Word 2007 HTML and CSS rendering capabilities in Outlook 2007
Outlook 2007 HTML and CSS Validator
Trial version of Outlook 2007
Gavin Barker
wrote on May 3, 2007 2:30 AM
Has anyone done any tests with Windows Mail in Vista? It is basically an Outlook Express replacement that comes with Vista instead of OE, but not sure if it uses the same engine behind the scenes. Looking at my version number it says 6.0.6000.16386 - which makes me think it could well be Outlook Express in a dress!
Abby Larsen
wrote on May 3, 2007 3:20 AM
I'm waiting for a utility that will take an HTML page with styles nicely separated and spit out an HTML page with all styles inline. I work on some pretty complicated and style intensive newsletter templates that would have me pulling my hair out if I had to code around inline styles everytime I had to update the content. Has anyone heard of such a thing? Does something like this already exist? This would lessen the inline style headache immensely and I'd pay good money for it!
Tables Forever
wrote on May 3, 2007 4:20 AM
I really don't see why everyone thinks the lack of CSS is a bad thing. Our company (we're one of the largest ESP's in the country) has been using table style layouts forever and we still do. CSS acts so differently in so many formats and web-mail providers that we never saw a real desire to switch to CSS formatting with the exception of inline font formats which are alerady being backed up by standard HTML font formats. This has been very good for us since our rendering with our current code is about 99% perfect in just about every program, including Lotus Notes. So with that in mind, I have never seen a real good reason to switch over to CSS. The issue that has caused us a bit of angist is the lack of full colspan and rowspan support in Outlook 2007. With table style design, those are are frequently used tags that require a different school of thought when not used. Deeper nesting of tables is required to accomplish the same thing.
Andrew Pawson
wrote on May 3, 2007 4:28 AM
Amazing work. Thanks for sharing this. One small issue...It would be nice to see an updated PDF version of the results that uses something else (other than color alone) to indicate support/lack of support since the green and red dots are indistinguishable when printed (as I discovered when I tried to print the PDF for handy desk-side reference).
SteveD
wrote on May 3, 2007 7:31 PM
Great guide!
Some people above have mentioned that HTML emails should be done away with and only text used. That may be fine for some B2B or B2C type products and services but for retail products html emails often convert far better since the reader can see immediatley what the products look like.
Although I have had some great success with text only emails in a retail environment, I think they are better suited to single or limited numbers of products.
Kapil Juneja
wrote on May 7, 2007 9:58 PM
Thanks for saving our time, This article is great.
Jason Reed
wrote on May 9, 2007 3:30 PM
Awesome work- thanks for providing this. Much appreciated!
Tim Lucas
wrote on May 10, 2007 1:51 AM
Nice work guys. Very interesting news about Outlook 2007... looks like I'll be saying a clear "no" to any random odd-jobs of putting HTML emails together for ppl... its text with a link to a funky web version I'm afraid.
Nick Horne
wrote on May 10, 2007 1:58 PM
You'd think MS are just doing this for a laugh! Having moaned about poor support for XHTML/CSS Standards for ages, they finally do something (well a little at least) about it with IE7 and then do something stupid like use Word to render e-mails through Outlook 2007 (probably something to do with security- it's like being chained up using Vista!).
More moaning over!! However very good article and great timing as i have been experimenting with HTML emails for a while now and was just about to implement it using CSS after a little testing but will not bother now. Oh well, just have to stick to good old fashioned HTML or as Tim Lucas says, why not just text with a link. Nobody really wants to see "If you cannot see the graphics within this e-mail, please click here" or similar or a complete mess when they open an e-mail. Roll on Outlook 2010?
Wojtek
wrote on May 16, 2007 1:51 AM
Thank you very much, this is very useful stuff.
Julien
wrote on May 16, 2007 4:43 AM
thanks a lot!
Yuval
wrote on May 16, 2007 7:44 AM
Thanks, this was right on time for me.
BTW, also you are right about the lack of advanced css support in lotus notes current version(R7), as far as i know it does support style tags on header.
with version 8 BTW, situation is much better.
Guillermo Rauch
wrote on May 16, 2007 11:40 AM
Amazing article. Keep it up Campaign Monitor!
entact
wrote on May 18, 2007 10:52 AM
The part that is especially pervasive is that Outlook 2007 and Windows Live Mail require opposite approaches to the simple task of spacing. Outlook 2007 respects margin (albeit with background color issues) but only respects padding if applied to td and not to div. Live Mail completely disregards margin. So it is a daunting task to get an email to look the same in both. Outlook 2007 disregards cellpadding as well. Oh, and contrary to what MS says, border is problematic when applied to div elements.
View the source of http://depot.mammothmountain.com/test/boxmodel2.cfm and try sending this to both clients.
Luckily, it appears that the third new Microsoft Email client that ships with Vista (replacing the now defunkt Ooutlook Express) uses the IE7 rendering engine so it is easy to develop for.
keronii
wrote on May 22, 2007 12:32 PM
It is really helpful to read this article, before i always developed HTML mail in table structure and inline CSS. It saves me a lot of time now. Thanks.
anon
wrote on May 24, 2007 4:31 PM
In the documentation from Microsoft, it does not say rowspan (apart from rowspan=0) is NOT supported, however it is now working on our HTML emails. We are doing testing, but can't work out for some emails with rowspans are working, others with many rowspans do not render correctly.
Anyone else got issues with this?