Coding HTML Emails

April 29, 2009


Any developer who’s ever put together an HTML email, felt good about it, then looked at it in an email client such as Outlook (or Outlook, Outlook, and even Outlook) knows exactly why I feel compelled to write this post.  The way HTML renders in web browser and the way it renders in an email client are 2 completely different animals, and having done my fair share of emails I think I can provide some insight.

 

If you don’t feel like reading this entire post, then remember what I think is the golden rule of HTML email coding:  Use the oldest possible techniques when creating an email.  That’s right, pretend you’re a developer in the early 90’s and you’ve never heard of background images, floating divs, z-indicies and all that good stuff that makes the internet fun.

 

To be a little more specific, here’s a list of some do’s and dont’s for creating HTML emails:

DON’T:

  • Use div tags.  Ever. (The only time I think I’ll ever say that in my life)
  • Use IDs or classes on any element.
  • Use relative or absolute positioning.
  • Use margins or padding for spacing.
  • Use background images on anything.
  • Even think about using Javascript under any circumstances.

 

DO:

  • Use tables and nothing but tables to layout your email.
  • Keep use of rowspan and colspan to a minimum.
  • Use HTML attributes in lieu of inline styles whenever possible (for example, width=”50″ instead of style=”width: 50px;”)
  • Use spacer gifs in their own cell for dead space (in lieu of margins and padding)
  • Apply all text styles inline.
  • Specify line-height on all text.
  • Keep use of CSS as basic as possible (just stuff like color, font-family, font-size, line-height, nothing too fancy)

 

If you’re in doubt about what CSS styles are supported in what browser, here’s a really good resource:
 Guide to CSS Support in Email Clients (2008)

 

Also, I would recommend checking out the Email Standards Project.  It’s definitely a worthwhile cause.

 

Advertisements