Last year, as part of a large eCommerce project, I was asked to develop about a dozen transactional HTML email templates. It had been a long time since I had created HTML emails, so I set about researching the current state of HTML email design and development.
Not much has changed over the years regarding all the difficulties and non-standard methods required to create HTML emails. However, I did find some great new tools available that let us offload some of those difficulties to robots and bring HTML email design closer to the more enjoyable process of building web pages for the browser.
Email Lab is a project we released to help us (and others) get a quick start in building email templates with these modern build tools.
The Pain Points
Similar to what fellow Sparkboxer Divya wrote several months ago, here are some of the main difficulties of HTML email development:
Tables, Tables, and More Tables
Writing HTML markup for emails still requires the extensive use of tables. All the semantic markup we have grown accustomed to using for years is mostly thrown out the window when it comes to email.
Inline Styles
The “C” in CSS (cascading) simply does not work in many cases when it comes to email. You can embed a stylesheet into your HTML document, but if you expect your styles to be properly inherited from parent element to child, you will be sorely disappointed. Because of this, much of your styling will need to be inline.
Instead of this:
<head>
<style>
p {
margin: 0 0 1em 0;
}</style>
</head>
<body>
<p>My first paragraph</p>
<p>My second paragraph</p>
</body>
you’ll need to do this:
<body>
<p style="margin: 0 0 1em 0">My first paragraph</p>
<p style="margin: 0 0 1em 0">My second paragraph</p>
</body>
Testing in Email Clients
Testing your HTML email templates in a browser is fine for a very first pass, but ultimately you’ll need to actually send these templates as emails so you can test the rendering in various email clients. This can be a tedious process when making final styling tweaks, especially when we are used to things like Live Reload where we are able to make changes to a stylesheet and see our changes in the browser in a matter of seconds.
New Tools and Resources
While all of the above pain points still exist, several tools and resources are now available to ease the suffering. It’s now possible to use modern build tools to make developing email templates much closer to the way we build HTML templates for the browser.
Enter Email Lab
Email Lab is the open-source project we recently released that is a starter kit for building HTML emails. It leverages Grunt to build and test your emails using modern development tools like Sass, Handlebars, and Live Reload—all of the frontend tooling that we advocate and teach about here at Sparkbox.
Assemble and Handlebars
Handlebars and Assemble are used to dynamically build our templates with reusable layouts and components. When you have a dozen email templates that all need similar layouts and share similar components, this can save you a ton of time when a change is required that could affect many or all of your templates.
HTML Email Boilerplate
Most web developers are familiar with the fabulous HTML5 Boilerplate project. Well, even though there is not one definitive boilerplate project for HTML email, there are plenty of resources out there for you to choose from.
Email Lab uses a very simplified boilerplate for the base layout template out-of-the-box (as seen above), but you can pull from any of these helpful boilerplate projects as well.
https://github.com/seanpowell/Email-Boilerplate
https://github.com/mailchimp/Email-Blueprints
https://github.com/Omgitsonlyalex/Crowder-Email-Template
Sass with Sourcemaps
Node Sass is used to compile Sass files into standard CSS, and sourcemaps are enabled to make debugging in the browser easier. Each email template will have its own Sass file, but you can separate out stylesheets for components and layouts and simply import them into any email’s stylesheet as needed.
Premailer
Email Lab’s development builds are meant for the browser for simplified first-round testing. However, as mentioned before, email clients will need these styled inlined in most cases. When you run a production build, the fantastic Premailer plugin will analyze your styles and automatically inline them into your template for you.
Nodemailer
While first-round testing can be done in the browser, you will ultimately need to test your work in actual email clients. Whether you want to simply send yourself a test email, or use a comprehensive testing suite like Litmus, Email Lab has you covered with the Nodemailer plugin. Nodemailer will simply use an existing SMTP service like your Gmail account or Sendgrid to send out one or all of your templates to any email address.
Give Email Lab a Try
I’ve just covered the basics of Email Lab, but the README file for the project is fairly comprehensive, and if you are used to using Node and Grunt, you should be up and running in just a few minutes. If you have an HTML email development project coming up, give Email Lab a try, and let us know if you have any feedback or suggestions.
