If you are already pulling your hair because of the different quirks of the different web browsers, you’d easily go bald trying to figure out how to make CSS work in HTML Emails.
Why bother?
There are hundreds of different email clients, each having its own version of how to render your HTML email. It will be best to follow some simple guidelines to avoid alienating your readers with quirky email clients.
Let me summarize the fundamental best practices:
- Use HTML tables for layouts. (I know this is the ultimate sin for CSS purists, but I’d rather commit CSS sin than go bald)
- Use inline CSS for presentation formatting.
- Do not use CSS shorthand. (example: border: 1px solid #FFFFFF)
- Avoid Javascript. Most email clients do not support it.
- Keep to a maximum of 550 pixels in width.
- The average preview pane is 300-500 pixels high. Make sure your important headline is in this area.
Background Images
- You can slice up a background image and serve it up on your table’s cells. Another alternative is to just make one background image, to minimize our “points of failure”.
- For background images, use the <table>’s background attribute instead of CSS. This works more consistently.
- Store the email images on a web server.
- Be sure your images have alt, height and width attributes set. However, note that Outlook 2007 does not recognize the alt attribute.
- Using a 1×1 pixel image for spacing and/or presentation will increase the likelihood that your email will be classified as spam. This is because spammers use a 1×1 image to determine if their email has been opened.
The Email Standards Project is spearheading the effort to get everybody on the same page. They have tested several email clients using this template (both web based and desktop) for CSS support. Visit their website to see the results.
What If Images are turned off?!
Many email clients set the display of images to “off” by default. So you have to take this into account and make sure that your email will still be presentable in this case.
Linking
- Open links in a new window to avoid having the page open within the email client. Use target=”_blank” attribute.
Known Issues
- Image displacement can occur when a closing </td> is placed below an <img> tag. This has been a problem for the longest time so avoid that and just place the </td> right after the <img> tag.
SPAM
You don’t want your hard work to go down the Junk Mail drain. Better check your email for it’s “spamminess”. There are tools to do this such as http://spamcheck.sitesell.com/
Testing Checklist
- Is there a NAME indicating who the email is from? (John Smith <john@smith.com>)
- Is there a subject line?
- Did your email display as you intended it to be? with or without images?
Conclusion
The KISS principle can definitely be applied here. While CSS support in browsers are coming together, email clients have a long way to go to catch up.