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:
- Dozens of email clients and versions.
- Multiple rendering engines.
- No HTML email standards.
- Little support for CSS.
- Tedious testing procedures.
- A certain popular email client which dropped browser rendering in favor of a Word processor engine.
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.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns