How to create HTML emails

Everybody knows HTML emails are a pain to write. For starters, most email clients butcher CSS so we have to go all old school and use tables for layout. Then there's the whole spam issue. The following is a tutorial on how to approach an HTML email in order to maximise the number of email clients that will render it correctly and minimise the number of clients that will condemn it as spam.

Do

  • Make sure your fixed design width is under 620 pixels wide.
  • Use tables for layout. CSS has limited support in most web clients so don't use floats or absolute positioning (blocked for obvious reasons).
  • Specify the width, height and alt text of images - you should be doing this anyway.
  • Place styles inside the <body> not the <head>. The <head> element and any contained element will be removed by web clients.
  • Make sure that class and ID names will not clash with common names that may be used by web clients i.e. "#main"

Don't

  • Use JavaScript, ActiveX or Java.
  • Use a Doctype declaration. Most email clients don't take any notice of them. In fact, in web based clients your HTML will be inserted into the body of another document with its own declaration. All in all, it's best to assume your document will be rendered in "quirks mode" and therefore you should validate against the HTML 4.1 Transitional standard and avoid XHTML.
  • Link to external files. In general all external links to files except images will be remove by email clients. So that means avoiding references to external stylesheets or javascript files.
  • Assign any CSS properties to the <body> tag. The <body> element will be renamed or removed by web clients.

Other CSS issues

  • Hotmail removes any use of the margin property, use padding instead.
  • Most web clients remove the background-position property.
  • Adding styles to <a> elements can be problematic.
     

How to avoid the spam folder

  • Validate your document.
  • The ratio of images to text is very important. if an email contains mainly images it may be rejected.
  • Do not link to image files which return 0 bytes.
  • Do not make text the same colour as the background.
  • Do not use very small text sizes.

Avoid obvious spam phrases such as:

  • free installation
  • no obligation
  • no investment
  • special promotion
  • limited time offer
  • sign up FREE!
  • money back guarantee
06 February 2007