Grunt for Email Development

There have been many moments while developing an email in which I stopped to shout into the Heavens “WHY ARE THERE NO EMAIL STANDARDS?!” I mean, ok, there’s like a few, but they’re de facto standards, not something a committee of different client developers and email providers have met to discuss and agree upon.

What we have in the email game is a real blind leading the blind thing. Even the wonderful people at Campaign Monitor, Litmus and MailChimp with their one eye a piece will come out with solutions or suggestions that will either become outdated or not work in every case.

Unless I quit my current job and form a committee of like-frustrated individuals, I don’t see standards happening soon. Pity.

With reality being what it is, how can we as developers make it all a little less painful?

One area I have been able to exercise some small amount of control over is in the workflow of email development. Specifically, by using a tool likeGrunt you can greatly increase the speed at which you develop and iterate on your projects.

A coworker of mine at Lookout met with me one day to take a look at my workflow while developing email. He quickly saw that most of what I was doing was tedious and unnecessary. His experience in developing web apps exposed him early on to tools like Grunt for making many tasks easier.

The largest time sink in email development is the required step of inlining css styles. There exist many tools for accomplishing this in a post-process manner, but when developing and testing rapidly, having something automate the process makes life much easier. And, I like having what I’m working with be the same as the final product. It reduces the chance that some weird quirk of CSS or HTML might slip into the client testing step and create confusion around the potential cause.

Since that meeting, I have taken the great, big world my coworker showed me and streamlined and adapted it to a better email development workflow. Follow the steps below to get started:

  1. Fork the MailDev repo at https://github.com/JesseGortarez/MailDev
  2. Follow the instructions in the README
  3. Create modules within app/modules which can be used with Handlebars to templatize your work.
  4. As you develop and save your work, grunt will notice a change in your code and reload the page and inline all css in the process. It’s very fast.
  5. Your final code is in build/index.html. Copy and paste the contents of index.html into whatever test suite you’re using or into whatever test send you’re working with and see how it looks.