Take the pain out of building email templates using Grunt Email Boilerplate.
Markup for Email templates can get complex and messy, making debugging and adjusting templates painful. Often regions are shared between different templates (e.g. header and footer), or areas are repeated in the same email (e.g. a product item or news article layout).
Couldn’t templating help reduce the complexity of layouts and support DRY (don’t repeat yourself)?
Email templates require a mixture of inline and embedded CSS. Using an method of inlining styles, such as Premailer, is pretty much essential for keeping your HTML files clean. CSS pre-processors, such as SASS, can also help speed up development time. If we want to look at templating out sections of the email (suggested above) SASS helps us keep our CSS modular in separate files. Previously I would run sass watch, then run Premailer when the email was built / every time a template needing updating.
Couldn’t this workflow be better automated?
Previously, I would build a template then upload it to an email platform from which I’d send out test emails to myself and Litmus. I’d then make adjustments, upload, send tests… adjustments, upload, send tests, adjustments, upload send tests… you get the picture.
Couldn’t we speed up this process?
While some email templates are hooked up to CMS/ecommerce solutions that populate email templates, this level of integration isn’t always feasible for some people. Updating a typical product/sales email template each month might involve updating the product name, product price, product URL and product image (resized, optimised and re-uploaded) for each product in the email - a dull, time-consuming task. Doing this task through a WYSIWYG editor commonly found in email platforms is prone to breaking layouts (editing wrong regions or incorrectly sized images).
Couldn’t this task be automated? And couldn’t we better protect the layout from mistakes?
Grunt Email Boilerplate is a vanilla email template that takes advantage of task-runner Grunt and it’s many plugins/tasks. Out of the box it:
…which solves most of our problems outlined above:
We can use EJS templating to separate out header/footer elements and share between different email templates. We can also use EJS to iterate through JSON arrays of content, populating our HTML templates. For example, in a recent product email template I used this JSON file to populate the products section - only requiring me to write the HTML for one product.
SASS/Compass and Premailer are run every time the content is changed, two less things to think about so you can concentrate on building your template.
Nodemailer allows you to send yourself or others versions of the emails for testing. I didn’t explore this option until after I’d built my most recent email template, so currently there’s no images in the emails it sends on my setup. But I’m sure with a bit of digging that can be sorted. Support for Litmus appears to be on its way.
Using EJS templating to iterate through arrays of data is really powerful. For me, the JSON file containing email content is easy to edit manually if elements of the email change. However, as the file is JSON you can see how this process could easily be hooked up to a UI for less technical users or integrated into a back-office system that spits out JSON.
While template building and testing can be painful, Grunt Email Boilerplate does a great job of speeding up development right out of the box. It’s also straightforward to customise to fit your requirements.
The next time you’re building email templates I suggest you check out Grunt Email Boilerplate. You can also check out the source of a HTML template I built using Grunt Email Boilerplate - including customisations I’ve made to the workflow.