Home Resources Blog

Update: This study has since been superceded by the new and improved 2008 Edition

Since the rise of Internet Explorer, web designers have had to test their designs across multiple web browsers. No one likes it, but we’ve all copped it on the chin, written a few hacks and moved on with our lives. After all, 3 to 4 browsers aint that bad – and they finally seem to be getting their act together.

If Internet Explorer is the schoolyard bully making our web design lives a little harder, then Hotmail, Lotus Notes and Eudora are serial killers making our email design lives hell. Yes, it’s really that bad.

Inspired by the fantastic work of Xavier Frenette, we decided to put each of the popular email environments to the test and finalize once and for all what CSS is and isn’t supported out there.

We’ll dig straight into our recommendations based on what we found, followed by the results themselves with a few more details about our findings.

Recommendations

Because of the huge variation of support across each email environment, there really isn’t any one design approach that will guarantee consistency. Instead, you should take a couple of things into account.

1. The consistency demands of your client

If you have a client who understands the challenges you face and realizes that some email environments are just plain old broken (we can always dream), I recommend going for broke and following Mark Wyner’s recent article on CSS design in email (we even include a free template to get you started). This allows you to code your email using moderns standards based design that degrades gracefully for these “broken” email environments.

On the other hand if your client demands consistency no matter what, or the CEO’s using Lotus Notes, you’ll have to dull down your design, stick with tables for layout and use only basic text formatting via CSS. You may even have to go down the inline CSS route.

2. The potential email environment of your recipients

You’ll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using.

Business to Business

If you’re sending Business to Business (B2B) emails, you’re definitely going to have to support Outlook and to a lesser extent Lotus Notes. In a recent survey of B2B readers, EmailLabs found that more than 75% use a version of Outlook and a further 9% use Lotus Notes. The good news is that Outlook’s support for CSS is quite good, but Notes’ certainly isn’t. You’ll need to weigh up the trade-offs yourself there.

Business to Consumer

If you’re sending Business to Consumer (B2C) campaigns, then you’ll definitely need to have Yahoo!, Hotmail and possibly AOL covered. Gmail’s still purring under 5% total penetration, but if you’re targeting early adopters then this percentage will likely be significantly higher.

Yahoo and AOL offer very respectable CSS support. Hotmail isn’t too painful provided you include your <style> element in the <body> and not the <head>, while Gmail gives you no choice but to use inline styles only.

Further to these concerns, there’s also the issue of image blocking and preview panes, but that’s a whole other article.

Results

Down to the nitty gritty. To cover each email environment, we’ve split our results up into web-based, PC and Mac email software. Use the links below to jump straight to the respective findings.

  1. Web-based results – Gmail, Hotmail, Yahoo! and Windows Live Mail
  2. PC results – Outlook 2003 and Outlook Express, Lotus Notes, Thunderbird
  3. Mac results – Mac Mail, Entourage, Eudora

Web-based

Xavier covered the web-based email environments perfectly, but we decided to throw Microsoft’s new Windows Live Mail into the mix to gaze into the crystal ball and see if Hotmail may have a brighter future. The biggest improvement we found being support for the <style> element in the <head> of your page.

The <style> element

The standard place for the style element is in the <head> of the document, but to ensure the styles appear in Hotmail, you can also insert them within the <body>. We tested both, just to make sure.

Web-based support for the <style> element

Gmail Hotmail Yahoo! Mail Windows Live Mail
<style> element in the <head> No No Yes Yes
<style> element in the <body> No Yes Yes Yes

The <link> element

The <link> element is used to reference a separate CSS file. 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.

Web-based support for the <link> element

Gmail Hotmail Yahoo! Mail Windows Live Mail
<link> element in the <head> No No No No
<link> element in the <body> No No No No

CSS Selectors

Selectors are used to “select” specific elements on a page so that they can be styled. Besides Gmail, most web-based email environments offer pretty good selector support.

Web-based support for CSS Selectors

Gmail Hotmail Yahoo! Mail Windows Live Mail
* No Yes Yes Yes
e No Yes Yes Yes
e > f No No Yes No
e:link No Yes Yes Yes
e:active, e:hover No Yes Yes Yes
e:focus No No Yes No
e+f No Yes Yes No
e[foo] No Yes Yes No
e.className No Yes Yes Yes
e#id No Yes Yes Yes
e:first-line No Yes Yes Yes
e:first-letter No Yes Yes Yes

CSS Properties

CSS property support ranges from very good (Yahoo!) down to so-so (Gmail). If you want results in Gmail, you’ll need to do your styles inline (<p style="...">this is pretty now</p>) rather than via the <style> element.

Web-based support for CSS Properties

Gmail Hotmail Yahoo! Mail Windows Live Mail
background-color Yes Yes Yes Yes
background-image No Yes Yes No
background-position No No No No
background-repeat No Yes Yes No
border Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes
border-spacing Yes No Yes No
bottom No Yes Yes No
caption-side Yes No Yes No
clear No Yes Yes Yes
clip No Yes Yes No
color Yes Yes Yes Yes
cursor No Yes Yes Yes
direction Yes Yes Yes Yes
display No Yes Yes Yes
empty-cells Yes No Yes No
filter No No Yes Yes
float No Yes Yes Yes
font-family No Yes Yes Yes
font-size Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes Yes Yes
font-weight Yes Yes Yes Yes
height No Yes Yes Yes
left No Yes Yes No
letter-spacing Yes Yes Yes Yes
line-height Yes Yes Yes Yes
list-style-image No Yes Yes No
list-style-position Yes No No Yes
list-style-type Yes No Yes Yes
margin Yes No Yes No
opacity No No Yes Yes
overflow Yes Yes Yes Yes
padding Yes Yes Yes Yes
position No No No No
right No Yes Yes No
table-layout Yes Yes Yes Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes Yes Yes
text-transform Yes Yes Yes Yes
top No Yes Yes No
vertical-align Yes Yes Yes Yes
visibility No Yes Yes Yes
white-space Yes Yes Yes No
width Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes
z-index No Yes Yes No

PC

Aside from Lotus Notes, all our PC-based email clients behaved very well. All versions of Outlook, Outlook Express and AOL 9 use Internet Explorer to render their emails, so some selectors weren’t supported. This also means you’ll still need to allow for the range of CSS problems IE introduces. Thunderbird scored beautifully.

The <style> element

Perfect support except for Lotus Notes, which ignores the <style> element altogether.

PC support for the <style> element

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
<style> element in the <head> Yes Yes No Yes
<style> element in the <body> Yes Yes No Yes

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/OE AOL 9 Lotus Notes Thunderbird
<link> element in the <head> Yes Yes Yes Yes
<link> element in the <body> Yes Yes Yes Yes

CSS Selectors

Thunderbird scored highly, but because the majority use IE to render your email, selector support is limited.

PC support for CSS Selectors

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
* Yes Yes No Yes
e Yes Yes No Yes
e > f No No No Yes
e:link Yes Yes No Yes
e:active, e:hover Yes Yes No Yes
e:focus No No No Yes
e+f No No No Yes
e[foo] No No No Yes
e.className Yes Yes No Yes
e#id Yes Yes No Yes
e:first-line Yes Yes No Yes
e:first-letter Yes Yes No Yes

CSS Properties

You can have a field day as long as you’re not sending to Notes. It offers dismal property support that includes only very basic text manipulation.

PC support for CSS Properties

Outlook 2003/OE AOL 9 Lotus Notes Thunderbird
background-color Yes Yes No Yes
background-image Yes Yes No Yes
background-position Yes Yes No Yes
background-repeat Yes Yes No Yes
border Yes Yes No Yes
border-collapse Yes Yes No Yes
border-spacing No No No Yes
bottom Yes Yes No Yes
caption-side No No No Yes
clear Yes Yes No Yes
clip Yes Yes No Yes
color Yes Yes Yes Yes
cursor Yes Yes No Yes
direction Yes Yes Yes Yes
display Yes Yes Yes Yes
empty-cells No No No Yes
filter No No No No
float Yes Yes No Yes
font-family Yes Yes Yes Yes
font-size Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes No Yes
font-weight Yes Yes Yes Yes
height Yes Yes No Yes
left Yes Yes No Yes
letter-spacing Yes Yes No Yes
line-height Yes Yes No Yes
list-style-image Yes Yes No Yes
list-style-position Yes Yes No Yes
list-style-type Yes Yes Yes Yes
margin Yes Yes No Yes
opacity No No No Yes
overflow Yes Yes No Yes
padding Yes Yes No Yes
position Yes Yes No Yes
right Yes Yes No Yes
table-layout Yes Yes No Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes No Yes
text-transform Yes Yes No Yes
top Yes Yes No Yes
vertical-align Yes Yes No Yes
visibility Yes Yes No Yes
white-space No No No Yes
width Yes Yes No Yes
word-spacing Yes Yes No Yes
z-index Yes Yes No Yes

Mac

While Mac Mail and Entourage offer fantastic support across the board, I wasn’t surprised to find that Eudora refused to come to the party. Basically, Eudora sucks.

The <style> element

Go for it, just ignore Eudora.

Mac support for the <style> element

Mac Mail Entourage Eudora
<style> element in the <head> Yes Yes No
<style> element in the <body> Yes Yes No

The <link> element

Same old story, no Eudora.

Mac support for the <link> element

Mac Mail Entourage Eudora
<link> element in the <head> Yes Yes No
<link> element in the <body> Yes Yes No

CSS Selectors

Mac Mail support was fantastic and Entourage was a close second.

Mac support for CSS Selectors

Mac Mail Entourage Eudora
* Yes Yes No
e Yes Yes No
e > f Yes Yes No
e:link Yes Yes No
e:active, e:hover Yes Yes No
e:focus Yes Yes No
e+f Yes No No
e[foo] Yes No No
e.className Yes Yes No
e#id Yes Yes No
e:first-line Yes Yes No
e:first-letter Yes Yes No

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
background-color Yes Yes No
background-image Yes Yes No
background-position Yes Yes No
background-repeat Yes Yes No
border Yes Yes No
border-collapse Yes No No
border-spacing Yes No No
bottom Yes Yes No
caption-side No No No
clear Yes Yes No
clip Yes Yes No
color Yes Yes No
cursor Yes No No
direction Yes No No
display Yes Yes No
empty-cells Yes No No
filter No No No
float Yes Yes No
font-family Yes Yes No
font-size Yes Yes No
font-style Yes Yes No
font-variant Yes Yes No
font-weight Yes Yes No
height Yes Yes No
left Yes Yes No
letter-spacing Yes Yes No
line-height Yes Yes No
list-style-image Yes Yes No
list-style-position Yes Yes No
list-style-type Yes Yes No
margin Yes Yes No
opacity Yes No No
overflow Yes No No
padding Yes Yes No
position Yes Yes No
right Yes Yes No
table-layout Yes Yes No
text-align Yes Yes No
text-decoration Yes Yes No
text-indent Yes Yes No
text-transform Yes Yes No
top Yes Yes No
vertical-align Yes Yes No
visibility Yes Yes No
white-space Yes Yes No
width Yes Yes No
word-spacing Yes Yes No
z-index Yes Yes No

 

We hope you find these results helpful. Let’s hope that as browsers move forward, ISP’s and email client developers follow suit. It’s our sanity at stake here, right?

UPDATE: After an oversight pointed out by Lachlan Hunt, we’ve scaled back Eudora’s CSS support to nil, zilch, zero.

  • Jurgen

    Great post, it has always been sort of a grey zone with web based email clients. This makes it a bit more clear!

  • Jon

    Excellent resource! Thanks for putting the time into simplifying this for us.

  • Chris Harrison

    Thanks for sharing this David! Definitely saving this for future reference. I appreciate you putting the time into compiling all of this for everyone.

  • Josh Williams

    Excellent. This is confirmation that we are not insane. Great resource!

  • Terry Evans

    Awesome. Thank you very much!
    Now I’ve got some real armour for heading into the HTML email battlefield. Although clearly you can’t have enough.

  • Colly

    Thank you, thank you, thank you… and thank you.

    Just what I need now that a certain record company are constantly badgering me to create mailouts that look like the website. Was having huge probs with web-based email, so this is bloody perfect.

  • Shane

    A fantastic resource for anyone designing CSS-based e-mails.

    I’ve bookmarked the page, and I’m sure I’ll be back. Thanks a lot for your efforts.

  • Asif

    Great work …

  • Simon

    Excellent piece. Explains a lot of things about email I have received that didn’t look correct! And may also explain some porr results on certain mails I have sent.

  • Amrit

    Nice post! Sending elegantly formatted emails is always a problem especially with people using all the email clients in the world. Thanks for sharing this.

  • Darren

    I’ve been looking for this type of resource for a year now. Good lookin’ out!

  • David

    So if I leave out the block from the head and only place it in the body the support should be about the same if I had placed it in both areas? Only now hotmail will see it?

    I just coded a css email and hotmail showed nothing. Not even a bare bones version.

    I’m also going to send google a nice little letter telling them to get their act together with gmail. I use gmail and love it but it really should support css. The folks over at google are plenty smart enough to have figured it out by now.

    Thanks for the nice article!

  • Quentin Ellis

    Great post, as the others say, thank you for the hard work. many questions answered

  • Arnold

    Can u post some sample program about CSS

  • Dave Greiner

    Arnold, if you’re looking for a sample CSS email template, the one available in this article is a great place to start.

    David, that’s right, placing the <style> element in the body is the way to go and won’t have any negative effects, except for Eudora, but as we illustrated that’s not really a problem because of its dismal CSS support.

  • Marina Krutchinsky

    Thank you very much for combining all data into a single article. It makes an excellent reference and removes most of “test and trial” and plain old guesswork. Most helpful!

  • AMC

    As a long-time, die-hard Eudora user, I agree that anything beyond the simplest markup is totally ignored … but keep in mind that Eudora users can choose “File > Open in Browser” to see HTML e-mails properly formatted. Don’t know how many do so, but for important e-mails or ones with interesting links, I usually do.

  • AMC

    in case I wasn’t totally clear … in Eudora, looking at an opened e-mail message that’s basically unreadable due to HTML markup (CSS or otherwise), the user chooses Open in Browser from the File menu. Eudora creates a temp .html file in file:///private/var/tmp/ and the message is shown is the user’s default browser, mark-up renders beautifully. This is the only way I can read my e-mails from AmEx …

  • Bill Burns

    This is fantastic, David. Thanks for putting the work into this. Instant reference bookmark…

  • ParadiseFound

    What version of Lotus Notes client was used for this test? Just interested…

  • Ed Brill

    this can’t possibly be a current version of Lotus Notes. Without disclosure as to what version, this seems like an incomplete analysis.

  • Niki Lin

    Great work guys!

    I was using css in my mails without knowing this could be such a problem for all those different mail agents. I think I’m going to point this out in my class. Again it’s sad to see that the battle for consistency among utilities is going on…

  • Dave Greiner

    Hey Ed,

    We tested the Notes compatibility on the latest version we could download from the IBM site. This was version 6.5.4, which was apparently released on March 27, 2005.

    If there is a more recent version of Notes that we can have access to, I’d be more than happy to replicate the test and update our findings.

  • Alex

    That¥s really great, david. Thanks for your fantastic work.

  • Patrick Corcoran

    Nice work. Well researched.

  • tribaldo

    Just say, thnx a lot! This guide is very useful for web developers. ;)

  • Joe

    Nice job on this article

  • Lachlan Hunt

    If Eudora doesn’t support any properties whatsoever, how were you able to determine that it supports the type selector? How about making all of the test cases you used available so we can see the results for ourselves, including clients you haven’t tested?

  • Lachlan Hunt

    With regards to putting the style element in the body instead of the head to support Hotmail, what happens if you just omit the start- and end-tags for the head and body elements? That is perfectly valid in HTML 4.01 (and earlier).

  • Dave Greiner

    Lachlan, that’s a very good point and one that we overlooked. I just double checked the results and Eudora changed the font-size for a H1 we were testing and we mistakingly took that as it supporting the style we declared for that H1. Pretty silly oversight really.

    Here’s the test HTML and CSS we used for our testing. If you have any other suggestions, I’d love to hear them.

    In regards to omiting the head tags from the document, that’s something we’d have to test, I haven’t tried that one before.

  • Ellen de Graaf

    You indicate that Hotmail supports background-images, but it doesn’t unfortunately :(
    I noticed Hotmail removes any CSS rule that uses a url().

  • Damien Buckley

    Hotmail supports background images but you’ll need to put the style tag inside the body tags, not in the document head – last time I checked anyway. I still think you’re better off putting your CSS in the head of the doc and letting Hotmail fall back to unstyled content – its more reliable for the minority who use it.

  • Ellen de Graaf

    I did put the style inside the body tags, but it didn’t work. I totally agree with you, but clients huh … They tell me a lot of our target audience still uses Hotmail (here in Holland), unfortunately :(

  • Bob Mixon

    Very, very nice! Great work and I appreciate it. I am linking to this page from my Site!

  • Enrique

    Genial.

  • loopion

    I think is the most useful analysis I’ve ever seen !

    Thanks a lot !

  • Spencer

    Wow, absolutly perfect info. I deal with HTML/Text (Multi) email on adaily basis. This is oging in my Links bar right now!

  • RickRanger

    An outstanding research effort! The depth and detail of your findings is exceptional.
    Well done.

  • Lachlan Hunt

    I noticed with a recent HTML mail I was forced to build (despite my desire to send only plain text e-mails) that Thunderbird will only render in quirks mode, regardless of the DOCTYPE used. So my beautiful, standards compliant work of art that renders beautifully in Firefox, has bugs in Thunderbird as a direct result of quirks mode.

  • Donna Zukowski

    I have a question about meta tags. I read somewhere that email programs ignore them. Should they be included? thanks

  • Donna Zukowski

    I’m also wondering is there anyway to keep on top of HTML specifications to lessen the amount of HTML winding up in SPAM?

  • Ben Richardson

    Hey Donna, that’s correct, email clients don’t care about meta tags. As for your HTML code affecting your SPAM scoring, content is usually the offender as opposed to code – here’s a little more information on this.

  • Gunther Bohnert

    Great work – thanks a lot. I’d like to mention one more Mac Client: PowerMail by CTM Development. Haven’t checked your test parameters with this one yet. Maybe I should…

  • Jon Harvey

    If you comment each line of style within the body tag Lotus Notes will render them… Weird but true… Just thought I’d add this little pearl

  • Amber S.

    Finally – one place to go to for CSS & email info. When I created my company’s newsletter using CSS a year ago, you don’t know how many articles, blogs, and other sites I read trying to find out what was supported (along w/ a million test emails sent to my Hotmail, Gmail, and Outlook accounts)! Thanks so much for doing all this testing!

  • Danny Foo

    The charts definetely going to help when trying to figure out why certain properties aren’t working.

    A very big thank you. :)

  • Blaze

    This is incredibly useful, thankyou very much. Maybe in the future you can update this with more popular clients etc as well? Cheers

  • just debra

    Double-Kudos to you! Thanks for such a great work.

  • alakazarm

    You should have added Thunderbird to the mac tests too…

  • Tek Boy

    Excellent work, guys — this really is an invaluable resource.

    After going over the list, I’ve decided against supporting Gmail, Lotus Notes and Eudora — they don’t support enough of the CSS spec to justify the effort. Excluding those clients, I think you’ll be able to achieve maximum compatibility across most of the major clients if you avoid supporting any of these CSS features covered in the article:

          The <style> element
                &#8226 <style> element in the <head>

          The <link> element
                &#8226 <link> element in the <head>
                &#8226 <link> element in the <body>

          CSS Selectors
                &#8226 e > f
                &#8226 e:focus
                &#8226 e+f
                &#8226 e[foo]
                &#8226 background-position
                &#8226 border-spacing
                &#8226 caption-side
                &#8226 empty-cells
                &#8226 filter
                &#8226 list-style-position
                &#8226 opacity
                &#8226 position
                &#8226 white-space

  • turd furgeson

    you must be the most bored person on the planet. also, any production designer worth their salt has this shit memorized. get a real job.

  • Bertrand

    To sum these good tables up, here is a list of the things who should restrain to to be compatible with:

    Hotmail
    Yahoo! Mail
    Windows Live Mail

    PC
    Outlook 2003/OE
    AOL 9
    Thunderbird

    Mac
    Mac Mail
    Entourage

    (Forget GMail, Lotus Notes and Eudora)

    Here’s the list:

    CSS selectors

    « style » element in the « body »
    *
    e
    e:link
    e:active, e:hover
    e.className
    e#id
    e:first-line
    e:first-letter

    CSS Properties

    background-color
    border
    clear
    color
    display
    float
    font-family
    font-size
    font-style
    font-variant
    font-weight
    height
    letter-spacing
    line-height
    padding
    table-layout
    text-align
    text-decoration
    text-indent
    text-transform
    vertical-align
    visibility
    width
    word-spacing

    Thanks for the article!

  • Chris

    I *love* you guys! :)
    Thanks for the extensive and invaluable work!
    Kudos

  • RARPSL

    I note that while you list Eudora for the Macintosh (which has poor internal HTML support and relies on “View in Browser” to do the heavy HTML rendering – to be fixed in forthcoming MacEudora 7.x whose native HTML rendering will use the MacOS X supplied Web Rendering engine) you ignore Windows Eudora which should score like IE since it uses the IE Rendering Engine for its Native Support (as well as, if requested in its settings, handing the HTML off to IE which launches and shows it in its own window [similar to what occurs on the Macintosh if you “View in Browser”]).

  • Cait

    I’ve noticed that you said that Yahoo doesn’t support background-position; however, when I do background: url(https://www.campaignmonitor.com/assets/uploads/image.gif) no-repeat bottom left; Yahoo seems to respect that. But if you break it down into background, background-repeat and background-position, then no Yahoo will not respect the background-position call.

    Would love to know if others can duplicate this.

  • Steven Tew

    What a great break down. Thanks for this?
    Would love to this expanded to cover position: relative and position : absolute. It could maybe be used to get around the lack of support for background-images.

  • Steve

    I have an HTML mail merge email going out with an invoice section i’d like printed on its own page. I can’t successfully force a page break before/after a section for a printed email. ‘page-break-after’ / ‘page-break-before’ don’t seem to register when printed through email though they work nicely printed from the web =

  • Matt

    Thanks for all !!!!!!!!!!! It’s a very good guide.

  • Donovan

    Thanks for the info, i’m glad I finally found something usefull thx again!

    Donovan

  • Gary

    Created our first XHTML/CSS based email, and all went well… Google stripped everything out, but it degraded well.

    Outlook etc all fine too, though had to click the “Click here to download pictures” to get the backgrounds etc to all load up….

    HOWVER – Hotmail (or livemail which it is now) – displayed it a bit like outlook (without the backgrounds etc), but at a tiny scale… I assume there’s some sort of font-size inline css going on, and my font with font-size: 0.6em is becomming even smaller….

    Any ideas?

    Thanks
    Gary

  • Gary

    to confirm – it’s definately my:

    body {font-size: 0.6em;}

    Thats causing the issue… If i change it to a fixed 10px it’s fine. Shame the text cannot then be resized…

    It looks like LiveMail already includes a body font size (at 0.69em), so all sizes (in .em) are taken from this… Shame… looks like i’ll have to break accessibility guidelines and hard-code the text size to a specific pixel size.

  • Doug L

    Is anyone dealing with an issue whereby Word is set as the editor in Outlook 2003 of the recipients? The reason I ask is that I am having challenges when recipients forward my newsletter.

    I hand design using HTML/CSS, then load in the Stationery folder to send through Outlook. That part works brilliantly. I don’t use Word as my editor in Outlook. It’s when my recipients Word 2003 inserts enough MS specific XHTML/CSS that my layouts get distorted.

    Bottom, line design integrity is compromised when forwarded. I don’t know enough about MS CSS to understand how to design for it, outside using Word or Publisher as my source editor. Want to avoid that, but will compromise because my audience is strictly Outlook/Office 2003.

    Any advice or URLs to learn from will be most appreciated. Doug

  • Ed Purkiss

    Good lord, what a fantastic time saver. Thank you for the excellent, hard and detailed work – and particularly for sharing it!

  • Rio

    Seriously, that was sooo helpful! Thanks a milion!

    -Mario

  • Virdee

    Excellent work – this will save weeks worth of testing!!!

  • Adri‡ GarcÃŒa

    Excelent report!
    Thanks dude.

  • Alex Dedul

    Good report. Thanks, thats saved a lot of work.

  • Luiz JË™nior Fernandes

    Allright…, now I only hope that somebody can tell me the HTML tags that PC E-mail clients can support in HTML e-mails. Anyone?!

  • Antony

    Nice job! A lot of thanx!

  • carlos

    Good review. I tried to design to another web email..and someones has no treatment of css…i design with older html without css

  • Scott Gingrich

    A very handy post…thanks! I’m taking my first plunge into HTML Email tomorrow. I’ll be using 1ShoppingCart to send out a multi-part/mime message. Have you done any testing on HTML only Emails vs multi-part/mime?

  • Tom

    On the other hand if your client demands consistency no matter what, or the CEO’s using Lotus Notes, you’ll have to dull down your design, stick with tables for layout and use only basic text formatting via CSS. You may even have to go down the inline CSS route.

    ————————————————–

    I disagree with the “dull down” part of this, I would love to use CSS on a daily basis but our clients want consitency and they don’t care what the HTML looks like. Web Design is not solely dependent on what particular mark-up you use.

    A table is a designers dream as it resembles a grid, there are tonnes of problems with the CSS model even for web pages, for example vertical positioning is virtually impossible. When I have to vertical position a form or survey for a landing page from an email, the fastest most efficent method is to use a table.

    Table based layout with CSS text styling is still the best way to go for email design, I wish the CSS support was better, but it’s not at a level where you could run a successful email production team on it.

  • alain williams

    Errr, you don’t get it — HTML email is a bad idea in the first place. Bloated, has security issues and many mail readers or organisation just won’t take it.

    A couple of blog entries that explain why in a bit more detail:
    http://blog.dave.org.uk/2005/12/basic-bulk-emai.html

    http://blog.dave.org.uk/archives/000682.html

    If your marketing people insist on it, DO make sure that you send out a plain text attachment with the text in it.

  • Shahar Hesse

    Some readers override link styles, to get around this, add a style=”” inside the a tag…

    Also, on older tests I did (almost a year old now…) float and clear had minimal support, for lists with recipients on older os’s this might be an issue.

    thanks!!

  • Alexander S. Manenko

    Excellent work! Thank you!

  • Qaiser Mehmood Mughal

    Excelent Research.
    Thanks for posting such kind of information.

    Qaiser Mehmood Mughal
    —————————-
    Software Engineer
    Lahore – Pakistan.

  • John

    Good review. I tried to design to another web email..and someones has no treatment of css…i design with older html without css

  • Keith

    Great review… really useful tables.

    Upon poking around a bit, it seems gmail’s support actually changes some depending on what the element in you’re trying to define. For example, it maintains background-color of DIVs, but not of Headers, and it allows font settings in DIVs and Headers, but not in Paragraphs.

    I guess the rule of thumb is, if you really need something, test it out a few different ways, and then lean on degredation.

  • NiC

    We tested the Notes compatibility on the latest version we could download from the ..

  • Chris

    Sweet! I found this very useful. Thank you! :)

  • Asam

    It the best site i have seen on CSS Support in Email. I’ll definatly save it in my bookmarks.
    Thank David Greiner thumb up for you

  • Shobi

    Great article I’ve ever seen on web, you da man

  • Jeet

    Great article!

    Does anyone have any experience with receiving html campaigns in Yahoo Mail “Beta”. I received a message from someone that had both html and plain text content but Yahoo Mail Beta displayed the plain text first (it actually displayed it twice; one below the other) and then displayed the html content. Pretty weird. Any feedback on your experience with the new Yahoo Mail? The style tag was part of the tag and Yahoo Mail Beta actually displayed the css code as part of the message.

  • Dave Greiner

    Jeet, we’ll be publishing a full review of how the new Yahoo! Mail handles CSS in email (which is very well by the way) in the next few days.

  • Paul Mycroft

    I have already been using a CSS-based email solution and am just about to build a simple email MailBuild template for a new client and was wondering why there are 3 table-based templates in the Resources 3-pack whereas there exists a CSS-based template elsewhere on this site.

    Is this a deliberate move from Campaign Monitor to accommodate Outlook 2007? Which option should I take?

    Thanks!

  • Dan Merfeld

    Thank you so much for putting this together. I have been flying blind on most of these email clients, crossing my fingers that everything looked okay. Having this information is invaluable.

    As far as the CSS verses Tables debate, it’s nice to see we have a new realm in which to argue.

  • Mimidou

    Hello,

    Thanks for this page.

    Now OUTLOOK 2007 is here
    Here another case studied :)

    Just for information the Background image does not go under Outlook 2007

  • Wayne Pelletier

    It’s possible things have changed in the year since this post. Gmail is rendering font-family just fine now.

  • Dave Greiner

    Cheers Wayne, we plan on doing a major re-test and include lots of the newer email clients like Outlook 2007 and the new Yahoo beta real soon. Watch this space.

  • Chris

    I would love to see this list updated with the new changes to Outlook 2007.

  • Bear

    Any idea when you’ll be updating this for Outlook 2007? This is such a great reference, I just can find anything like this for the mess that Outlook 2007 is now causing. Thanks!

  • Andre

    Hello,

    Thenk you for this informations… :-)

  • steve

    great article, very helpful

  • Gabriel McCay

    Oh my god, I just finished up an HTML Email that took me about an hour to build, and 6 hours of browser / web-browser mail. I wish i had found this resource a couple days ago, From now on I will plan my approach.

  • rye

    Thanks!

    This is also a great guide to CSS in blog post.

  • Chris Hooven

    Anyone have any experiance sending HTML Mail to rediff mail accounts? About 6 months ago all our images stopped working there.

  • Kiran

    Very, very nice! Great work and I appreciate it.

  • Skeller

    “Ellen de Graaf

    wrote on April 21, 2006 7:31 PM

    You indicate that Hotmail supports background-images, but it doesn’t unfortunately :(
    I noticed Hotmail removes any CSS rule that uses a url”

    I found the same thing…

  • Leo

    Thanks for the information. It is an useful article for me ;)

  • Apteka internetowa

    It’s very good article. Great site with very good look and perfect information… Thanks

  • Stock photos

    Good stuff. I want to install it on my phone!

    I love this phone i might buy me one in fort lauderdale

  • Aukcje

    It’s very good article. Great site with very good look and perfect information. I like it too

  • Wzorki

    Very nice and well written guide. It’s very helpful to me, Thanks

  • Emlak

    Nice job! A lot of thanks

  • Condor Fluge

    CSS is also heplfull in protecting your e-mail address from spam. You can for example make him written from right to left and change his verwing in CSS. Not 100% but always it is some wall to spiders.

  • Vignesh

    Hi! the article was very useful for our project. Great! Guys you have done a wonderful study.

  • Nithiyanandhan

    Hey buddy’s

    I am facing one problem.My html formatted e-mail is displaying properly in outlook express.But if i fwd that html formatted mail to some others the html format is collapsed and go to ordinary mail not a formatted mail.past 10 days i am facing this problem.So anybody could you help me.Urgent

  • indir

    Thank you for the excellent, hard and detailed work – and particularly for sharing it!

  • Tomasz Gorski

    Excellent. This is confirmation that we are not insane. Great resource!

  • Gry

    Excellent piece. Explains a lot of things about email I have received that didn’t look correct! And may also explain some porr results on certain mails I have sent.

  • dzieci

    I don’t use css in emails because then they are more larger.

  • NBA

    Excellent resource! Thanks for putting the time into simplifying this for us.

  • Katalog Stron

    E_X_C_E_L_L_E_N_T_-_A_R_T_I_C_L_E, thanks (*_*)

  • Dj Tiesto

    Allright…, now I only hope that somebody can tell me the HTML tags that PC E-mail clients can support in HTML e-mails.

  • gdr

    Thanks for this useful post !

  • Linki

    Very nice and well written guide. It’s very helpful to me, Thanks

  • agire jiyan

    Great site with very good look and perfect information.It’s very good article. Thanks

  • Katalog Stron

    Thanks for the info, i’m glad I finally found something usefull thx again!

  • Website

    Thank, this article is useful for me.

  • data

    Great resource! Excellent. This is confirmation that we are not insane.

  • Viktor

    Thanks a lot, CSS is quite a pain in the a….

  • Michael

    Very nice and well written guide. It’s very helpful to me, Thanks

  • Evden Eve Nakliyat

    Michael – “Very nice and well written guide. It’s very helpful to me, Thanks”

    Good job.

  • Tapeten

    I think these blog is really useful for new comers and Excellent resource list.
    It´s a very interesting Blog and simple answer of many questions.
    Keep up the good work!
    Thanks it helps me a lot…

  • sohbet

    Very nice and well written guide

  • bentodesign

    interesting that google remains the least friendly web based email when it comes to using css.

  • Hanson So

    This is very helpful, and I find it an excellent resource. Thanks.

  • ross

    Thanks for taking the time to demystify the email minefield. Maybe someday we can stop pretending its 1990 when writing HTML emails.

  • diyet programları

    Thats really great, david. Thanks for your fantastic work.

  • Gdynia

    Thanks for this very good article. Can i translate this and insert on my site in Poland? Thanks and Greetings from Gdynia

  • Pathfinder

    Thanks for stuff.I was looking at the material over a large amount of time

  • pozycjonowanie

    Good lord, what a fantastic time saver. Thank you for the excellent, hard and detailed work – and particularly for sharing it!

  • kanutouren

    This is very help ful , very nice and well written guide! Thanks! Good job. Thanks! Thanks!

  • resimler

    Can u post some sample program about CSS

  • kora

    You’ll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using.

  • Ana

    Very helpful!

    However, have you ever tried testing iCalendar emails (ex. meeting request) with html body in Outlook. CSS support is minimal at best. The following are not supported for sure: background-color, border.

    There are numerous others that I am not mentioning since I’m not done testing. :(

  • Colin Guthrie

    Hello,

    Great report, very handy. One thing it does not mention however is what email clients support the embedding of multipart/related images in CSS url() containers. AFAIK none of the clients support this, but finding this information out is quite hard so adding this into this report would make it definitive!

    Col

  • borelioza

    Thank you for the excellent, hard and detailed work – and particularly for sharing it! Good lord, what a fantastic time saver.

  • Stefan

    Good review. I tried to design to another web email..and someones has no treatment of css…i design with older html without css

  • Informatico

    Great work, i was go crazy to make a template compatible with all clients and webmails.

    Thanks a lot.

  • klimatyzatory

    This is very helpful.

  • nezh

    Good review. Thanks

  • nezh

    Nice post! Sending elegantly formatted emails is always a problem especially with people using all the email clients in the world.

  • John Handy

    I don´t think that using css in e-mails is a good idea. many people i know (including me) have activated text-only for e-mail and for that is css pretty useless but anyway a good article.

  • .Ogłoszenia

    Thanks for this side, now I know more. I’ll try to translate this article to my language and add it on my webside.Ogłoszenia

  • Firma

    Thank you for the excellent, hard and detailed work – and particularly for sharing it! Good lord, what a fantastic time saver.

  • game

    Thanks. I tried to design to another web email..and someones has no treatment of css.

  • telewizja n

    If you are sending HTML emails in your marketing campaigns (and there’s lots to support that you should) you have probably come across some serious design issues when it comes to using CSS styling. I ran across a very comprehensive article over at Campaign Monitor that outlines what CSS elements, selectors and properties are and are not supported by the various email client environments such as Outlook and Yahoo.

  • küvet

    I have an HTML mail merge email going out with an invoice section i’d like printed on its own page.

  • Pozycjonowanie

    Thats great. Thanks for your work.

  • Josy

    Excellent informations! Thank you for your work and sharing your knowledge

  • kız oyunları

    If you are sending HTML emails in your marketing campaigns (and there’s lots to support that you should) you have probably come across some serious design issues when it comes to using CSS styling. I ran across a very comprehensive article over at Campaign Monitor that outlines what CSS elements, selectors and properties are and are not supported by the various email client environments such as Outlook and Yahoo.
    this is good idea

  • Hip Hop Klamotten

    However, have you ever tried testing iCalendar emails (ex. meeting request) with html body in Outlook. CSS support is minimal at best. The following are not supported for sure: background-color, border.

  • Jon

    awesome post… exactly what i was looking for

  • Bwin

    I have already been using a CSS-based email solution and am just about to build a simple email MailBuild template for a new client and was wondering why there are 3 table-based templates in the Resources 3-pack whereas there exists a CSS-based template elsewhere on this site.

  • Dave Greiner

    Bwin, all of the templates we provide are actually table-based to a certain extent, as that’s the only way to achieve consistent rendering across the board. The newer templates have less reliance on tables for layout and make better use of CSS, but they still use tables for basic page structure.

  • sharp aquos

    Great work, i was go crazy to make a template compatible with all clients and webmails.

  • george

    I have an HTML mail merge email going out with an invoice section i’d like printed on its own page.

  • SEIKO

    Good article , thank You

  • pozycjonowanie stron

    Thanks a mil. That’s what I need!

  • Brandon Buttars

    This is awesome. Like some of the above comments you kind of guess sometimes what supports what because you just don’t have the time to test it all sometimes.

  • Sklepy

    Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more.

  • telefonsex

    This is very helpful, and I find it an excellent resource. Thanks.

  • Download

    Thanks for all, very good and helpful

  • strony www

    Thats great. Thanks for your work.

  • katalogowanie rƒôczne

    xcellent. This is confirmation that we are not insane. Great resource!

  • katalogowanie

    I was using css in my mails without knowing this could be such a problem for all those different mail agents. I think I’m going to point this out in my class. Again it’s sad to see that the battle for consistency among utilities is going on…

  • offshore companies

    Very well made article. MAny thanks for chart with Eudora. It will save lot of time!

  • el dorado

    Good article.
    Thanks for sharing.
    Regards from Poland.

  • Blindog

    Very nice, I was just creating a new email template and wondered what the support for CSS was in email clients? You more than answered my question. Kudos.

  • home decor

    I was using css in my mails without knowing this could be such a problem for all those different mail agents

  • eater

    It is good to know that there are lots of people doing lots of work for me

  • vitaly

    Very useful post. Thanks.

  • MisterMmmh

    Yes! You have answer on one of my question for creating HTML emails .. many thanks!

  • raffyman

    Does anyone have any experience with receiving html campaigns in Yahoo Mail “Beta”. I received a message from someone that had both html and plain text content but Yahoo Mail Beta displayed the plain text first (it actually displayed it twice; one below the other) and then displayed the html content. Pretty weird. Any feedback on your experience with the new Yahoo Mail? The style tag was part of the tag and Yahoo Mail Beta actually displayed the css code as part of the message.

  • übersetzungen

    There are many useful informations in this great article…I really enjoy reading the whole blog that you write. Thanks!…

  • Blaise Kal

    Thanks very much! This saves me a lot of time.

  • Bijay Rungta

    Thanks for sharing this..
    It saved me a lot of time trying to figure out why my efforts were going in vein..

  • Acronyms

    Bloody email clients.

  • Paul Crain

    Thank you for posting this, bookmarked for reference.

  • vinç

    I was using css in my mails without knowing this could be such a problem for all those different mail agents

  • vana

    Thank you for posting this, bookmarked for reference.

  • JamesM

    Awesome list!!! im being introduced to email based advertising and this is an essential website!

  • Zach Katkin

    Great detailed article. Thank you for all of the hard work. We’ll definitely be putting this to good use.

  • Dan

    One very good post! It’s good to see up-to-date information on such a technical subject. I’d certainly like an html coder who can produce an email template to cover this! Any takers?

    I’d like to get some input on cutting-edge email forms.

    Please”>https://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_support_in_emai.html“>Please Contact Me

  • Tao

    Now I know why my email does not display correctly under Lotus Notes. Thanks for the sharing the chart.

  • Jaideep

    Excellent information.

    Thanks for sharing such a good info.

  • laura

    Wonderful and informative web site.I used information from that site its great.

  • xavier

    Thanks for the information. It is an useful article for me ;)

  • peter

    I hope that this isn’t a stupid question, is a element CSS? I’m a little fuzzy with what is CSS formatting and what is HTML.

  • peter

    Sorry, some words disappeared. I hope that this isn’t a stupid question, is a style element CSS? I’m a little fuzzy with what is CSS formatting and what is HTML.

  • www.evdenevetasimacilik.org

    : Evden Eve Nakliyat , Ofisten Ofise Taşımacılık, Şehirlerarası Taşımacılık, Şehirlerarası Nakliyat evden eve nakliyat, ofisten ofise nakliyat, nakliyat firması, ofisten ofise taşımacılık şirketleri, şehirlerarası nakliyat, özel eşya taşımacılığı, gıda taşımacılığı, şirket taşımacılığı, fabrika taşımacılığı, depolama, nakliyat

  • www.temizlikmalzemem.com

    Temizlik malzemesi, temizlik malzemeleri, temizlik malzemesi satışı alımı fiyatları , temizlik malzemesi bedava

  • Jinn

    Good one,
    I am making newsletter features and multi-mail clients are killing me.
    >.Good one,
    I am making newsletter features and multi-mail clients are killing me.
    >.<

  • Pozycjonowanie stron

    I’will not use a css in my mail. This is non sens !!

  • Thomas

    Great list, although including Outlook 2007 would be very helpful. I’m not sure if it was out though when the list was made…Outlook 2007 CSS support is awful, mainly it’s lack of support for position and float attributes. Check out this article for details.

  • Porkster

    Thanks for the chart! It’s very, very helpful, especially since I’ve just been figuring out what CSS tags to use simply by trial and error, creating various HTML code bits to send to multiple email clients, and the best part is that the HTML mailer program takes ten minutes to send something. LOL, fun times indeed. Sarcasm aside, I’m looking forward to the update when you include Outlook 2007.

  • RedBalloon

    Thanks a lot for the list. I’m glad to see most of the css inline style will work. Does anyone know of a free HTML sender? I need to do some testing on all of my email accounts.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free