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-
Email design guide
Straight to the point advice on creating beautiful emails that work.
-
Single-click testing
See screenshots of your email in 20+ email clients and check against spam filters.
-
Powerful API
Interact and “sync” with your account via simple web-based methods.
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
Wojtek
May 16, 2007 1:51am
Thank you very much, this is very useful stuff.
Julien
May 16, 2007 4:43am
thanks a lot!
Yuval
May 16, 2007 7:44am
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
May 16, 2007 11:40am
Amazing article. Keep it up Campaign Monitor!
entact
May 18, 2007 10:52am
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
May 22, 2007 12:32pm
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
May 24, 2007 4:31pm
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?
JavierJz
May 28, 2007 6:34am
This is the best “ANALISIS” 4 Gigants Email providers ... Cool !!!
Anders Steinlein
May 28, 2007 8:30am
David, thanks for the post. However, I’m having trouble getting <style> to work in the new Live Mail, even when placing it in the <head> as you say. Do you have any insight in this?
Dave Greiner
May 28, 2007 11:31am
Anders, I just double checked my original test email in Live Mail, and it appears they have since dropped support for style in the head of the document. Very disappointing news! I’ll jump in and do a few more tests and update the results with what I find.
Chris
May 30, 2007 3:03pm
Does anyone know if there is an issue with doubling up your styles ie: having them in both the <head> and <body>
Dave Greiner
May 30, 2007 8:10pm
Chris, I haven’t heard about any problems relating to this no. Unfortunately it’s a necessary evil sometimes.
Roxy Rosen
May 31, 2007 4:40am
This is a really great article and study. Thank you for all the work and testing out so many email environments. Much appreciated.
Benjamin
June 7, 2007 7:54pm
Great article! Thanks a lot!
Does anyone has an idea on how to fix a not wanted linebreak after using an HTML entity in Mac Entourage 2004 V. 11.2.5?
I also tried to find a solution on how to use internal anchors in HTML mails on Lotus Clients.
Ranni
June 9, 2007 8:00pm
Absolute supremacy of Thunderbird!!!
I should use it..
Jose
June 15, 2007 8:28am
Good article, thanks. However, I’d like to know which clients support embedded forms.
Dave Greiner
June 15, 2007 11:56pm
Jose, we’ve written about this before, and support has gotten much worse since then, especially since Outlook 2007 was released. I’d stay away from embedded forms if I was you.
Tory
June 21, 2007 2:28am
Extremely helpful post (bookmarking it as we speak). As a designer who has been making websites since the first Mosaic browser days - coding HTML e-mails makes me feel like it’s the mid-1990s again…and it’s frustrating!
Af for Stephanie’s question concerning Outlook Web Access - I too have recently come up against major issues with this client. When I view the source to my test emails, it appears that this client strips the style information throughout the markup. For example, trying to play it safe by writing an inline style like this:
<p style=“font-family:Arial, sans-serif; font-size:10px; color:#666666;”>
will end up like this
<p style=”“>
It will effectively erase anything in between the “” after style anywhere in the e-mail. I have been scouring the web for any information about how to handle this when I came across this excellent article. Does anyone have a clue how to deal with this?
Dave Greiner
June 21, 2007 11:15am
Tory, we haven’t had much experience with Outlook Web Access, but I realize it’s very popular in some corporate circles and plan on doing some more testing with it soon.
MH
June 22, 2007 3:55am
re: Outlook Web Access:
Just recently did some testing…found that indeed it does strip out all CSS, including inline, EXCEPT in IE. Not surprising, since the IE version is a much different client overall.
Dave Greiner
June 22, 2007 1:05pm
Thanks for sharing your findings MH.
Gregory Brine
June 27, 2007 3:16pm
That’s one of the best, most comprehensive articles I’ve read in a long time. I’ve been banging my head against the wall, trying to explain why email templates are now harder than building a basic site, and you’ve really helped me to justify that.
Why, oh why Microsoft decided to use the Word Engine, and not the IE engine is beyond me. I really don’t believe their argument about it being more secure, they just want to encourage you to use word for making the email - but then it won’t work in anything else!
One day, they’ll be a working group for standardising emails, like there’s been for browsers. Perhaps it’s time we - the web community - shifted it’s focus to that problem for a little while.
Dave Greiner
June 27, 2007 3:53pm
Cheers for the kind words Greg, glad you found the guide useful. We completely agree with you about standards issue, and have a few ideas of our own on that front. We’ll be posting more on this soon.
Conor
July 3, 2007 11:58pm
I’ve never posted a comment on a web developers’ resource site before, despite having read many over the past 10 years.
This page is so valuable and so incredibly useful that I had to break the habit of a lifetime to say thank you! :-)
I’d donate if you had a link; that’s how much time this page has saved me!
M$ really have screwed up royally once again with their Outlook 2007 “upgrade”. Arrgh!
Lesson learnt. Table layouts for e-mail only, and a minimum of CSS styling. A depressing lesson to learn, but when companies without a clue have monopolies what are we to do? ;)
Dave Greiner
July 4, 2007 2:27pm
Wow Conor, that’s great to hear and thanks for chiming in with your thoughts!
paulb
July 9, 2007 6:33pm
thanks for the input….
Henrik
July 10, 2007 6:55am
You saved me soooo much time. Thank you very very much.
3kolone
July 16, 2007 7:42pm
Great stuff ... I am using this tipps when optimizing e-mail newsletters. Great articles on campaignmonitor ... it’s my daily read!
Demonz Media
July 25, 2007 1:24pm
Thank you for taking the time to test these browsers. It is odd that MS have removed CSS support, but it makes sense that they would want to preserve the syntax that users are composed in. I have frequently had issues sending (client software) emails from Thunderbird to Outlook where I have used CSS - this explains some of it.
Ross
August 12, 2007 9:38am
I love you David Grenier.
Golda
August 22, 2007 2:59pm
I am soooo new to HTML, but I want to create webpages in iWeb ‘08 to then use via iContact to email out. I did one mailing but it was a mess in many email client due to CSS vs. tables. Arg!!! This is the site. http://web.mac.com/colleencassity/Cassity_Malone_Insurance/Blank.html
iWeb is so easy to use. Any way to take a website and convert it to tables??? This seems to be a million dollar question for me right now.
Thanks!!!
Jonathan Evatt
August 23, 2007 5:57pm
Thanks so much for publishing this information. Fantastic to have this on hand. It’s bookmarked!
Cheers,
Jonathan
Biggie
September 1, 2007 2:55am
Great documentation. This will save me tons of time in my redesign of my firm’s HTML e-mail templates. Thank you thank you thank you!
tutala
September 10, 2007 9:32pm
Where is Kmail ?! Kmail is king !
Reynder Bruyns
September 12, 2007 6:26pm
I read somewhere that you have to put the text of a link in an e-mail between a tag. And that you have to declare the again for the link.
Something like: Link text
Any experience with this??
Reynder Bruyns
September 12, 2007 6:39pm
Another try to show you the code:
<a href=“url” target =“email”><font face=etc><u>Link text</u></font></a>
Any experience with this?? They say it is better for Hotmail otherwise the link style is ignored.
TwisterMc
September 13, 2007 7:27am
This is a FANTASTIC list. My question is do spam filters have a better change of marking email as spam if it includes CSS in the head (link or script) as compared to the body copy?
Dave Greiner
September 13, 2007 9:05am
TwisterMc, I’ve never heard of the position of the CSS impacting spam filter results, but with the variety of filters out there you can never be 100% positive. I can tell you that some will give you a negative sore if you have errors in your CSS or HTML, so no matter where you place it, make sure it’s error-free and you should be fine.
Reynder, thanks for the Hotmail sample. To be honest I haven’t heard of that being necessary before. Anyone else care to comment on it?
R Kenney
September 14, 2007 7:30am
Hello all,
Trying to design new signatures for my company - cannot get either padding or margin tags to work (in Thunderbird or Outlook 2003) . I have tried using style tag in and and span> but none work - any idea what I’m doing wrong? Renders great in all browsers!
http://www.johnvarvatosfragrance.com/sig_test.html
thanks!
Rob
R Kenney
September 14, 2007 7:32am
sorry - my code was stripped above, I meant I have tried putting the style attributes in
td tags
div tags
span tags
and none worked
Dan
September 14, 2007 11:24am
I’m using Lotus Notes 8 now and all previous email newsletters that wouldn’t load correctly in the client are now appearing correctly. Even ones with CSS embedded.
Be interested to see an updated test on Notes 8.
Fajar Dhumadi
September 18, 2007 7:44pm
Thanks for providing the info.
This is very valuable information that I need for solving problem that I have because I just found get problem with embeded CSS on HTML email at Gmail and after walk through the net and visiting some web CSS related then I am took here.
Once more time, thanks for publishing this info, I have bookmark this page ;-)
Abby
September 19, 2007 3:46am
Perhaps this has changed since you drafted your table, but I just completed an “optimized for Gmail” email template (ugh - basically, take a nicely marked up HTML page and bloat it with inline styles - sigh) and can vouch for the fact that Gmail does support floats and font-family.
Abby
September 19, 2007 4:21am
Oh, and if you are as frustrated as I am that Gmail doesn’t support style declarations in the head, why not request it as a feature? I just found Gmail’s request a feature form and took advantage of the opportunity to bend Google’s ear. Maybe if loads of folks request it, it will become a reality.
https://services.google.com/inquiry/gmail_suggest/
Here is what I wrote under “I have a better idea:”
SUPPORT CSS STYLE DECLARATIONS IN THE HEAD OF HTML EMAILS!
I have to add significant extra hours to every email design project in order to take all my nicely separated styles in my nicely standards-compliant HTML prototype and then bloat my code by stuffing all those styles inline—just so that my gmail subscribers can see the same thing the rest of the standards compliant world sees. Not only is this bandwidth wasting for the world and more expensive (in terms of hours spent) to me and my clients, it makes me think very poorly of Google as I go through this soul sucking, professionally demeaning exercise.
Please support css style declarations in the head of HTML emails. Why can’t gmail support an email with style and content elegantly separated? Why is this standard of the web dismissed?
PLEASE PLEASE PLEASE.
Chris
September 21, 2007 6:06am
I love this. on the other hand, does anybody have this kind of information for GroupWise?
dang GroupWise.
Craig
September 23, 2007 8:54am
Awesome fellas! Very handy, very comprehensive!
Alexabder Ross
September 25, 2007 3:24am
First, thanks for this invaluable page!!
Second, can you confirm (or refute) that Outlook2007 does NOT support multiple classes on the same element? (ex. ...)
kathir
September 26, 2007 11:10pm
i am useing background image in email template but it does not work in gmail. is ther any alternate way to solve it
Steve
October 4, 2007 2:15pm
No surprise, but I, too think this aticle is invaluable for many reasons.
I regret to say that I use a competitor’s service to distribute my emails ... until today. I think C.M. should be rewarded for the extra value that it provides its customers, and I will be switching my service effective immediately to prove it. Kudos for a job well done, and a customer gained!
Matthew
October 10, 2007 12:43am
I’ve been doing email newsletters / templates for years and for the reasons this great article points out, I’ve reached a point where I do everything with tables and inline styles.
The safest method of ensuring your email renders as close to the design as possible is to build initially without any CSS at all. You then use inline CSS to “tweak” the layout as close to the design as possible.
The bottom line is that you cannot afford to ignore the biggest player - microsoft. Unfortunately, what they do inevitably impacts on the way you have to do things.
Once you’ve reached an unhappy alliance of tables and inline styles, your designs, while being code heavy, will render correctly in 95% of email clients.