Ten Reminders for Coding HTML Email Templates

I’ve done very little coding for email templates. In fact, in the last five years, I can count all such projects on one hand. Recently, I forced myself to not defer the duties of coding a new template to our guru, Kurt, but rather put that task on my to-do list and get up to speed on best practices as well. Here’s a reminder list for me when I do my next template, but also for anyone else who is interested:

1. Layout - Use tables for layouts, not divs.

2. Stylesheets - Don’t use stylesheets. Keep your styling inline, most email programs strip out stylesheets.

3. Padding / Margin - Use empty cells and rows for padding rather than “padding” or “margin” css attributes.

4. Text Areas – Don’t use style=”width: ____;” or width=”" on div or paragraph tags. Outlook ignores them. Define width by the size of the cell the content sits in.

5. H_ Tags – Include a <span style=”color: #000000;”> tag around the text of any header tags (h1,h2,h3, etc.). Hotmail ignores your color assignment and sticks in their own weird scheme.

6. Images – Use style=”display: block” in all IMG tags so you don’t get a gap below your images.

7. Background Images – Best bet, don’t use them. They display inconsistently (if at all) in email programs.

8. Borders – Cell borders seem to never be displayed right with tables. If you need a vertical border, try using cols with width=”1″ and a background color instead.

9. Images & Line-Height – Remember your table’s defined line height. If you have a row with a defined height of 12px and a line-height of 16px, that row will be 16px tall. If an image 8px tall sits in that cell, even with no text around it, you’ll have a gap.

10. Test – Code like it’s 1996 and test like mad.