Email newsletters are common place for advertising products, services and events. Considering its uses, it is easy to understand why HTML newsletters are king; who wants to send plain text emails when we can send fancy text and graphics?! Unfortunately there are a lot of email clients out there wanting the HTML in a particular manner. Below are some simple tips to get you started with your HTML email newsletter creation.
1. Tables for layout not CSS... Unfortunately, there are alot of email clients that were developed in the last ice age still being used. This means CSS is poorly and wildly interpreted in terms of displaying your newsletter's layout. It's back to tables for cross email application consistency.
2. Inline styles... Although CSS shouldn't be used for layout, it is fine to use simple CSS styling for the content of the email newsletter. Some email clients can strip out HTML head styles, so put the <styles section in the body tag, or even better, put the css styles inline.
<p style="color: red;">
4. Test, test and test... First test the design in Chrome, Firefox and IE, chances are if it works in these then you should have a consistent design across the web email clients and most app email clients. Finally test with as many email applications as possible (outlook, outlook express, thunderbird, lotus notes etc).
Using the above tips you should achieve a fairly consistent viewing experience of your newsletter for recipients. If you are having consistency issues the links below may help.
A Guide to CSS Support in Email A top compatabilities article
Example table layouts
Useful email marketing blog
CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail
CSS and Email, Kissing in a Tree