0412 899 672

15 May 2011

Coding HTML Newsletters (EDM’s)

//
Comments2

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.

Layout

  • 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.

Styling

  • 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.

General considerations

  • 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.

Troubleshooting Design

  • Column spacing issues – tweak the cellpadding and cellspacing attributes of the html tables. If that doesn’t work, use CSS margin and padding attributes.
  • Do not use JavaScript.
  • 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.

Troubleshooting Delivery

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.

More information

Guide to CSS support in email clients – Campaign Monitor
Free HTML email templates – Constant Contact
Free HTML email templates – MailChimp
EDM software – MailChimp
EDM software – Constant Contact

http://www.campaignmonitor.com/templates/

2 Responses

  1. Magnificent put up, very informative. I wonder why the other specialists of this sector do not notice this. You must proceed your writing. I am confident, you’ve a great readers’ base already!|What’s Happening i am new to this, I stumbled upon this I have discovered It positively useful and it has helped me out loads. I hope to contribute & help other customers like its helped me. Good job.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.