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.
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:
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...
Hi, I'm Max!
I'm a software developer who mainly works in PHP, but also dabbles in Ruby and Go. Technical topics that interest me are monitoring, security and performance.
During the day I solve challenging technical problems at Something Digital where I mainly work with the Magento platform. I also blog about tech, work on open source and hunt for bugs.
I built a tool called Domain Clamp which monitors and alerts about expiring domains and SSL certificates.
If you'd like to get in touch with me the best way is on Twitter.