How to code HTML email — tips for coders

February 10th, 2010 by

When exploring how to code HTML email, keep in mind that the code should be low-tech, long-hand and well-tested. This is the third article in a three-part series on HTML email. You can also download these tips on how to code HTML email in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address coders.

Code HTML email templates like it’s 1999.

  • Code HTML/CSS by hand rather than in a WYSIWYG editor to ensure the code is clean and only includes supported elements.
  • Use low-tech and simple table layouts without nesting or merging cells because CSS layouts with positioning don’t work.
  • Code only long-hand inline CSS styles instead of external or head stylesheets. CSS short-hand like “font” may not work, so write out individual properties like “font-size.” Try a tool like Premailer to make your styles inline.
  • Use CSS primarily for text styling. Put general text styles on parent td cells but don’t rely on style inheritance from parent table cells to children cells. Use inline CSS on heading and paragraph tags to overwrite inherited styles.
  • Avoid font tags because they don’t yield consistent font sizes.
  • Wrap everything in a master 100% width table for background colors and other body styles because head and body tags are stripped out by webmail.
  • Avoid conflicting with webmail CSS ID and class names by not using any or using unique names, like “clientname-footer”, rather than generic names, like “footer.”
  • Reference images with absolute instead of relative paths because they’re hosted on a web server.
  • Use alt text in a header image to ask people to “please turn on images” so that they know they’re missing out when their webmail turns off images.
  • Add CSS text styles to table cells even if they contain only images because alt text will be styled when images are turned off.
  • Take a look at MailChimp’s sample email templates to see code that works.
  • Check out CSS Tricks’ s HTML email screencast for a how-to video.

Test HTML email code everywhere.

  • Test with images and CSS turned off using the Firefox Web Developer Toolbar plugin.
  • Set up many webmail test addresses and install several desktop email programs for testing. For a fee, try MailChimp’s Inbox Inspector for final tests of your template.
  • Avoid spam filters in testing by avoiding the word “test” and dummy text like “lorem ipsum.” Make every aspect of the email production-ready before testing it.

Discover email program inconsistencies on your own, but start with these.

  • Gmail doesn’t honor background-repeat styles, so plan for backgrounds to repeat in all directions.
  • Gmail breaks when using single quotes around multi-word font names in font-family declarations. For example, don’t use “font-family:’Lucida Grande’,Verdana,sans-serif;” but rather “font-family:Lucida Grande,Verdana,sans-serif;”.
  • Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes.
  • Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags.
  • Hotmail seems to ignore margins when margin-top CSS is used. Try using padding instead.
  • Hotmail and AOL on Macs add extra line-height around images unless the line-height of the container is smaller than the font size. Try 70% of the font size like this: 12px font size, use 8px line height (12 x .7 = 8.4)
  • Yahoo uses non-standard align and valign default values on table cells, so set them explicitly.
  • Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead.

Also in this series

Learn More

Posted in Online Marketing

About the Author

Steve Hong is Senior Web Developer at CrossComm, Inc. and brings 11 years of experience in creating for the Web. He provides strategic online consulting to clients on creating Web spaces that are more searchable, usable and accessible to accomplish business goals.

One Response to “How to code HTML email — tips for coders”

  1. Paul Yardley says:

    Coding html email can be the easy part. Delivering your email has proven to be somewhat difficult. We’ve found using a 3rd party SMTP relay provider like SocketLabs to be useful in taking care of all of the SPF, DKIM, ISP relationship stuff that goes into effective email delivery. Before that we were subject to blacklisting and long deferrals, etc… Anyway, great blog Steve!

Leave a Reply

WP-SpamFree by Pole Position Marketing