How to write a HTML newsletter

One of the early marketing tools on the Internet which was used to reach the ever growing number of Internet users was the email.
Today we have even an organization which establishes the standards for the newsletter code, but also for the email clients like Thunderbird, Outlook, Lotus Notes or Evolution.

One of the problems with HTML newsletters is that there are a lot of email clients available and most of them don’t respect a certain standard when it comes to HTML emails. The problem is not only on the desktop side of the client, but also on web based email, as Google, Yahoo, AOL and others have their own rules.

The rule of 2 on HTML newsletters

Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.

Tables

Although when we make websites we avoid using tables, when it comes to HTML emails it is recommended that we use a layout build with tables, mostly because most of the email clients are old or don’t support the use of DIVs very well. To align the tables use attributes like:

border="0"
valign="top"
align="left"
cellpadding="0"
cellspacing="0"

As you may notice this approach doesn’t respect the latest standards in HTML, but it will ensure that your email will work on most email clients, web or desktop.

CSS styles
While CSS support is limited, you can still use some css styles within your HTML newsletter. Don’t try to insert your CSS style into HEAD or use the link tag, as for example Gmail searches the head for any references to CSS styles and deletes them.
Use instead everywhere inline CSS styles and try not to use the short version of some attributes, for example use:

margin-top: 20px;
margin-bottom: 20px;

instead of

margin: 0 20px;

Other tips

Don’t use JavaScript
Note that Outlook 2007 does not display background images
For background images, use the table’s background attribute instead of using CSS
Store the email images on a web server and don’t delete them, ever.
Be sure all your images use the alt, height, and width attributes. Setting values for these attributes improves results in Google Mail, as well as maintaining your layout when a reader has their images turned off. Note, however, that Outlook 2007 does not recognize the alt attribute.

After you’re done building the newsletter you should test on a variety of email clients to make sure the newsletter appears the same everywhere. A great utility for testing if your email might be stopped by spam filters is SpamCheck which in seconds will return a Spam Score and recommendations on how to reduce the likelihood of your e-mail being filtered.

Source: sitepoint.com

Foto: sxc.hu