Recommendations for Coding Emails with HTML/CSS
With dozens of popular email clients (Yahoo, Gmail, Outlook, etc) available on the market, it may be hard to design good looking HTML emails. Web standards support differs a lot across email clients so designers have to follow some basic rules to make sure their email displays correctly everywhere. Here's a list of suggestions to give to your designers:
-
Use
<table>for layout You may think that the days of using tables are long gone, but some modern email clients (like Outlook 2007) don’t support CSS floats. Tables are the only reliable way to create a layout with several columns. -
Use inline stylesheets It may not be convenient to code email with inline styles, but the
<style>element is not supported by several major email clients, including Gmail and Outlook 2007. -
Learn about CSS support limitations Outlook 2007 is the latest version of the popular email client with a prominent market share, but it doesn’t support background, float, clear, display, text-transform and other important properties.
<DIV>and<P>elements don’t support even width, height, padding and border properties. Sadly, Outlook 2007 is not alone in this – Gmail, Lotus Notes and some other clients don’t support most of these as well. -
Don’t rely on images Image blocking is a common feature and in AOL, Outlook and Gmail it is turned on by default. It is strongly recommended that you don’t rely on images for important text, information, buttons or links. Blackberry and other mobile device users will be thankful, too.
-
Always use ALT text This is the only way for people with blocked images or disabilities to know what you wanted to show. That said, for a decorative graphic it’s better to use empty ALT Text instead of writing a useless description like “rounded corners”.
-
Set image properties Make sure to set the width and height for your images. This way, your email layout won't be broken with images turned off.
Our final word of wisdom is to test your HTML email. And then, test it one more time. Try to review your email in as many clients as possible. You may consider using special services like Litmus for reviewing email in all major email clients at once. And of course, don’t forget to check your email with images disabled.
For some further advice, here's some recommended reading: