Creating a HTML email template is like taking a trip back to the 90′s, where web standards were an unknown concept and table layout was the way to do things. I’ve boiled down my experiences into 42 bulletpoints, that can help avoid unexpected results.

Generally

  • Don’t use <html>, <head> or <body> tags, but use a wrapper <table> instead, with width set to 98% or less.
  • Don’t use scripts, flash, frames, iframes, applets or comments.
  • Spans and divs can be used to some degree, although I recommend to avoid using divs and use a table instead.
  • Background images can be used, but make sure the layout works without them as well, because they may not be displayed.

Tables

  • Use HTML Tables for Layout
  • Wrap the whole document in a table with one row and one cell. This will “simulate” the body tag.
  • Define the background color in a td cell with the bgcolor attribute, not the CSS style.
  • Use the attributes within the table and td tags to control the table’s display. For example, setting border=”0″, valign=”top”, align=”left” (or center, if that suits the design), cellpadding=”0″, cellspacing=”0″, and so on.
  • Put font style information closest to the content and in for all content, in most cases this will be in all TDs. Yes, you will get many repetitions.
  • Although a flexible width can be accomplished, it is recommended to use a fixed width to have a layout to display properly in multiple email clients. And don’t make it too wide either, no more than 500px.
  • The margin style does not work in table cells, but padding does. Even so, still set the margin to 0.
  • Set borders on tables to 0 and only use CSS for creating borders around table cells.

CSS

  • Only use inline CSS. It’s usefull for borders, padding, margin, background colors and fonts.
  • If you must use CSS style declarations put them below the body tag, not between the head tags. Best not to use at all, but use inline styling. Furhermore, if you don’t have body and head tags, like recommended earlier, this shouldn’t be a problem.
  • Don’t use CSS shorthand like “border: 1px solid black”. Instead use border-width, border-style and border-color. Same applies to font, padding, background etc.
  • Make sure to add padding: 0 and margin: 0 inline styles to all tables and table cells, unless these parameters already have different values.

Images

  • Stick to image formats jpg and gif.
  • If you have an image in a cell, put the closing </td> tag immediately after the img tag on the same line.
  • Use the table’s background attribute for background images instead of using CSS.
  • Store the email images on a web server and use an absolute path when referring, like http://www.example.com/images/myimages.jpg.
  • Be sure all your images use the alt, height, and width attributes.
  • Don’t rely on your images being displayed, and not the alt text either. Make sure your HTML email displays acceptably without images.
  • Use the target=”_blank” attribute for the a tags, so that people who read with webmail services don’t have the requested page appear within their webmail interface.
  • Don’t use 1×1-pixel images as it will increase the likelihood that your email is classified as spam.
  • Avoid using very large images in the email, as this also may increase the likelihood that your email is classified as spam.

Links

  • If you need a light-colored link against a dark background color, put the font definition in the td cell (so it applies to p and a tags equally) then add a color: style to the a tag.
  • If the p and a fonts appear to be different sizes, wrap the a tag in a p tag.

Tools

  • You can open your HTML file in Word, choose “Show as website” from the file menu and get an indication of how your email will render in Outlook 2007. This way you won’t have to send emails all the time, and this can be a real time saver if you no easy access to Outlook 2007.
  • When your done with your HTML email, run it through Span Check to see if there are anything that will trigger a spam filter.
  • Also run your HTML email through the HTML Email Validator, which will help you localize any problems.

Thanks to sitepoint.com for inspiration.

Posted Thursday, May 7th, 2009 at 6:25 pm
Filed Under Category: CSS
You can leave a response, or trackback from your own site.

0

Leave a Reply