thinking out loud about email templates

scratch.md

Compose Email Templates

Enhance existing template languages with filters to allow email marketers to focus on design and content, not esoteric email client development.

Below takes a stab using the Jade templating language.

Example

:email(width = 640)
  :preheader
    | Lorem ipsum Adipisicing esse ut proident amet anim.
  :section
    h1 Lorem ipsum dolor
    p Lorem ipsum Anim dolor fugiat pariatur anim in labore reprehenderit 
      | quis nisi ea do veniam nisi deserunt dolore pariatur ut dolore qui 
      | voluptate dolore ut occaecat et incididunt id magna velit nulla est ut 
      | Duis nostrud est est exercitation amet.
    :button(color = '#fff', bgcolor = '#f00', href = '#')
      | Lorem ipsum
  :section
    img(src = 'foo.jpg')
    h1 Lorem ipsum dolor
    p Lorem ipsum Culpa occaecat elit in.
    :button(color = '#000', bgcolor = '#0f0')
      | Lorem ipsum »
  :section
    img(src = 'bar.jpg')
    h1 Lorem ipsum dolor
    p Lorem ipsum Culpa occaecat elit in.
    :button(color = '#000', bgcolor = '#0f0')
      | Dolor sit amet »

Modules

Create many modules for compose-email which can be maintained and versioned individually.

var doc = require('compose-email-doc') // proper doctype, main container
  , preheader = require('compose-email-preheader') // solid pre-headers
  , section = require('compose-email-section') // stop writing `table`, `tr`,`td` everywhere!
  , background = require('compose-email-background') // background with vml support
  , button = require('compose-email-button') // buttons with vml support
;

function ComposeEmail(jade) {
  var filters = jade.filters;
  filters.doc = doc;
  filters.preheader = preheader;
  filters.section = section;
  filters.background = background;
  filters.button = button;
  return jade;
}

module.exports = ComposeEmail;

CLI

.
├── default.css
├── images
└── src.jade

# send a test up to litmus
$ cat src.jade | compose-email | inline | litmus-test

# write output to disk
$ cat src.jade | compose-email | inline > build.html