A Workflow That Takes The Pain Out Of (Responsive) HTML Email Development (Using Laravel and Gulp)
Published: February 23, 2015
Most front end developers would probably not list coding HTML emails as one of their favorite activities. From table based layouts, to inline styles, to popular email clients that still use Microsoft Word as a rendering engine it is understandable that HTML email development is generally considered a nightmare. Fortunately, starter templates and build tools make the process a lot less painful. In this post I'll outline a workflow I set up on a recent project that made HTML email development downright fun.
No Need To Reinvent The Wheel
HTML email is hard. (If you were a psycho) You could try to build your own templates from scratch, but why reinvent the wheel when Mailchimp has released an open source library of awesome starter email templates. The base_boxed_basic_query template is a simple template that offers a perfect starting point for transactional HTML emails.
If you're working in Laravel go ahead and put this template into your
Once you've placed the template into your email directory turn it into a layout that can be used for all your email templates. Update the code starting at line 477 as follows:
Then, all your emails will extend that layout:
The Build Step
Before sending your emails you'll want to run them through a build tool to inline the CSS. The reason for this is that some email clients, most notably Gmail strip style tags out of the head. With Gulp, gulp-inline-css is the most popular option, however I have had problems using this plugin with Laravel as demonstrated below:
As a result, I've implemented the gulp-mc-inline-css plugin which calls the Mailchimp API to inline the CSS. However, I have an open issue and pull request on that repo to give the implementor the ability to set strip_css to false. This is necessary as without it, media queries will be stripped out and the email will lose it's resposiveness. In the meantime go ahead and use my fork of the repo. Here's how your package.json will look...
Your gulpfile will look like this...