Introducing Responsive Email Kit

If you know anything about me, you probably know that I'm madly in love with MailChimp. Their email templates are responsive out of the box, and their drag-and-drop editor is to die for. But what about when you can't use MailChimp?

If you know anything about me, you probably know that I’m madly in love with MailChimp.

Their email templates are responsive out of the box, and their drag-and-drop editor is to die for.

But what about when you can't use MailChimp?

We’ve recently started working with a client who uses Constant Contact. Now, let me be clear — I’m sure running an email marketing service is a difficult job, and I haven’t heard the worst things in the world about that company.

But a big problem with Constant Contact right now is that they don’t have any responsive email templates that you can edit within their template editor. (Sure, they have a “responsive” template, but it’s a silly one-column template which actually isn’t responsive).

However, Constant Contact lets users enter their own HTML. This is cool, but it’s going to be awfully tedious when we have lots of repeating information (like events, reminders, etc).

Enter, Responsive Email Toolkit.

I built this tool called Responsive Email Toolkit. You can download it right now on Github.

The folks at ZURB, behind the extremely popular framework Foundation, came up with a great set of responsive email templates they’ve called Ink.

I wanted to implement the Ink templates into a Grunt workflow, so I could:

  • Use Sass/Compass variables and mixins for preprocessed CSS
  • Allow for partials and data-generated lists
  • Make CSS inlining a part of the build process
  • Minify and compress images as part of the build process.

Check out the documentation for more details on how it all works.

Now, I can do neat things like this: Say I have a few events coming up, but I don’t want to repeat the nested tables used by Ink.

First, I add some data to a JSON file, say lists.json:


{
  "events": [
    {
      "name": "My birthday",
      "location": "My apartment",
      "time": "5:30pm"
    },
    {
      "name": "Christmas",
      "location": "The Whole World",
      "time": "December 25"
    }
  ]
}

Then, I can customize one of Ink’s templates to loop through my events and print out the proper HTML:


<% for (var i=0; i < data.lists.events.length; i++) { %>


  

    
      

        

          
            
<%= data.lists.events[i].name %>

            
<%= data.lists.events[i].time %> at <%= data.lists.events[i].location %>

          		
        

      

    		
  



<% } %>

Bada bing bada boom. That’s all she wrote.

Things I’ll probably add to this in the future:

  • Ability to test send emails using Grunt
  • Maybe integrate MailChimp's API to make a template straight from your HTML
  • Add in other email templates

Let me know what you think!

The illustration at the top is by the fine illustrators at ZURB. I did not draw this squid with my bare hands.

Believe