Using CSS in HTML E-Mails

June 27, 2006 - 2:00am ||| 0 Comments | Add new

I personally never opt to receive a company's e-mailed communications as HTML — I always choose the "Plain/Don't Know" option. It's not because I have a slow connection or I'm a Luddite, it's because my e-mail program, Eudora, completely sucks at interpreting HTML. It's a fantastic program in just about every other regard, so I continue to use it. I think of it as a wonderful husband who has one large, annoying flaw, like being an ex-felon, or even a White Sox fan.

Tiplet for Eudora users: To see how a badly-garbled HTML e-mail *should* look, and to figure out where the buttons are that you can click, open the message in its own window and choose File > Open in Browser.

Nonetheless, like a lot of web designers, I'm frequently asked by clients to create HTML e-mail templates for their use in marketing campaigns.

The easiest way to do this is to create a stand-alone web page in your web authoring program of choice, use absolute URLs for your a=href's (links), and then use that page's code in your client's e-mail template. Most often, they'll be asking you to paste the code into the "Create a Custom Template" step in a hosted e-mail marketing service like Constant Contact or Campaign Monitor:
http://www.constantcontact.com
http://www.campaignmonitor.com

——-
Web Standards Support
——-
But before you make your first click in your web authoring program, think about your client's audience … and your client's pocketbook. These e-mail campaign services aren't cheap. You want to make sure that the HTML template you design will be readable to the people the client is paying to send them to.

You thought designing a web page for cross-browser compatibility was hard? Try designing one for cross-e-mail compatibility!

You've got your PC-based e-mail programs: Outlook, Outlook Express, and AOL 9, for the most part, but also if the audience is corporate, you've got Lotus Notes to contend with.

Then you've your Mac-based e-mail programs: OS X's Apple Mail, Entourage, and Eudora (for us old-schoolers).

And *then* you've got your web-based e-mail programs like Gmail, Yahoo! (old and new), and Hotmail.

The e-mail universe is much more fractured than the web browser one, and none of these share the exact same support levels for HTML and CSS.

The best you can hope for is to design an HTML e-mail that gracefully degrades to something less-pretty, but just as functional, when the recipient's e-mail program has trouble with the code.

Using CSS will help.

——-
General CSS Guidelines
——-
Most web designers are used to creating a separate, stand-alone .css file that contains all their formatting instructions for CSS tags, then referencing that CSS file via a link in a web page's <head> section.

That'll work in most locally-run e-mail programs (except for Eudora and Lotus Notes), but won't work for web-based e-mail. Yahoo!'s e-mail needs the entire CSS spelled out in the <head>, Hotmail needs it spelled out in the <body>, and Gmail only supports in-line CSS (you spell out the style every time you apply it).

Isn't this fun?

You can use CSS to specify background *colors* in all the programs listed except (surprise) Eudora and Lotus Notes, but if you to bring in a background *image* using CSS, you'll find that Gmail ignores it.

If you construct your CSS carefully using semantic mark-up, e-mail programs that ignore some CSS features, but not others, should degrade into a "Rich Text Format" look with links intact.

——-
Specific Guidelines
——-
I could go on and on, but for most details, I'd just be parrotting the world's best web page that details everything you've ever wanted to know about CSS support in e-mail programs:
http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.html

The author of the article, David Greiner (who I assume is a CampaignMonitor.com staff member) compiled clear and comprehensive charts outlining exactly which CSS features each program supports, divvied up into local and web-based programs. His charts even includes Thunderbird and Windows Live Mail, which I haven't mentioned.

David makes it clear that he stands on the shoulders of giants, linking to previous exhaustive tests of CSS support in e-mail programs by Xavier Frenette and Mark Wyner:
http://www.xavierfrenette.com/articles/css-support-in-webmail/
http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html

The voluminous comments at the end of David's article are helpful as well, don't forget to read those.

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.