Tips for coding HTML Emails

Introduction

We have compiled some general tips on how to program HTML newsletters and HTML templates for you. You should definitely test sending the mailing to the main desktop and freemail clients.

Tips

  • CSS formatting must be written inline. Most clients ignore information stored in headers.
  • Use classic tables instead of DIV layers to structure the layout.
  • We recommend a maximum width of 700 pixels for the mailing, and less is also better.
  • Do not use background images in tables.
  • Avoid positioning images with FLOAT or ALIGN.
  • WIDTH entries go in the TD and not in the TABLE tag.
  • If your mailing includes a background color, besides making entries in the BODY tag, also use an all-encompassing TABLE container (width 100%) with the colour (e.g. bgcolor “000000”) in the TD.
  • Don’t use style information style”background:FFFFFF” for the background. Some clients, overwrite this with background:none.
  • Many e-mail clients block image display. Please also pay attention to what your newsletter looks like without images loaded.
  • Provide explicit WIDTH and HEIGHT information for all images.
  • Add the style attribute style”display:block;” to all image elements that are used for the design and are not included in the body.
  • Avoid using so-called spacer images for the layout. Better: specify a fixed width in TDs.

Inline CSS

As mentioned above, CSS formatting should definitely be written inline. There is a small web tool you can get that does the work for you by writing formatting headers or from external CSS files directly inline in your source code.

You can download this tool here: http://inlinestyler.torchboxapps.com/styler/