*** From the Archives ***
This article is from June 28, 2006, and is no longer current.
Design HTML E-Mail Templates That Won't Fail
|
I 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.
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 ask you to paste the code into the "Create a Custom Template" step in a hosted e-mail marketing service, such as Constant Contact or Campaign Monitor (Figure 1).
Figure 1. The Campaign Monitor site includes samples of e-mail templates that have been designed by others and processed by Campaign Monitor. Here, you see examples of newsletters from UK-based Recycle Now (top) and New Zealand youth culture magazine Soul Purpose (bottom).
Web Standards Support
But before you make one 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 by the target audience.
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 if the audience is corporate, you’ve also got Lotus Notes to contend with.
Then there are the 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, such as Gmail, Yahoo! (old and new), and Hotmail.
The e-mail universe is much more fractured than Web browser land, and none of the e-mail apps 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 accustomed to creating a separate, stand-alone .css file that contains all formatting instructions for CSS tags, then referencing that CSS file via a link in a Web page’s <head> section.
That works in most locally run e-mail programs (except for Eudora and Lotus Notes), but not 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, Gmail ignores it.
Don’t give up. 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 parroting the world’s best Web page that details everything you’ve ever wanted to know about CSS support in e-mail programs: David Greiner’s "A Guide to CSS Support in Email".
For this guide, Greiner compiled clear and comprehensive charts outlining exactly which CSS features each program supports, divvied up into local and Web-based programs. His charts even include 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.
 |
Anne-Marie is my favorite writer. ;-)
You can find good email template designers at https://googlelance.com
Ishika
In the UK one of the best email template developers is https://www.digitalmarcomms.co.uk
Very nice introductory post. I wish you would have given examples of a well coded email template on different email programs. That would illustrate better the graceful degradation you mentioned above.
Wouldn’t it make the most sense to inline styles on elements (as painful as this is) in order to find the “minimum common denominator”?
m a r c o
https://mdostudio.com
Just the info i needed!!
Thank You