Optimize your HTML email design workflow with Grunt.js

Designing emails sucks. Old skool html, tables, inline css, varying css support, various clients, devices and browsers to test on.

As part of a Rackspace hack day, I created this Grunt.js file to to make designing and testing email templates a bit easier and maintainable.

How it works

1. Compiles SCSS to CSS

I like to use SCSS to write styles as it gives you many advantages including variables, mixins, nesting etc.

2. Assembles the templates

Typically you’ll want to use the same layout, header and footer in your emails. Using handlebars we keep the email content separate from the layout.

3. Inlines CSS

Unfortunately it’s still necessary to inline your CSS for most email clients to render. Instead of doing that manually (which would be such a pain) premailer will do it for you.

4. Uploads image assets to a CDN

If testing locally it’s fine to use your images relative path, but when you send an email to your inbox you’ll want to use an absolute path. Using Rackspace Cloud Files this will upload all your images to a CDN and update the urls in your email templates.

5. Sends you the email

It’s no good opening up your email in your browser to see how it looks as every email client renders it differently. Sending the email to yourself allows you to test the design in your email client.

Bonus: If you use Litmus to test emails, you can easily send the email to Litmus to do the testing for you.

Requirements

• Node.js
• Grunt-cli and Grunt npm install grunt-cli -g
• Ruby
• Premailer gem install premailer hpricot nokogiri
• Mailgun
• Rackspace Cloud Files (optional) - developer discount
• Litmus (optional)

Open sourced on GitHub

Fork/clone/download it from GitHub

Some good discussions going on Hacker News and Reddit.

What do you think? Do you find this useful? I’m curious if designers typically working on emails are able to follow the instructions when it comes to working with Grunt.js, Node.js and Ruby Gems or if I should make it simpler.

p.s. We’re hiring Front-End Developers and Designers at Rackspace in San Francisco, San Antonio and Blacksburg. You get to hack on interesting things like this and solve design problems for developers.