How to code HTML email newsletters

Email marketing is a highly effective tool that helps you build strong customer relationships, using attractive and professionally designed newsletters.

Html newsletters are visually much more appealing, can track users' email opens, clicks and forwards and remind more of a website.

Despite these advantages, coding a newsletter in html can be a pain for a programmer. And that's because there are so many different email tools, from desktop softaware such as Outlook, Mozilla Thunderbird, Lotus, AOL, to webmail clients such as Gmail, Hotmail, Yahoo. Gmail is the most restrictive one, so if your newsletter looks good in Gmail, it will probably look good to the other programs (most of them).

All these software tools can display the same email in a different way, because every email client has a different way of rendering the code, each with its own unique bugs, quirks, and methods for handling CSS.

Here I will present you some useful tips you have to take into account, when you start coding your html newsletter. These tips are from my own experience and my research on the Internet about this subject.


Dos and Don'ts

• First of all, your html has to be simple with limited use of css, beacause as mentioned above email programs use different HTML rendering engines  

• Use tables instead of divs for the layout of your html newsletter

• Use inline css styles to have control of colors, fonts, margins. Linked and Imported style sheets are not supported in the large majority of mailreaders. Most webmail browsers truncate/chop off the header.

• You have to specify the font, font color and the font size for all the text and links in every table cell. If you don’t specify a style, then most webmail clients will use their own style sheets.

• Don't use tag attributes on the body tag. Try using a div and apply inline styles to it.

• Don't use javascript, because your newsletter may be marked as spam.

• Upload your images to a web server and use absolute positions 

• Use width and height parameters for your images

• Avoid using background images, because it is not supported in most programs 

• The width of your html newsletter should be between 600px - 700px. Use fixed width for the template, by declaring width, cellpadding, and cellspacing for all tables and table cells.

• Before sending the html template to your client, TEST it. Use many different programs to see how the newsletter displays in them.

Useful links

Here are some links with guides to CSS support in different email programs.

1. http://www.email-standards.org/
2. http://www.campaignmonitor.com/css/

What comes next 

Usually, I use a single-column or a two column layout for my newsletters, both of them having a header, a footer and the main body. I am planning to post soon the approach that I use to create HTML emails.