By Craig Buckler

The HTML Email Boilerplate

By Craig Buckler

Web developers often moan about having to support five mainstream browsers, a few mobile devices and quirky behavior in a certain applications. If you think we have it bad, spare a thought for those creating HTML emails. They must contend with:

Forget about stylesheets, floats, negative margins, positioning, background images, animated GIFs, PNGs or any other fun time-saving techniques. If you think it’s tough making a site work in IE6 today, HTML emails must be coded like it’s 1998. That means tables, inline styles and images.

Fortunately, Sean Powell has taken inspiration from Paul Irish’s HTML5 Boilerplate and created the HTML Email Boilerplate. It includes various fixes discovered by industry leaders such as Campaign Monitor and MailChimp to produce a bullet-proof email template which works in Outlook, GMail, Hotmail, Yahoo Mail and other popular clients.

Sean admits it’s not plug and play — you will need to get your hands dirty with coding — but it’s a great first step which solves many of the common problems experienced when developing HTML emails.

The HTML Email Boilerplate code includes two HTML files: one with commented instructions and one without which can be used as the basis of your email. It’s issued under the MIT License, is free and can be used for any commercial or non-commercial project.

What have you got to lose? Please let us know if you’ve tried the boilerplate and, more importantly, whether it worked in your email application.

  • Jon

    Thanks, Craig, for this one… Very valuable resource. The more email campaign templates I’ve designed, the more I’ve come across the various nuances of email clients. It’s good that all of these have found a home now.

  • Glad this was published today. One of my new tasks is to convert plain text emails to an HTML format and this is surely helpful!

  • Jason

    I have used this on a few recent client emails and it worked really well for me. Really simplified the process, and resulted in a more consistent end result across the various email clients.

    • Anonymous

      Hey Jason – Glad it’s working for you. Please keep the feedback coming. @seanpowell

  • HTML Emails have always been my nightmare. Nothing kills your soul like reading an article about something cool like CSS3, then realizing you have to code a newsletter, and pretend that technology hasn’t advanced in ~14 years. I look forward to testing this Boilerplate out. It may be the first positive and exciting feeling I’ve had about newsletters in VERY long time.

  • Andrai Whitted

    I’m going to try it on my company’s Lotus Notes which always destroys my pretty emails. Hope it helps

  • Bob

    This is a great article. I have spent many hours discovering these fixes on my own, so seeing them in one place formatted in an easy to apply method will help others avoid the hours I spent researching this subject. It is articles like this that have made Sitepoint my go to site for help in coding issues. Thanks again, ya’ll are the best.

  • Excellent article on HTML email methods.

  • Amy

    I am responsible for sending 3-4 email promotions and newsletters each week for my employer and since the majority of our members use Outlook, this has always been a problem. It’s definitely more time-consuming, but I won’t be forgetting my coding roots anytime soon!

  • I’m really liking this.

  • I’m really liking this.

  • Anonymous

    Hey Craig – Thanks for sharing the boilerplate. I really appreciate it.

Get the latest in Front-end, once a week, for free.