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

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

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 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

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

Share:

Elliot Ross is Managing Director of Action Rocket, an email marketing creative agency based in London.
You can find him on Twitter at @iamelliot

Anonymous

Absolutely awesome round-up, Elliot! I’m super-keen to share this around – it’s a solid list for beginners and old-hands alike.

Just a note on the boilerplate: we’ve seen images stretching in Outlook as a result of img{ height:auto; line-height:100%;} being used in HTML email code. Make sure you don’t include that and you’ll be on your way

http://www.elliot-ross.co.uk Elliot Ross

thanks Ros! feel free to share

good call on the boilerplate, I’ve been using a modified version of it that I need to stick back on github at some point..

http://elevatedthird.com Katie

I really like this list of tools. I just found out about Premailer and often reference anything and everything on Campaign Monitor. Looking forward to trying out the boilerplate especially. Thanks for the list!

Dev

Similar to Litmus – but I like it better – is Email on Acid.

http://www.emaillist.net Email Lists Dude

Thanks for this. I had never heard of Litmus before. Seems like a real good tool, as are the others that you’ve mentioned. Definitely going to add some of these to my “toolbox”!

We run a series of day courses on design, development and creativity in email. They're aimed at marketers, email designers and coders, and will give you everything you need to get the best from your email work.

More from us

Elliot Ross

Elliot Ross is founder of Action Rocket, a creative agency working in email. His experience includes creating award winning websites, mobile experiences and email marketing campaigns for British Airways, Sony Playstation and IKEA.