How To Code HTML Email Newsletters

Here at Integricity, we’re currently refining and improving a product we are on the brink of launching to the public (do stay tuned!). We are calling it Disperse and it will be the intelligence behind your newsletter campaigns. When you send out mass emails, find out which recipients read it, which links in your email were clicked and allow recipients the ability to automatically unsubscribe themselves.

Today, I read a really great engaging article at ReachCustomersOnline.com about conventions on writing the newsletter. Here are some excerpts from the article.

Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

CSS Styles

Once the email layout coded as a set of nested HTML tables, the next step is to add in CSS styles. Here are the steps to follow

Put style information (style=) into the HTML tags, for example, TABLE, TD, P, A, and so on. Do not use the CSS STYLE declaration in the HTML HEAD tags as is done when coding web pages. Google Mail, in particular, looks for STYLE anywhere in the email and (helpfully) deletes it. And don’t bother to use CSS LINK to a stylesheet. Google Mail, Hotmail, and other email software ignore, modify, or delete these external references to a stylesheet.

Best Practices

• Coding an html email perfectly is only a partial solution. There are several best practices to follow to ensure the email works well such as:
• Avoid javascript. Most email software disables javascript.
• If an image is cut up and spread across several HTML table cells, test the email with many test accounts. Sometimes it looks great in Outlook but shifts by 1 pixel or more in Hotmail and other services. Also consider putting the image as a background image on a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results.
• Use the target=â€?_blankâ€? attribute for the HTML A tags so that people reading with a webmail service don’t have the requested page appear within their webmail interface.
• For background images, use the HTML table attribute background= instead of CSS. It works more consistently across email software.
• Store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to websites.
• Avoid a big image above the fold in the email. This is another classic spammer practice and can increase the likelihood an email will be tagged as spam.