Not long ago, Alex spent some time researching the CSS secrets of Lotus Notes to help get the HTML versions of our email newsletters to display properly in that client. But in the wild and wooly world of HTML email, Lotus Notes is only the worst offender on death row. There are plenty of other badly-behaved email clients out there, and most of them aren’t as considerate as Eudora (which simply doesn’t support CSS at all).
Over at the Campaign Monitor blog, David Greiner has posted a complete guide to CSS support in all the popular email clients, both desktop and web based.
This guide will save you a ton of time, even if all it does is convince you that CSS in email is a lost cause.
Consider: if you want to avoid applying style attributes to your HTML tags, you’ll have to sacrifice support for GMail entirely, and you’ll need to use both a <style> tag in the <body> to support the web email clients and a <link> tag in the <head> to support Lotus Notes.
Sound ridiculous? Tip of the iceberg, I’m afraid…
Yeah I have been working with HTML emails recently. Done around 5 of them. I feel dirty for using the tag, so very dirty. I’ve not been using any CSS as to avoid errors but it is really difficult using pure HTML.
April 26th, 2006 at 9:43 pm
My main problem is with the web based clients. They constantly apply their own markup to the newsletter. Hotmail and Yahoo! seem to be the worst at this.
Personally, I think when it comes to displaying HTML emails companies should just adopt one of the popularing rendering engines. Outlook uses IE (which is an improvement I would say) and Opera uses Presto (its rending engine). I would assume Thunderbird uses Gecko as well.
April 26th, 2006 at 9:51 pm
Very cool, thanks Kevin! :)
April 27th, 2006 at 1:51 am
I Didn’t know of Greiners article, surely a god send for those of us that has to deal with these issues on a regular basis. Just found out by trial and error about the Gmail limitation (just recently took gmail into consideration).
April 27th, 2006 at 7:31 am
I use tag soup for html emails and in the end noone can even see pictures. But at least they look more sylish and structured.
I also use dreamweaver to help me because it takes a bit of time to code it up and get stuff to align. Tables are the devil.
April 27th, 2006 at 1:42 pm
What seems to be the problem? Aren’t tables of any use anymore? Isn’t this only because ‘we just want to use CSS’, while we actually could do without when it comes to emails? Correct me if I’m wrong please…
April 28th, 2006 at 12:15 am
I am in the midst of doing HTML in e-mails which are mailed to users using Lotus Notes, HotMail, Gmail, Outlook Express and Yahoo.
Lotus notes is the most difficult one to handle which is used by my client to whom I am designing these e-mails. I am using Tables, inline style sheets plus adding font tags for Lotus Notes. This one refuses to read style sheets.
April 28th, 2006 at 12:54 am
it’s about future-proofing your code.
April 28th, 2006 at 6:50 am
Hey guys,
We’ve written about the best approach to designing emails with CSS here, and also included a template you can tweak yourself. Another one you might find useful is our recent email design guidelines which covers designing for images being turned off, preview panes and a few other useful bits.
It’s definitely possible to code a semantic, CSS based email that looks perfect in most email environments and degrades gracefully to a nicely formatted rich text version in those environments with less CSS support (I’m looking at you Gmail and Hotmail). It all depends on what kind of consistency you or your client demands I guess.
April 28th, 2006 at 8:10 am
sabreTooth: would you like to expand a little on that remark?
I know that there are loads of essays out there about accessibility of web pages, but surely not every rule applies to emails, and therefore not every bad practice on the web is bad in an email?
May 13th, 2006 at 6:13 am
Tables are a designers dream. I don’t see what all the fuss is about CSS. Tables are far superior for vertical postioning.
DIV’s are annoying.
September 30th, 2006 at 4:09 am