Categories


Author: Dan Van Brunt

Getting Inked: Zurb's Foundation for Email 2

Getting Inked: Zurb's Foundation for Email 2

 Zurb, developer of the popular Foundation Framework, has put some serious human power into creating a similar framework that allows you to quickly create responsive HTML emails.

My first introduction with this framework was back when it was called Ink, and while it was already a well rounded boilerplate at the time, they've more recently turned it into a full fledged workflow tool and framework and put some substantial features into it to boot. It's also now brandishing the shiny new name of Foundation for Email 2.  

Lets dive right into some of the key features...

Inky

I think the biggest change was the addition of their new templating language Inky. I'm by no means an email expert, but as I understand it, one of the most annoying parts is having to regress back to html tables and worse over, each column/row set having to be in its own table tag. So coding simple layouts tends to require a substantial amount of tabular diarrhea. 

So, to create something as simple as this...

inky.png

It would normally take about this much html...

<table class="container">
  <tbody>
    <tr>
      <td>
        <table class="row">
          <tbody>
            <tr>
              <th class="small-12 large-12 columns first last">
                <table>
                  <tr>
                    <th>Put content in me!</th>
                    <th class="expander"></th>
                  </tr>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

...but with Inky, you need only use this...

<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>

After the build tool runs, it handles converting these few Inky lines into all that needed HTML above. The same output with a whole lot less hassle and far bit fewer lines to read when you come back later to make updates.

Panini Templating

Just like many other templating engines, Zurb's Panini has Layouts, Partials, Data etc. You can even write it with Handlebars if you like and further organize HTML into reusable chunks, or use custom variables to make more dynamic email content.

Sass Preprocessor & CSS Inliner

All the sass-iness you'd expect on a website, added for email too. Couple this with a follow up inlining and you'll be an email dev-force to be reckoned with. 

CSS support with emails suck. So with awesome CSS inlining tools like this, you butt will be covered for both inlining and embedding. Whether you are using media-queries or just looking to apply the same font style across a table's cells, you can now do both simply by writing the Sass or CSS that you already know and love.

Litmus Tests

Litmus, the defacto email guru, is currently the best opinion out there for testing.  It's also an amazing resource for articles on just about every email related stat and device/client specific user experience.

With this latest Foundation for Email update you can now run 'npm run litmus' to instantly send off all your emails to Litmus for testing against your chosen array of email clients/devices. It's hard to even calculate the hours overall this one workflow could save you. 

Base Templates

Part of the original Ink package and now rewritten using Inky, Zurb has provided a key set of email templates/layouts to help kickoff your email. Need customizations? No problem, just use them as a base and modify as you see fit.

Build Zipping

So now your email looks amazing and it's all tested. You just need to ship it out to the client, or upload it to your email vendor of choice. This is where you would normally manually root through the emails zipping up all HTML and images. However, with Foundation for Email's build tool, a simple 'npm run zip' and your email's HTML and images are zipped and waiting for you.

What's Next?

I'm not sure what other things Zurb has planned in the next iteration of Foundation for Email but I could think of a few things I'd love to see:

  • Automated uploading to Email Marketing Vendors (Silverpop, Campaign Monitor, MailChimp etc)
    • I have seen this done even where there is no API, by essentially using a headless browser and script to click through the UI. Considering this step is usually done a few times and about a 5-10min process, automating it across all emails could really speed things up.
  • Emailer to send test emails directly from local machine to a list of emails.
    • This would drastically increase the speed at which you can send test emails to QA team, clients or even yourself.