2006 / August 17th/ CSS & Email: The dirty little secret
Quite some time ago, Mark Wyner published a piece at A List Apart title “CSS & Email, Kissing in a Tree” alluding to the fact that you could in fact write semantic HTML and style it with CSS for email. Here’s a quote from the opening paragraph:
Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. Yes, I really just said that. Not all attributes will be invited to the party, but many of them work flawlessly with this method.
Awesome! Where do I sign up?
When I first read this title I was ecstatic. The only times I’d ever had to drop back down to table-based layouts was when designing email templates. I thought I had finally overcome that daemon, and all my emails from now on would be good old semantic HTML.
The fun didn’t last. There was a dirty little secret that Mark glanced over.
Not so much kissing, but a little more like fighting
After spending the better part of a decade trying to get just one friggin’ CSS styled email out, I gave up. The dirty little secret that Mark glanced over was that one of those little attributes that we were leaving out of the party was the background attribute. That would be all fine and dandy, except that almost everything in CSS styling depends on background images: from faux columns to, you know, background images.
The problem clients: GMail and Hotmail
Most modern CSS methods (mostly) work, with the exception of two aggressive email clients: Hotmail and GMail. No biggie right, I mean how many people really use GMail and Hotmail?
For some commercial email lists I’ve designed emailers for the ratio has been as high as 85%. Ouch! That’s right folks: for the every day browsers, Hotmail (especially) and GMail are excessively popular email clients. Yahoo & Outlook follow close behind (though, these clients have excellent support for CSS).
Hotmail’s problem
If you do happen to read to the bottom of Mark’s email, he does point out this little tidbit:
I recommend carefully considering how far you want to go to accommodate Hotmail’s ineptitude, because the following method adds the <strong> tag to “dedication” and “diligence.” Since the <body> tag and everything preceding it are gone, the only remaining method for applying CSS is Inline. Inline styles are inefficient and tedious, and I’m sure you’d “rather be golfing,” but it works. If you expect heavy Hotmail use by your intended audience, you can use this method to help ensure success.
Kind of. Hotmail does in fact support inline styles fairly well. Except for the background attribute Hotmail will actively parse your HTML and strip out every single occurrence of background in any style attributes. The same goes for GMail.
The truth about Hotmail and GMail
The truth is that if you need to support these popular clients you need to either cut out almost all of your styling, or use table structures. Remember when I said that Hotmail will parse out all backgrounds in style attributes? That’s right, but there’s one place it doesn’t touch: the background attribute of a table cell (<td>).
Half-way there
So, cool. We can still use old-school table-based layouts and retain our email’s intended styling using the bacgkround attribute.
Mostly.
There’s still one caveat: you can’t set the alignment or repeat for background images.
When will we get there?
So, it’s almost 2007 and here we are coding like it’s 1997. When are we going to get proper support for CSS Emails? The good news it that both GMail and Hotmail are hosted services. This is the one shining light that remains in the eyes of web developers around the world. With one flip of a switch they have the ability to completely change their rendering engines (more like parsing engines).
Here’s to hoping 2007 is a better year for CSS & Email.
11 Comments
Make a Comment
don’t be afraid, it’s just text
Warpspire is the place that web professional Kyle Neath writes about the web. More →
Hot Topics This Month
-
2007 / Why I don’t use CSS Frameworks
85 comments
-
2008 / Top reasons your CSS columns are messed up
217 comments
-
2009 / Having fun with the Lighthouse API
8 comments
-
2009 / Quick & Dirty Referral Tracking
11 comments
-
2009 / Optimizing asset bundling and serving with Rails
11 comments
Feeds / Syndication
Choose your preferred method of syndication. All feeds are full-posts & ad-free. All feeds are protected under copyright and may not be redistributed without permission.
The Network
All my little projects that I leave scattered around the web. Some for profit, all for fun.
August 17th | #
Imagine that hotmail doesn’t work. (sarcastic)
This is a great point about CSS emails. I would love to abandon table based layout altogether but between email newsletters and bad .net CMS’s I feel like I’m moving backwards.
Thanks Kyle for point out GMail and Hotmail problems.
August 17th | #
You’ve got to be kidding me?! Microsoft doing tech like it’s still 1997..? :P
August 18th | #
I too was excited when I first read that CSS Emails were a possibility — until I started testing. Trying to come up with a cross-email-reader solution is by far the worst kind of testing I’ve ever had to do. From my personal experience, the best plan is to mark up in a way that degrades as gracefully as possible. Always be weary that 9 times out of 10 your reader won’t be able to view any images you’ve linked. Great reference article.
August 20 | #
I was excited when I read that email too..
Out of curosity what would you recommend as a good service to manage an email list and send out emails?
Cheers,
Ben
August 20 | #
Ben: Campaign monitor is an excellent app. One of the best webapps I’ve ever used, and by far the best email manager I’ve used.
September 28th | #
It has been some time as you say from back in 1997 and MS doesn’t seem to “get the point” of moving towards the standard. Thank´s for the HM insight, (do you have your source?)
Time will tell meanwhile keep on the good work.
Dave.
December 8th | #
Great article.
It came to my attention recently when looking at our generated emails that GMail completely dropped out all – Style attributes.
I have been formating my emails for Outlook all this time, but now I see it was a mistake as I’ll have to go back to the stone age when formatting emails.
December 8th | #
Yahoo is a little better, but seems not to apply background colors to cells.
All my invoices are completely gray. Sigh.
December 13th | #
“it’s almost 2007 and here we are coding like it’s 1997″
I actually said the exact same thing this week after coding a newsletter for one my clients. :)
great post kyle.
May 21st | #
Gee… it’s almost 2008 and still NO CSS support for in Hotmail or Gmail — I think I’ll go back to writing everything html 3.0 and code my websites in Basic or even better CPM (For us Commodore 64/128 Geeks)
October 16th | #
CSS-to-Inline Conversion Tool, a PHP script developed by… moi.
Thank you Kyle, for an excellent article that helps us squeeze the last drop out of the available oddly-built resources we have. Great tip about the only realm where background images can live: — the more I read on CSS and emails, the more torturously intricate the saga gets.
I, too, grappled with designing HTML emails for these finicky, CSS-hating email clients. After almost two years, I thought: why not create a script that lets designers have their cake and eat it too?
I finally completed the first release of my CSS-to-Inline Conversion Tool. You can now code using CSS, and then pop your CSS and HTML into the PHP script (or the web form on my site), and — VOILA! — your HTML comes back with inline styles, ready to send! All CSS rules of ordering and precedence are followed. Of course, you’ll still have to read these great guides to know which CSS rules to avoid, inline styles or not.
Try it out here: http://www.vivwebsolutions.com/tools-css.php
Happy coding all!