Ask any front end developer about HTML emails and you’ll get a lot of frowns, as flashbacks of slicing up a PSD come to them, along with the memories of cross-client incompatibilities.
I admit it. I’ve never liked email development either, until I got started developing responsive email templates with Foundation for Email (formerly Ink by Zurb). Finally, email development is fun again!
Our talented graphic designers created the layouts which I then translated to CSS and HTML.
One of the challenging yet satisfying aspects of this project was building a build process to handle the aspects that normally make HTML emails difficult to work with. The build process with built with Gulp.
With this system, I was able to separate HTML from CSS (bye-bye inlined CSS) and use SCSS like I would any other site. Then when the email was ready for production, I simply needed to run
gulp build from my command line and my Gulpfile handled the rest. The steps looked like this:
- On build, the SCSS would be compiled into CSS.
- The CSS was then inlined to the corresponding HTML elements.
- Media queries (which can’t be inlined) were placed in the <head> of the email.
- Relative image paths were replaced with absolute paths.
This project was a lot of fun to work on, and oddly satisfying to see come together. Here is a look at the final email template in its entirety.