Deprecated

I learned a lot putting this together but I've moved on. I don't want to remove it in case people are using this, but I'll be sharing my Middleman version instead.

emayll

A Jekyll instance for organizing and building HTML emails offline using Haml

Dependencies

• Jekyll 2.0
• Haml Converter Jekyll plugin

Getting Started

• Install Jekyll (if you don't have it yet)
• Clone the repo
• Start the Jekyll server (jekyll serve)
• Watch the Jekyll build (jekyll build --w or other options)

Why would you ever do this?

I'm most comfortable working locally, in my editor. While I had done some occasional emails, creating them on a regular basis didn't become part of my job until I had been a front-end dev in MVC environments for a while.

A static site generator allows for a better workflow and still results in what is necessary for the sending services: a single HTML file with all of the code for the email.

Methodologies

Write emails in Haml

Haml is more terse than HTML and the white space requirement helps keep nested tables clean.

Use HTML attributes whenever possible

As much as possible, I use HTML attributes. One example is bgcolor="" instead of applying a CSS background color. Another example is that separating paragraphs with spacer table rows.

Use front matter as a combo of includes and variables

Yaml front matter is used for meta about each email. It is also used to reduce repetitive code and to control the styles of regular patterns.

No automated inlining

A common practice is to write CSS in a stylesheet and then use something to automatically inline the CSS throughout your HTML. For the time being, I don't do that as I prefer to use a combo of YAML front matter and writing the code.

Basic Organization

By default, emails are organized into promotional and transactional categories. This will likely work for about 10 of each before it gets unwieldy. It's enough for you to jump in and figure out if building in this way works well for you.

Structure

Layouts

Includes

Emails

Each email is a Haml file in a collections folder. The folders initially set up are _promotional and _transactional. Haml files that are saved in those folders will be output as HTML every time that the build runs.

YAML Front Matter

Front matter is used to set information about an email, to control its layout, and to use variables for repeated code and values.

The following are style defaults and will work only if the calls for them are used in a file. They allow for rapidly changing the look of an individual email.