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.
- 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.
Posted in: Tips & Resources
Comments for this entry are closed.
Browse the Blog
- Behind the Scenes (28)
- Interviews & Buzz (132)
- New Features & Updates (229)
- Observations & Answers (210)
- Release Notes (1)
- Tips & Resources (478)
Explore the Email Gallery
- All designs
- One column (368)
- Two column (221)
- Three column (33)
- Announcement (126)
- Newsletter (445)
- Invitation (37)
@herron_bird That’s totally awesome - thank you for checking out worldview! :D ^RH
Follow us on Twitter-
CSS support in email
Designing for email can be tricky. Save your sanity with our complete CSS guide.
-
Single-click testing
See screenshots of your email in 20+ email clients and check against spam filters.
-
Not just good looks
Track every aspect of your campaigns like opens, clicks, forwards, sales and more.
About • Our Book • Contact • API • Anti-spam Policy • Terms of Use • Privacy Policy
Follow us on Twitter 
Become a fan on FacebookProud founders of the Email Standards Project and supporters of the design community.
166 Comments
Tim
October 13, 2007 1:49am
In your report is says that line-height is supported in Outlook 2007, however I’ve been unable to get it to work properly.
I want to use the property to reduce the space between lines of text.
Is there a particular way it needs to be coded?
Josh
October 13, 2007 3:46am
It’s all been said, but thanks so much for putting this together. At my work, we send a TON of html emails for our clients. It wasn’t until one of our guys got a new computer w/ Outlook 2007 pre-installed that we realized that quite a few of our layouts were breaking in said client. This resource has proven quite helpful as I’m in the process of reverting to table-based layouts, and figuring out which CSS is safe to use!
Cheers
Christine
October 19, 2007 12:09pm
:( Outlook 2007 makes me sad. This is very disappointing for some of my existing clients using CSS based templates. Will now have to look at converting to them to table-based. *sigh*
ePostservice
October 30, 2007 10:34pm
The css properties vertical-align does work in Outlook 2007, at least when used in html element which has full support for css style.
I agree though that the css-support in outlook 2007 is a step backward. But looking from the MS perspective, the idea of having Word to both generate and read the email make sense. My guess is that the change is here to stay and we just have to learn to work with it.
Henry B (TMW)
October 30, 2007 11:38pm
I have notice that there is a rendering problem with the “NEW” Windows Live Hotmail email client with browser(s) other than, Internet Explorer(IE) (i.e Firefox, Safari) The rendering problem seem to be that the images in HMTL emails break up when they have been sliced into different parts, irrespective of how they are possitioned in the HTML. In general the HTML does not render quite as expected when viewed in Firefox or Safari.
If anyone had any solution to these problem(s)... Please let me know!
direct email: .(JavaScript must be enabled to view this email address)
Chris
November 2, 2007 6:26pm
David, thank you for this article, it makes my live easier!
Can you tell me what Notes Version you did test? I have to send newsletters to Notes R5 users (poor me!) and it seems that R5 is not the tested version?
ManiquÃ
November 7, 2007 5:02am
There’ve been some changes in GMail CSS files that are affecting some HTML newsletter that used to work flawlessly when viewed on GMail.
Particularly, there is a border:collapse CSS rule that is affecting every table inside GMail.
If anyone finds a workaround to this changes, please, share it here. Thanks.
Gene
November 13, 2007 7:48am
Boo to table use in Outlook 2007. I’ve designed a report that is generated via a VBScript and e-mails results. I’ve noticed some strange things with the CSS support in Outlook. Thanks for writing this, now I know what to avoid.
Ivan
November 16, 2007 12:07am
I just start with all this email things and your entire website with abundance of top class information is an incredibly useful.
Thanks guys, thanks. I will visit your site more often.
Mike
November 21, 2007 7:15am
Thank you for this article. It will be very usefull.
Tek Boy
November 21, 2007 10:36am
Once again, you guys have done a fantastic job on providing detailed information about a variety of clients. Not only that, it LOOKS great as well—thanks.
Whatever-ishere
November 22, 2007 3:19am
thanks for the GREAT post! Very useful…
Alan
November 27, 2007 12:36am
As noted by Abby on Sept. 19th, it does appear that Gmail will display inline styles that include font-family. (I just tested it myself).
For future users, you may want to update your chart.
ty for a great resource.
car
November 27, 2007 2:46am
This is much more complicated then I was thinking!
Great resource!
MHGTraining
December 3, 2007 10:22am
Consider developing with (Thunderbird)
Thunderbird - Reclaim your inbox
We started using it about three months ago and it is by far the most developer friendly email program we’ve ever used. We use Thunderbird in conjunction with Dreamweaver CS3. I know this does not solve the client side concern but for developers you can regrow some of that hair you’ve been pulling out. The charts above are right on the money.
Best
JP
Shep
December 4, 2007 3:33am
Regarding Outlook 2007: That’s the problem with a monopoly. In a typical market, the customer’s reaction would be “Why is my email program displaying all my mails as crap?” and start complaining to the manufacturer.
Can you imagine Sony marketing a TV set which renders all shows not specifically crafted for it in black and white and with only half the frames? Would TV networks rush to modify their sending format to accomodate for the new TV set? Or would customers go to their retailer and say “What kind of crap are you selling me? Nothing displays right!”?
Jessica
December 4, 2007 4:35pm
This post is such a brilliant resource. Just wanted to say thanks for all the brilliant info and that I’ll be passing the resource on.
I thought IE6 was bad, I’m only just becoming aware of the hair loss and frustration caused by HTML email templates. At least with such rich information on what’s happening and why across the many email clients we can handle them and adapt. Mind you I’m not looking forward to retrograding my development skills to include table based layouts.
It seems funny that after so much justification for IE7 supporting previous bad implementations of standards as to not “break the web”, they’ve completely thrown any sort of backwards compatibility out the window in Outlook… just when I thought we were starting to get somewhere.
tristan
December 5, 2007 4:34am
Wicked resource, but really, I don’t see the problem, css is much easier and quicker than old style html, but old style tables aren’t exactly brain science and the (pretty much unmentioned) security benefits are well worth the loss in O2007.
I’ve figured out how to use background images, sorted out our emails into table form and rock out daily - they look exactly like our “old” css styled emails and perfect just as well.
Bellevue
January 15, 2008 6:27am
Finally all content at one place :)
Thank you wary much!
blindog
January 15, 2008 1:01pm
Thanks for the .PDF version, very useful.
HTG
January 16, 2008 4:38am
Thanks, this is a great article. One thing I notice and I don’t see listed here is that HTML background images are no longer supported in outlook 2007
danny
January 17, 2008 9:05am
THANK
YOU
SO
MUCH!!!
Laurent
January 24, 2008 12:05pm
This is the ultimate overkill review about the typical Microsoft “I don’t care” attitude.
Thank you for this great study ! It saved a lot of my hair…
Nick
January 29, 2008 4:11am
Absolute supremacy of Thunderbird!!!
I should use it..
Email Marketing Solutions
February 4, 2008 12:12pm
Before your subscribers actually see your email, they may get just a glimpse of it in their preview panes. Your email needs to be immediately readable and useful, even without any images showing. That means having real text content on the page, headings, and links that will load right away. Your text has to give the reader a compelling reason to bother turning on those images at all.
There’s one more question you need to answer before you actually send your email: What will be a good result? You can spend as long as you like crafting your code and design, but you need to be able to tell whether your time was well spent. Before you send, make sure you have defined some measurable goals for your email campaign.
Robert Zimnicaru
February 4, 2008 12:14pm
Pretty well explained! Great for beginners but for intermediate too.
World Links
February 4, 2008 12:21pm
Thanks for taking the time to test these browsers. These kinds of measurements are best done over a series of campaigns. At first, you won’t have any benchmark numbers to judge against.
AMacKay
February 4, 2008 7:17pm
Thanks for providing such an excellent resource!!!
Recently I have also noticed support for background images in tables/columns/rows and background-image has stopped working after I installed an MS Outlook security update. Can anyone else verify this?
mummybot
February 5, 2008 12:32am
I have been doing testing in Outlook 2007 and I have discovered an error in the above PDF and excel spreadsheet regarding CSS support. Because Outlook 2007 is so random in what CSS it does or does not support this spreadsheet and Microsoft have just stated ‘does not support’.
For example the CSS attribute vertical-align is listed as not supported by Outlook 2007. However it works on table cells, just not other HTML elements. This document is a useful start, but I would be interested to see a Position is Everything style breakdown of the actual behaviour within Outlook 2007.
Jake Rutter
February 22, 2008 2:17am
Great list, this is a good resource to go by. Why would Microsoft release the new Office 2007 without support for background-image? That makes no sense. Since background-image is not supported, does that mean you can use the property background within a table to show a background image? Or is there just no way to show background images in HTML Emails for Outlook 2007.
David Smith
March 28, 2008 4:44am
This is such a good resource. Thank you so much!
I am one of those web designers who has never built a HTML TABLE-based layout in his life. I “grew up” on CSS and XHTML, so Microsoft doing what they’ve done with both OUTLOOK 07 and Windows Live Mail is just unbelievable.
It’s unnecessary. When is a Home user going to need the more advanced layouts possible in Word docs in an email? If they need this kind of precision they should attach a Word.doc or PDF to their email instead!
Basically yet another example (think IE6) of MS riding rough shod over the views of designers.
Observer
March 29, 2008 12:20am
Just an observation - but all of the email templates you are selling as part of the campaign monitor do NOT follow the guide you have posted here!
For instance gmail does not support the style attr in the header, or background images, yet the majority if not all of the templates you are selling have style in the header and use lots of bg images.
Dave Greiner
March 29, 2008 10:51am
Hi Observer. When you import your email design into Campaign Monitor, we give you the opportunity to convert all CSS inline with a single click, which means all of these styles will then be supported by most/all email clients. Unfortunately given the results above, it’s a necessary evil right now.
James Grieg
April 2, 2008 7:03pm
This is really helpful for the new comers and good reference for future, too
David
April 2, 2008 8:57pm
This article is just… perfect!
Many, many thanks!
Keep it up!
Jason Millward
April 4, 2008 2:00am
As someone who builds several emails a week, this guide is a godsend. Thanks very much
Naveen Parth
April 15, 2008 12:42am
Thanks for Excellent resource and gr8 article.
George
April 21, 2008 11:38pm
How is it that it says padding works for Outlook 2007? Just tried a DIV with padding and Outlook 2007 ignored it…
Rocky
April 22, 2008 4:26am
I was almost positive that gmail removes padding. Am I wrong?
Warren
April 26, 2008 12:42am
Thank you for this resource! Much appreciated.
e-okul
May 16, 2008 12:29am
Hi, Thanks so much for publishing this information. Fantastic to have this on hand. It’s bookmarked!
Cheers, Jonathan
Thnks.
Hubbers
May 16, 2008 1:16am
I am just starting out with marketing emails. This post is invaluable!
Wayde Christie
May 16, 2008 11:31am
Keen to know what css shorthand is supported.
Herrimanjoe
May 17, 2008 3:23am
Gmail actually will support font-family, just not any font names in quotes.
Michelle
May 17, 2008 10:47am
Has anyone found a solution to the padding issue in Gmail? I’ve searched online for a workaround but haven’t been able to find one yet. Please help.
Jayd
May 17, 2008 3:32pm
Are there plans to post results for GroupWise 7 or the upcoming GroupWise 8?
thanks
Alberto Boni
May 22, 2008 12:43pm
Great article, thank you very much for sharing this research!
Pali Madra
May 23, 2008 4:51am
I’m a little confused here. While it is stated in this post that webmail (including Gmail) supports font-size CSS property, an article at email standards clearly states that the font-size CSS property is not supported by Gmail? The article at Email Standards can be found at http://www.email-standards.org/clients/gmail/.
The article at Email Standards was published on Nov 28, 2007 and this particular post was made on April 19, 2007 which is earlier to this article.
There are other CSS properties which according to this post on Campaign Monitor are supported but Email Standards states that the same properties are not supported. Does it mean that Gmail has stopped supporting some CSS properties.
I’m very confused please help!
website design
May 27, 2008 2:26am
The guide to email htmls is :
1. Never use css. and
2. Never never use css.
Mathew Patterson
May 28, 2008 1:17pm
@Pali
With the Email Standards Project, we are testing what happens if you don’t use CSS inline at all - in which case Gmail does not support any CSS.
You can get pretty good results with Gmail if you use all inline CSS though, as shown here. Keep in mind that webmail clients do often change too.