▼Blog
Tips on getting your HTML e-mails to look right
If you hate Internet Explorer, you’ll loathe Outlook. Better yet, Outlook 2007 will make you love IE 6. Really. 
Designing HTML e-mails is a challenging art and far worse than any struggles you’ll have trying to make a page look pretty in IE or Firefox.
Remember Web standards? Toss them. You’ll have much more luck coding at random — and I wish I were kidding. Designing engaging HTML e-mails is a great challenge.
Blocked images
Not only do different e-mail clients support various Web standards, many also block images by default. Users can choose to download or view the images, if they even notice their absence. Some clients show broken image icons; others do not. Not all show the images’ alt tags, either.
So don’t expect your pictures to be seen. You must design as if no one will see the e-mails’ supporting graphics. While you, Mr. Web Designer, may understand this reality, you will have to explain this extra carefully to the copywriters and graphic artists who are working on your e-mail project. The e-mail’s words are the verbal glue that keeps the message together.
How an upgrade can be a downgrade
Believe it or not, Outlook 2004 supports CSS better than 2007. Campaign Monitor, a Web e-mail marketing software company, outlines 11 e-mail clients’ handling of CSS. The 2007 edition even drops floats for block-level elements. Why?
Amazingly — unbelievably — 2007 switched from Internet Explorer HTML rendering to Word(!).
2004 features that 2007 drops
- Background-image and -repeat
- Display
- List-style-image, -position and -type
- Position
- Width
- Word-spacing
These words come to mind when I describe Outlook 2007. Microsoft took a huge step back with this edition.
Coding advice
So you want to create an HTML e-mail. My best advice:
- Put everything in tables if you want it to layout right
- Don’t use an external style sheet or style sheet in the head. Make everything in-line.
- Double up on your styles, and use old, deprecated HTML style tags to step in just in case your in-line CSS isn’t working. Learn to love font tags — they’re back!
- Test! Start in Outlook, then send test e-mails to Google, Yahoo, AOL, Hotmail and any other e-mail client your users are likely using.
- Markup your code in HTML comments so you know where your tables and sections start and end.
- Study Mail Chimp and Campaign Monitor‘s free e-mail templates.
- Support the E-Mail Standards project and look at its list of e-mail clients and their support of various Web standards.
- Despite the restrictions, e-mails can look pretty, assuming your images make it through.