Building on our success with the Customer Newsletter, this project came to be by the Marketing team needing another email template for a new type of newsletter they planned on sending out to customers.
The talented graphic designers within our team created the layouts which I then translated to CSS and HTML.
Using the same build system as our Customer Newsletter template, 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.
Here is a look at the final email template in its entirety.