SETCOOKI

FULL-STACK (WEB) DEVELOPER

E-mail templating deluxe

E-Mail templating with patternlab.io

Recently i finished a e-mail templating project for a client and i decided to use patternlab.io which in the end resulted in a quantum leap compared to alternatives i used before. E-mail templating deluxe:

  • Build a complete design, test and process platform for e-mail marketing
  • Break down templates into patterns for reusability
  • Pipe real world data through template placeholders
  • Automated test and export templates with litmus.com
  • Send e-mails via nodemailer server or pipe templates to 3rd party vendors

Since patternlab is a open and extendable design pattern framework i didn’t see any reason not to give it a try. My previous workflows with Foundation for Emails 2 / ink or MailChimp/CampaignMonitor e-mail builder didn’t really make me happy. It turned out to be a good decision for the simple reason that patternlab is:

  1. build on top of node.js and Gulp
  2. based on mustache/handlebar templating
  3. a design/pattern framework instead of a component/grid framework

I was able to extend patternlab to a degree that turned out to be a fully fletched e-mail design and test studio. My client is happy because my e-mail studio can host hundreds of different HTML and plain text templates without producing redundancy and thus repeating errors. On top of the patternlab core i added:

  • Gulp email builder for inline css pulling, export and automated litmus tests
  • Prettify and clean tasks for exported templates
  • Pipe real test data tasks
  • Send test e-mails tasks
  • node server/api to receive data, fill templates and send e-mail
  • nodemailer for sending e-mail to smtp relay

Once you deal with a large amount of templates and you are looking for very detailed and granular control over every part of your template, css and conditional comments you wouldn’t want to use a consumer platform like MailChimp or CampaignMonitor for your e-mail templating. I am sure there are other solutions out there on the market and i found foundation for e-mails an excellent alternative – but for me the best solution so far is patternlab.io and build everything from scratch.

When i used foundation for e-mails (some 2 years ago) i frequently ran into html/css issues/bugs. There were issues with the grid system and other components while testing against a litmus client list of about 30 clients. I ended up with more custom HTML/CSS then i expected. I am sure with the current version some of issues are fixed and would consider it to be stable enough now. I guess the main difference in the end is really “design/pattern framework” vs. “component/grid framework” and the template/design browser/server that patternlab has on board. From a customer perspective it is way more impressive to show the template browsers (see demo here) then just deliver exported HTML files. When you HTML/CSS level is good enough and you only trust your own code then patternlab is definitely for you.

I started a small comparison based on my experience.

MailChimp Foundation for e-mails Patternlab.io for e-mails
Target group Consumer Developer Developer
Open Source NO YES YES
Extendable NO YES YES
Template building Drag & Drop E-Mail Designer Custom HTML/CSS & Component Library Custom HTML/CSS
Plain text versions possible YES (indirect) NO YES
SCSS to inline CSS NO YES YES (implementable)
Template browser/UI YES YES (very limited) YES
E-Mail client testing YES (Limited) YES (Litmus API on board) NO (but extendable)
Template/Pattern reusability None Limited Full (endless inheritance)
Export and test e-mails YES YES NO (but extendable)