HTML Email Starter Template: Free Download

Designing and coding HTML email that displays uniformly in all mail clients can be a considerable hassle.  The best way to get good at it is to have a job that requires you to do it everyday, allowing you to discover and memorize the various quirks associated with the different mail clients.  There was a point where this might have been the only way to become a decent HTML email coder, as documentation on the web was scant to non-existent.  But now, documentation and mail clients are improving (Outlook 2007 aside), and things have become a little easier for us.  A little.

Moving abruptly to the scene featuring the chase, I’ve prepared a simple “starter template” for coding HTML emails.  It’s not intended to be a fully designed template, but rather a foundation for a design.  I’ve added a few background colors just to illustrate the structure.

One of my reasons for doing this was my dissatisfaction with many of the email templates available on the web.  CampaignMonitor offers a selection of simple, free templates but I always thought it was strange that the templates did not follow many of CampaignMonitor’s own recommendations for good HTML email.  I remember testing one about a year ago and finding significant inconsistencies in Gmail and Outlook.  Maybe they’ve since improved.

If you’re new to HTML email you can get pretty far just by strictly following the techniques and conventions found in this template.  If you’re an old pro you might find this useful as a time-saving starting point.

Compatibility
This has been tested and found to display perfectly in the following mail clients and browsers:

• Outlook 2003 & 2007
• Entourage 2008
• Hotmail
• Gmail
• Yahoo mail
• Thunderbird
• Mail.app
• Internet Explorer 6, 7, & 8
• Firefox 3.5
• Safari 4
• Opera 9 & 10

Notes
Here are a few brief explanations of some of the techniques I used.

• The template is wrapped in a 100% width table.  This allows you to assign a background color to the “body” without assigning it to the actual body element.  This is to avoid the problem where the background color bleeds into the top of an email when someone forwards your HTML email.  Also, body styles are sometimes removed by the mail client.
• You’ll notice there is lots of table nesting but no column spanning.  These two things are sometimes confused when people talk about best practices for HTML email.  You can nest tables as much as you like but you should avoid using colspan.  Colspan is what often causes broken layouts, most notable in Lotus Notes.  (I think you’ll be OK if you span no more than two columns, but I try to avoid it entirely.)
• Padding for the headshot image is built into the image itself.  This is the best, maybe the only, way to achieve clean, uniform text flow around an image.
• Width is set to the standardish 600px.  Of course this is adjustable, just make sure you make adjustments in all the right places.
• If you’re new to HTML email you may see what appear to be redundant styles.  This is intentional.  Different mail clients need different instructions.  And, particularly in Outlook 2007, styles do not inherit the way you’d expect, meaning they have to be declared repeatedly.
• All of the other techniques are standard HTML email best practices (tables, inline styles, etc).

Lastly
If you have any recommendations for improvement, or if you notice any bugs, please leave a comment below and I’ll update the template.  Also, if you have access to Lotus Notes (or any other major mail client that I’m forgetting) and are willing to receive a test email, please let me know.

Note to Mac users: For super fast HTML email testing, have a look at my previous post about how to send email tests with Safari and Mail.

Download: HTML Email Starter Template 1.0