HTML Email organisation

I recently started sending a lot of HTML emails and it quickly got disorganized, developing and designing emails on demand is fine when sending a few emails but it gets messy when the volume of emails increase. Creating HTML emails is a fairly laborious undertaking, this got me thinking of methods of automating the various tasks involved which in my process included: (Vague list. Will get into this later…)

1. Finding an appropriate email template or framework. (There are a number of email templates and frameworks available exhaustive list here and here).
2. Design the emails, inline them (Premailer), Test (Usually just used physical devices but for a wider email client testing I recommend paid alternatives).

My adopted front-end workflow is fairly straight forward, the tools:

• Assemble - generate static files.
• Grunt - automate various tasks.
• Premailer - inline css styles.
• Sass - Syntatically Awesome Stylesheets (Totally optional but highly recommended)
• Github - code hosting.

Personally I use a Linux machine so the setup instructions might not be applicable for windows users.

Setup

1. Grunt

Grunt is a javascript task runner that automates repetitive tasks. For this article I’m assuming you are already familiar with it, if not please got through their Getting Started tutorial. I will however install grunt through a package.json file later.

Install grunt-cli

npm install -g grunt-cli

Requirements for grunt is NodeJs, and an up-to-date npm installation.

2. Assemble

Assemble is a static generator for Node.js, Grunt.js and Yeoman, it’s fairly simple to use and an awesome tool. I’m going to use grunt to install it.

3. Premailer

This is for inlining css styles, we will achieve this using the premailer gem and use the grunt-premailer plugin to automate this task.

Install it;

gem install premailer hpricot nokogiri

4. Sass

I always use sass to style my projects instead of plain CSS, if you haven’t used sass before atleast I bet you’ve heard of it. Read more - sass

Install sass;

gem install sass

Lets do this!

Clone the repo to your machine to get started.

git clone https://github.com/Habu-Kagumba/html_email.git

Run npm install at the root of the directory to install the various plugins used.

For the project I’m going to use some grunt plugins for various tasks. The final Gruntfile.js and package.json will be found in the repo.

Plugins used;

• grunt-newer skip already processed files.
• grunt-contrib-connect static web server.
• grunt-contrib-watch to watch for changes and run site rebuild.
• grunt-premailer task to inline styles to the final email generated by assemble using the premailer gem installed earlier. (please stick to v0.2.5, had problems with later versions!!!)
• grunt-contrib-imagemin to minify image assets.
• grunt-contrib-clean to clean up directories before build tasks.
• grunt-contrib-sass to process sass stylesheets.
• grunt-cdnify to prepend url with absolute paths for external assets like images.
• (Optional) grunt-aws to upload my image assets to Amazon S3 - Personal preference.
• (Optional) grunt-mailgun to send the emails.

To build and view the emails (intergrated livereload so changes are real time) run grunt dev then point your browser to http://localhost:8080 to view the generated emails. Note I have only 1 working example the transactional.html template.

To publish assets (images for this example) run grunt cdnifyd. This will upload images to Amazon S3 and append image urls to point to your bucket.

To send the mail using mailgun there are 3 options - the template (e.g. transactional.html or .txt), the sender email address, the recipient email address and the subject. Example;

grunt send --template=transactional.html --sender=jane@doe.com --recipient=john@doe.com --subject="This is a subject"

The final repo is here.