A Guide to CSS Support in Email: 2007 Edition

Update This study has since been superseded. View the latest edition

It's been just over 12 months since I posted our original Guide to CSS Support in Email and quite a bit has changed since. Sadly, the most significant of these changes was in the wrong direction, with Microsoft's recent decision to use the Word rendering engine instead of Internet Explorer in Outlook 2007. We've written plenty about it already including an explanation of the reasoning behind it. More on its impact on CSS support later.

It hasn't all been doom and gloom though, a number of vendors have maintained or improved their support for CSS, especially in the web-based email environment. The new Yahoo! Mail looks very promising and the old Hotmail will be making way for the new Windows Live Mail in the coming months. Desktop based apps tend to move a little slower and not a great deal has changed on that front, but traditionally they've been the best performers anyway. This year we added Outlook 2007, the new Yahoo! Mail and Mozilla Thunderbird for the Mac to our test suite, and also noticed some subtle changes in others.

So what's changed?

Outlook 2007

Microsoft OfficeNo doubt the Outlook 2007 "incident" had the biggest impact on CSS support in email over the last year. Many commentators in the industry claimed the change was no big deal, that this change doesn't really make a difference. Funnily enough, most of these comments came from the marketing side of the fence, not the design side. Understandably, most marketers and project managers couldn't care less about this change - there are ways around it using tables and inline CSS, so who cares? Well, designers care.

I wasn't kidding when I said Microsoft took email design back 5 years. Using tables for layout is a dying art in the web design community, in fact many designers who have started CSS/XHTML in the last few years have never even coded a table based layout before. This is a good thing. CSS based emails are more lightweight, much more accessible to those with disabilities and because content is separated from presentation, much easier to dumb down for those reading email on mobile devices. This change by Microsoft means that for at least the next 5 years any designer not familiar with table based layouts will need to learn a completely different way of creating a HTML page if they want to send emails to an Outlook user.

The new Yahoo! Mail

The new Yahoo! Mail BetaOn a much more positive note, Yahoo! have been putting the finishing touches on their brand new mail interface. Mark did some solid testing on the new Yahoo! Mail vs Windows Live Mail back in January, which is certainly worth a read. The exciting news is that Yahoo! have maintained their lead as the best web-based email client out there for CSS support. There are some subtle differences to the older version, which we've noted in our results below.

Early talk from the Yahoo! camp suggests they will not be forcing all of their current users to the new platform, but instead make it the default for new customers and give existing customers the option to upgrade.

Windows Live Mail

Windows Live MailIt should also be noted that Windows Live Mail (the new Hotmail), which we covered an early beta of in last year's test is rolling out in the coming months. Unlike Yahoo, Live Mail will be completely replacing the older Hotmail interface over the course of the next few months, meaning our days coding for Hotmail's quirks will soon be over.

It's not all rosy though. In the 12 months since I last tested the Live Mail beta, they've dropped support for a number of key selectors and properties. As detailed in the results, a number of key CSS selectors are no longer supported. The most significant of these is e#id and e.className, which as many of you know means inline CSS will be the only way to get much of your formatting to work for Hotmail subscribers moving forward. Very frustrating.

New Recommendations

When I initially wrote about the Outlook 2007 shock a few months back, I said:

If your email breaks in Notes or Eudora, it was often an acceptable casualty, but if it breaks in Outlook, you're more than likely ostracizing too many recipients to justify your design approach.

Unfortunately I still think this is the case. If there's a chance that a reasonable percentage of your recipients will be using Outlook 2007, then a completely CSS based email design just won't cut it. If your layout is column based, you have no option but to use tables for the basic structure of your email. You're also going to need to dumb down your CSS usage (see our results below for the nitty gritty on what does and doesn't work).

Business to Business emails

I wasn't able to track down any predictions on Office 2007 penetration in the business world. Considering it was only released a few months ago, you might have some time before the install base becomes significant. Either way though, you're going to get caught eventually. Considering Outlook's 75% domination over corporate email, you've got little choice but to bow down and stick to tables and basic CSS for all your email templates.

The verdict: Table-based and possibly inline CSS.

Business to Consumer emails

Across the spectrum of consumer based email environments little has changed really. Yahoo! has maintained their position as the industry leader, while Hotmail has simply been replaced with new wrapping but next to no improvements. Just like last year, Gmail still provides very limited CSS support. If you've got a decent percentage of Gmail subscribers, it's table based with inline CSS all the way I'm afraid. Of course, you can never assume that none of your home based subscribers are using Outlook 2007, so this is a judgement call you'll need to make yourself.

If you do decide to stick with CSS based layouts for B2C emails, I'd recommend doing plenty of testing across Hotmail, Yahoo!, AOL and Gmail to make sure it's presentable in each.

The verdict: Either CSS or table-based layouts but make sure you test, test, test.

Posted by David Greiner

116 Comments

  • Wojtek
    16th May

    Thank you very much, this is very useful stuff.

  • Julien
    16th May

    thanks a lot!

  • Yuval
    16th May

    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
    16th May

    Amazing article. Keep it up Campaign Monitor!

  • entact
    18th May

    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
    22nd May

    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
    24th May

    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
    28th May

    This is the best “ANALISIS” 4 Gigants Email providers ... Cool !!!

  • Anders Steinlein
    28th May

    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
    28th May

    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
    30th May

    Does anyone know if there is an issue with doubling up your styles ie: having them in both the <head> and <body>

  • Dave Greiner
    31st May

    Chris, I haven’t heard about any problems relating to this no. Unfortunately it’s a necessary evil sometimes.

  • Roxy Rosen
    31st May

    This is a really great article and study. Thank you for all the work and testing out so many email environments. Much appreciated.

  • Benjamin
    8th June

    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
    10th June

    Absolute supremacy of Thunderbird!!!
    I should use it..

  • Jose
    15th June

    Good article, thanks. However, I’d like to know which clients support embedded forms.

  • Dave Greiner
    16th June

    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
    21st June

    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
    21st June

    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
    22nd June

    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
    22nd June

    Thanks for sharing your findings MH.

  • Gregory Brine
    27th June

    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
    27th June

    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
    4th July

    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
    4th July

    Wow Conor, that’s great to hear and thanks for chiming in with your thoughts!

  • paulb
    9th July

    thanks for the input….

  • Henrik
    10th July

    You saved me soooo much time. Thank you very very much.

  • 3kolone
    17th July

    Great stuff ... I am using this tipps when optimizing e-mail newsletters. Great articles on campaignmonitor ... it’s my daily read!

  • Demonz Media
    25th July

    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
    12th August

    I love you David Grenier.

  • Golda
    22nd August

    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
    23rd August

    Thanks so much for publishing this information. Fantastic to have this on hand. It’s bookmarked!

    Cheers,
    Jonathan

  • Biggie
    1st September

    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
    11th September

    Where is Kmail ?!  Kmail is king !

  • Reynder Bruyns
    12th September

    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
    12th September

    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
    13th September

    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
    13th September

    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
    14th September

    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
    14th September

    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
    14th September

    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
    19th September

    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
    19th September

    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
    19th September

    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
    21st September

    I love this. on the other hand, does anybody have this kind of information for GroupWise?
    dang GroupWise.

  • Craig
    23rd September

    Awesome fellas! Very handy, very comprehensive!

  • Alexabder Ross
    25th September

    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
    27th September

    i am useing background image in email template but it does not work in gmail. is ther any alternate way to solve it

  • Steve
    4th October

    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
    10th October

    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.

  • Tim
    13th October

    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
    13th October

    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
    19th October

    :( 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
    31st October

    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)
    31st October

    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
    2nd November

    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í
    7th November

    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
    13th November

    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
    16th November

    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
    21st November

    Thank you for this article. It will be very usefull.

  • Tek Boy
    21st November

    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
    22nd November

    thanks for the GREAT post! Very useful…

  • Alan
    27th November

    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
    27th November

    This is much more complicated then I was thinking!

    Great resource!

  • MHGTraining
    3rd December

    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
    4th December

    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
    4th December

    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
    5th December

    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
    15th January

    Finally all content at one place :)

    Thank you wary much!

  • blindog
    15th January

    Thanks for the .PDF version, very useful.

  • HTG
    16th January

    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
    17th January

    THANK

    YOU

    SO

    MUCH!!!

  • Laurent
    24th January

    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
    29th January

    Absolute supremacy of Thunderbird!!!
    I should use it..

  • Email Marketing Solutions
    4th February

    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
    4th February

    Pretty well explained! Great for beginners but for intermediate too.

  • World Links
    4th February

    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
    5th February

    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
    5th February

    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
    22nd February

    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
    28th March

    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
    29th March

    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
    29th March

    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
    3rd April

    This is really helpful for the new comers and good reference for future, too

  • David
    3rd April

    This article is just… perfect!
    Many, many thanks!
    Keep it up!

  • Jason Millward
    4th April

    As someone who builds several emails a week, this guide is a godsend. Thanks very much

  • Naveen Parth
    15th April

    Thanks for Excellent resource and gr8 article.

  • George
    22nd April

    How is it that it says padding works for Outlook 2007? Just tried a DIV with padding and Outlook 2007 ignored it…

  • Rocky
    22nd April

    I was almost positive that gmail removes padding. Am I wrong?

  • Warren
    26th April

    Thank you for this resource! Much appreciated.

  • e-okul
    16th May

    Hi, Thanks so much for publishing this information. Fantastic to have this on hand. It’s bookmarked!
    Cheers, Jonathan
    Thnks.

  • Hubbers
    16th May

    I am just starting out with marketing emails. This post is invaluable!

  • Wayde Christie
    16th May

    Keen to know what css shorthand is supported.

  • Herrimanjoe
    17th May

    Gmail actually will support font-family, just not any font names in quotes.

  • Michelle
    17th May

    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
    17th May

    Are there plans to post results for GroupWise 7 or the upcoming GroupWise 8?

    thanks

  • Alberto Boni
    22nd May

    Great article, thank you very much for sharing this research!

  • Pali Madra
    23rd May

    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
    27th May

    The guide to email htmls is :
      1. Never use css. and
      2. Never never use css.

  • Mathew Patterson
    28th May

    @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.

  • Overground
    30th May

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

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

  • Dion Jensen
    10th June

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

  • roman
    21st June

    e:hover is not supported in outlook2003 ...

  • roman
    21st June

    e:hover is not supported in outlook2003 ...

  • Jamie Harbison
    21st June

    Thanks for the article - very helpful reference.

  • wsdcent
    2nd July

    this is just fantastic, nice tutorial

  • mitesh
    15th July

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

  • driver
    16th July

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

  • JSHAW
    25th July

    very helpful! thanks so much!

  • ag3nt42
    2nd August

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

    First vista and DX-10, now outlook07 and css

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

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

    including external and internal CSS

    ALOT OF CODE as most of you know..

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

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

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

    thanks guys
    ~ag3nt42

  • Suchmaschinenoptimierung
    9th August

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

  • darkrose
    24th November

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

  • v8webdesign.com
    11th December

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

  • xiaoselangone
    14th December

    江城医院,提供优质服务

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


    Boyuan metal,the best aluminiun alloy ingot producer

  • iGrapix
    16th December

    Useful Resources… Thanks a lot

  • Affivesteamma
    16th December

    Funny foto <a >here</a>

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

Create an account