If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Using Grunt to Make Your Email Design Workflow Fun Again

15-10-2014, 15:24

Designing email is hard and archaic. Inlining CSS, table design, varying CSS support, multiple devices, multiple clients, the list is endless. In this tutorial I’ll explain how you can use Grunt to help automate and streamline your workflow.

Broken Email Design Workflow

Email design is a different workflow to web design. Often you’re designing a template in an isolated environment, with little to no dependencies or shared resources. You may be copying markup from one place (local, static) to another (ESP, codebase). It can be difficult to maintain your email templates, hard to keep them consistent and awkward to collaborate with team members, all while keeping in mind the various testing and inlining that needs to be done before they are sent.One problem I’ve had in the past is every time I needed a new email template, I would take an existing template then make a few tweaks here and there. This would result in inconsistent emails across the product. Which is just bad practice.Another issue I’ve come across is I think I’m done, so I put the template through a CSS inliner tool and hand it over to a developer, only for someone to request a change, or point out an error. The edit/inline/copy workflow then has to be repeated again and again.Grunt to the Rescue

Grunt is a task runner. It’s a Javascript file that runs the tasks you want it to run one after another. That list of things you need to do I just mentioned above? We can put those into a Grunt file and have it do all those for us. Perfect for running repetitive tasks.

To get Grunt up and running you’ll have to get your hands just a bit dirty with command line stuff and Javascript. But it’s very straight forward.1. How to Get Grunt up and Running

Chris Coyier gives a really good tutorial on setting up Grunt for the first time. I’m going to run over the basics.Grunt requires a couple of things to get going. Node, a package manager and a grunt file.Install Node

Here we’re telling the node package manager to use Grunt, version 0.4.5 or above.

NPM install

Now in order to install the above version of Grunt, go to your project’s directory in command line and enter:

1

npm install

When you run this command you’ll notice a node_modules folder appear.

Install Grunt Command Line Interface

Still in your email directory, run the following command:

1

npm install -g grunt-cli

Note: you may need to prepend this command with sudo if you’re asked to run it as root/Administrator. Having done that, we can now type Grunt commands into the command line.

Create your Gruntfile.js

Create a file called Gruntfile.js in your project folder and include the following JavaScript:

123456789

module.exports = function(grunt) {

grunt.initConfig({ pkg: grunt.file.readJSON('package.json') });

grunt.registerTask('default');

};

This is the bare bones of what’s needed for Grunt to work. Now to add more exciting stuff.

2. Add the Tasks to Grunt

Let’s start off with something simple, but vital: Inlining CSS. Let’s say we have an email template, with CSS in the head. CSS in the head is easy(ish) to maintain, but the template that we actually want to send should have CSS inlined.

Create the HTML Template

We’re going to use a fairly basic HTML email with the CSS in the head. Save the following markup as email.html in your project’s directory.

Next we’re going to use a CSS inliner task to place each style rule inline on the HTML elements themselves. I like this inliner as it doesn’t require other dependencies. Head back to your command line and run this:

1

npm install grunt-inline-css --save-dev

This will add the grunt-inline-css task to your npm_modules folder, as well as thepackage.json file.

Add the Task to Your Gruntfile

Next add the task to your Gruntfile.js using this snippet, above where you see grunt.registerTask('default');

1

grunt.loadNpmTasks('grunt-inline-css');

Then add in your config options, within the grunt.initConfig() method:

Returning once again to the command line, type grunt and enter to run it.

You should now be left with an email-inlined.html file that has the css inlined. If you open both HTML files in your browser they should look the same.

Email Design Tasks

With any luck that will have convinced you of the powers of Grunt in automating your email design workflow. What’s more, following that introduction has given you the framework to go even further.What other email design tasks might you automate?

I like to manage my CSS using SCSS, so the first thing I get Grunt to do is compile the main SCSS file.

2. Assemble HTML

Assemble is a static site generator. It compiles the HTML by bringing together the main layout template(s) and the content for each email.

3. Inline CSS

I’m using premailer to inline CSS. If you’re wondering why I’m not using the inliner from above, I found that premailer has better support for media queries. For media queries to work, we want them to be left alone in the head, not inlined. Note: premailer has dependencies which also need to be installed, including Ruby and a couple of gems.

4. Sending a Test Email

To send an email to an inbox I’m using Mailgun's API. This sends the outputted HTML email to my inbox so I can see it for myself in whichever client I choose.This is also a useful way to send your template to Litmus if you want to preview it in other email clients. Doing so is a matter of changing the recipient.

5. CDN

This is handy if you’re sending transactional emails and need to store image assets somewhere. If you’re using an ESP (Email Service Provider) to send your emails there’s a good chance they store your image assets for you, so it’s not an issue in this case.

Running the Tasks

To run the tasks we have a number of command options.

grunt runs the default task. This includes compiling Sass, assembling templates and inlining the CSS. You can then open up the output in your browser.

grunt send --template=MY_TEMPLATE.html will run the above tasks, as well as sending out the email template you specify. Remember to update the Mailgun settings inGruntfile.js.

grunt cdnify will again run the default tasks, but will also upload any local image assets, then replace the file paths with the CDN path.

There are more tasks you might want to add to aid your process, or you may want to remove some. Head over to Grunt's plugin directory to find the tasks that help your workflow.

Transactional Email Templates

Here are some templates I prepared earlier.

Using the workflow and Gruntfile outlined above, I open-sourced a handful oftransactional emails for dev teams to use. Feel free to make use of them as is, or use them as a boilerplate for your own email designs.

Conclusion

Many tasks associated with email design can be arduous and awkward. Let Grunt do the hard work for you and you’ll find the whole process much more enjoyable!

We process personal data about users of our site, through the use of cookies and other technologies, to deliver our services, personalize advertising, and to analyze site activity. We may share certain information about our users with our advertising and analytics partners. For additional details, refer to our Privacy Policy.

By clicking "I AGREE" below, you agree to our Privacy Policy and our personal data processing and cookie practices as described therein. You also acknowledge that this forum may be hosted outside your country and you consent to the collection, storage, and processing of your data in the country where this forum is hosted.