HTML for Emails

HTML for Emails

Welcome to HTML for Emails. Here we will learn a little about writing HTML with an emphasis on getting it to work with email.

This simple newsletter will cover some of the basic skills you will need, as well as some of the tools you might use. The skills are basically knowledge of HTML, but the problem is that most Mail clients don’t fully understand HTML. This is particularly true of Web Mail clients, which also deliberately strip out some of the important styling information.

The process

To create an HTML email:

  1. Develop a basic (unstyled) page in HTML
  2. Use CSS to style your page
  3. Once you have it right, convert all the styles to inline styles!

You will find manually converting styles a very tedious process indeed. You can try this tool at:
http://resources.comparity.net/index.html?panel=inline

Things to bear in mind:

The biggest problem with HTML email is that since there are no official standards for this, Mail clients may or may not implement any number of features to varying degrees of accuracy. Thunderbird, because it uses the same HTML rendering engine as Firefox, will probably do the best, so, while it is nice to have, may lull you into a false sense of security.

Microsoft Outlook is particularly problematic, especially with the advent of Office 2007. Before 2007, Outlook used Internet Explorer to render its HTML, which, though IE is terribly buggy, would do a good enough job. In Office 2007, Outlook now uses Word to do its rendering, which is much worse that IE was a long time ago. As a result, you shouldn’t get too hopeful.

Add to this the fact that there are many users who use other email programs, including Lotus Notes. You should also remember the many users of Web Mail, such as GMail, YahooMail and, of course, HotMail. All of them have thier own opinions of what to do with embedded HTML.

Notice the two-column layout? This should be done using CSS, but you can’t count on this in email. You will have to resort to putting some things in tables. However, this will force you duplicate your paragraph styles in your table data styles.

What Tools do I need?

To create the HTML, all you really need is a text editor. To actually get it into an email takes a bit more work. I recommend the following: