Five Essential Resources for Coding HTML Email

Coding for email can be, politely put, a somewhat specialist job. In addition to the different browser standards that web designers have to face, the various webmail clients can behave differently within those browsers, and then there's the well documented issues with desktop clients like Outlook 2007 and Lotus Notes.

So with that in mind, we've compiled a list of some of our favourite resources to help you get through the html build process as smoothly as possible. If you use any of these, or indeed have any suggestions, please let us know in the comments.

HTML Email Boiler Plate

html-email-boilerplate

The HTML Boiler Plate makes a perfect starting point when coding html - it features many of the common email code fixes and is a good base template. The feedback section on the site is also good for tips and bug fixes.http://htmlemailboilerplate.com

Campaign Monitor's CSS Cheatsheet

campaignmonitor-css

This frequently updated resource is invaluable when coding HTML - it lists support for different CSS declarations, properties and selectors across the major email clients. It's available online, as a spreadsheet and as a pdf, so you can stick it on your wall if that's your kind of thing (and don't pretend it isn't).www.campaignmonitor.com/css

Word to Clean HTML Converter

As you've probably already found out, when a client supplies you copy for an email in a Microsoft Word document, it's filled with non-standard characters and general HTML-unfriendlyness - non-ASCII characters and extra spaces being just two of these. This simple app strips anything bad from your word documents, and makes it ready for dropping into your HTML.http://www.word2cleanhtml.com

Fractal

fractal

Fractal is the closest email has to a validation tool - it'll fix known code issues, make your CSS inline for you and validate your code for the major email clients. In addition, all your campaigns are held together in a nice, easy to use interface.http://getfractal.com

Premailer

Premailer performs some pre-flight checks over your email code, and does a fair bunch of HTML magic, including making css inline, making relative urls absolute, creating a text version, removing unwanted comments, classes & IDs, and appending tracking code to links. phew!http://premailer.dialect.ca

Bonus: Litmus

Whilst you have to pay for it, Litmus is a lifesaver so we thought we'd add it anyway. Essentially, it shows you screenshots of how your email will render in all the major email clients, and gives your content the once over to make sure it doesn't look too spammy. After you've sent your campaign, it can also provide you with a pretty extensive set of analysis, giving you some feedback to incorporate into your next campaign.http://litmus.com