The following notes outline the most important factors when creating HTML newsletters. This article is not intended to be a full tutorial but rather a quick reference guide for those of you already working with HTML and CSS.
- Nested tables styled with html formatting and inline CSS i.e. not CSS styled Divs.
- The outer table should be <=98%, inner tables set to 100% or 500px if problems occur during testing or fixed with is required.
- Two/three column layouts – 1 outer table (with 2/3 columns) + additional tables for header, footer and each content area
- One column layout – 1 x 1 column outer table may suffice. If problems occur. Use table for each section in the table.
- HTML spans to be used sparingly to achieve specific effects while HTML tables do the bulk of the layout work. – SPANs work nearly all the time.
- DIVs are very problematic – don’t use if possible.
- Style declarations should be inline only e.g. <img style=”padding-right:10px” … They should never be placed in the <head> section of the code.
Note: If using templates provided by email software, CSS declarations in the <body> section are converted during delivery.
- No CSS shorthand. Long hand only.
- CSS should be kept simple with no hacks.
- CSS Properties to avoid – float,
Background images: Do not display in Outlook 2007, if you must use them apply the background with the table background attribute i.e. <table background=”…> not CSS
- Background colours should be specified using the bgcolor attribute of the <table> or <td> tags, not CSS background properties.
- Use HTML table attributes within the TABLE and TD tags. In general, use CSS for other styling.
- Paths to other pages and images should be absolute. These pages and images should reside on a web server.
- Code using HTML– NOT XHTML.
- A doctype is not required.
- Column spacing issues – tweak the cellpadding and cellspacing attributes of the html tables. If that doesn’t work, use CSS margin and padding attributes.
- Image displacement can occur when a <td> cell is closed right below the <img> tag. Putting the <td>right after (on the same line as) the <img> tag eliminates the 1 pixel gap.
The following can trigger spam filters and cause your email to be sent to the junk/spam folder:
- 1 X 1 (or very small) pixel spacer gifs.
- Large images at the top of the email.
- Make sure your content is readable with images disabled as many email clients disable images.
- If you must use CSS to create space within a cell, use padding and not margin as margin on a <td> is not supported well by some older email clients such as gmail.
- Lotus notes requires that <td> tags have correctly defined widths.