Tim Dupree

I recently needed to create some HTML emails.  I knew that email clients were pretty restrictive when it comes to the html and css they allow, but I was a bit surprised at how bad the landscape really is.

Pretty much throw out any best practice for coding html and pretend you are back in the 90′s.  Here are some general tips and tricks I learned this week about HTML emails.

1. Inline your CSS. Forget about embedding your css styles at the top (or as separate resources).  Most email clients strip out the HTML and BODY tags so you have to embed your styles below the body tag, and even then most clients ignore that.  You are better off just inlining your CSS.
2. Fancy CSS won’t work.  Time to go old school.  Check out this guide to css support for some insights on what CSS is supported in the various email clients.
3. No DIVs, Tables all the way baby.  This is painful.  It feels dirty and wrong, but you are going to need to use tables to structure your emails.
4. No background images.  Support for background images is pretty spotty, so you are better off not using it. This means either make your design less fancy or slice up your design and piece it all back together using tables.
5. Static file references. Make sure any image references are static and pointing to the proper files on your server. Common sense.
6. img {display: block;}.  Seeing weird gaps in your beautiful html email where images should be fitting tightly together? Make sure you add style=”display: block;” to your images.

Some additional reading:

• How To Code HTML Emails
• How To Code HTML Email Newsletters
• Top HTML Email Coding Mistakes
• Stupid HTML Email Design Mistakes