Jurgen

wrote on March 30, 2006 08:36 PM

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

Jon

wrote on March 30, 2006 11:08 PM

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

Chris Harrison

wrote on March 31, 2006 12:12 AM

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

wrote on March 31, 2006 01:21 AM

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

Terry Evans

wrote on March 31, 2006 01:37 AM

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

wrote on March 31, 2006 02:12 AM

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

wrote on March 31, 2006 08:15 PM

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

wrote on March 31, 2006 09:10 PM

Great work ...

Simon

wrote on April 1, 2006 01:41 AM

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

wrote on April 1, 2006 07:32 PM

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

wrote on April 2, 2006 12:23 AM

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

David

wrote on April 3, 2006 01:35 PM

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

wrote on April 4, 2006 02:09 AM

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

Arnold

wrote on April 4, 2006 01:10 PM

Can u post some sample program about CSS

Dave Greiner

wrote on April 4, 2006 10:52 PM

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

wrote on April 5, 2006 03:25 AM

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

wrote on April 5, 2006 08:34 AM

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

wrote on April 5, 2006 08:44 AM

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

wrote on April 6, 2006 01:37 PM

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

ParadiseFound

wrote on April 13, 2006 05:24 AM

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

Ed Brill

wrote on April 13, 2006 05:41 AM

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

wrote on April 13, 2006 07:32 AM

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

wrote on April 13, 2006 09:53 AM

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

wrote on April 13, 2006 07:37 PM

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

Patrick Corcoran

wrote on April 14, 2006 03:36 AM

Nice work. Well researched.

tribaldo

wrote on April 17, 2006 12:42 AM

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

Joe

wrote on April 19, 2006 12:16 AM

Nice job on this article

Lachlan Hunt

wrote on April 19, 2006 03:51 PM

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

wrote on April 20, 2006 10:47 AM

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

wrote on April 21, 2006 10:24 AM

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

wrote on April 21, 2006 07: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().

Damien Buckley

wrote on April 22, 2006 09:19 AM

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

wrote on April 23, 2006 12:04 AM

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

wrote on April 24, 2006 01:15 AM

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

Enrique

wrote on April 24, 2006 03:29 AM

Genial.

loopion

wrote on April 24, 2006 07:26 AM

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

Thanks a lot !

Spencer

wrote on April 26, 2006 11:44 AM

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

RickRanger

wrote on April 29, 2006 04:36 AM

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

Lachlan Hunt

wrote on May 1, 2006 02:27 PM

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

wrote on May 3, 2006 05:52 AM

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

Donna Zukowski

wrote on May 3, 2006 07:45 AM

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

wrote on May 3, 2006 10:32 PM

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

wrote on May 8, 2006 05:53 PM

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

wrote on May 10, 2006 01:16 AM

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

Mark Wyner

wrote on May 10, 2006 01:42 AM

Beatiful work, folks. You put in some serious time to arrive at these charts and the web community is therefore indebted to you. We applaud your efforts.

Amber S.

wrote on May 10, 2006 05:22 AM

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

wrote on May 10, 2006 12:31 PM

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

A very big thank you. :)

Blaze

wrote on May 10, 2006 10:32 PM

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

wrote on May 19, 2006 03:58 PM

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

alakazarm

wrote on June 3, 2006 01:10 AM

You should have added Thunderbird to the mac tests too...

Tek Boy

wrote on June 3, 2006 03:08 AM

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
            • <style> element in the <head>

      The <link> element
            • <link> element in the <head>
            • <link> element in the <body>

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

turd furgeson

wrote on June 9, 2006 08:46 AM

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

wrote on June 16, 2006 05:51 AM

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

wrote on June 23, 2006 11:23 PM

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

RARPSL

wrote on July 4, 2006 06:45 AM

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

wrote on July 12, 2006 10:39 AM

I've noticed that you said that Yahoo doesn't support background-position; however, when I do background: url(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

wrote on August 5, 2006 01:37 AM

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

wrote on August 10, 2006 08:16 AM

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

wrote on August 11, 2006 08:40 AM

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

Donovan

wrote on August 22, 2006 06:06 PM

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

Donovan

Gary

wrote on August 24, 2006 02:30 AM

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

wrote on August 24, 2006 05:46 AM

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

wrote on August 24, 2006 12:12 PM

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

wrote on August 31, 2006 02:36 AM

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

Rio

wrote on September 7, 2006 05:25 AM

Seriously, that was sooo helpful! Thanks a milion!

-Mario

Virdee

wrote on September 15, 2006 10:53 PM

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

Adrià García

wrote on September 20, 2006 06:06 PM

Excelent report!
Thanks dude.

Alex Dedul

wrote on September 27, 2006 12:58 AM

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

Luiz Júnior Fernandes

wrote on September 29, 2006 06:07 AM

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

wrote on October 3, 2006 09:13 PM

Nice job! A lot of thanx!

carlos

wrote on October 4, 2006 09:01 PM

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

wrote on October 9, 2006 09:50 PM

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

wrote on October 14, 2006 04:58 AM

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

wrote on October 25, 2006 12:51 AM

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/archives/000873.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

wrote on October 25, 2006 04:55 PM

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

wrote on October 31, 2006 02:15 AM

Excellent work! Thank you!

Got anything to add?

Name

Web site

Your comments (basic HTML is fine)