Using a Framework to Simplify Email Design

We switch from a standard HTML template stuffed with messy tabular components to clean human friendly code from Foundation for Emails.

The Problem

Email design is hard. It's a bunch of nested tables and inline styles that create a deafening cacophony of inefficient code.

If you've ever designed an email from scratch, or even altering a template, you've experienced the pain of parsing through the spaghetti.

We were using a template that had enough components to make it flexible, but required us removing each component and it's inlined CSS every time. It was cumbersome to say the least, and we struggled to design emails that were short enough not to get clipped by standard ESPs like GMail.

The Solution - Foundation for Emails

Foundation for Emails by ZURB is an email design framework that simplifies the development, testing, and building of emails. It comes pre-packaged with a SASS compiler, browser sync for fast development, production builds zipped by Gulp, and even sends test emails via AWS and Litmus.

Inky

One of the most attractive features was Inky, a templating language that simplifies the process of creating layouts with tables. With just a few lines of a code, you create a tabular layout that respects the complex email compatibility requirements.

Inky:

<container>
  <row>
    <columns>This is a column.</columns>
  </row>
</container>

And the final compiled HTML:

<table class="container">
  <tbody>
    <tr>
      <td>
        <table class="row">
          <tbody>
            <tr>
              <th class="small-12 large-12 columns first last">
                <table>
                  <tr>
                    <th>This is a column.</th>
                    <th class="expander"></th>
                  </tr>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

This allowed us to cut out a significant amount of code from our emails, which made the template more elegant and legible. Things like spacing elements with nested tables and blank GIFs were made effortless using the <spacer> tag.


<container>

  <row class="header leaf">
    <columns small="12" style="background:url(./assets/img/bg-leaf.jpg)">
        <spacer size="25"></spacer>
        <center>
            <a href="http://stayregular.net/?utm_source=newsletter&utm_campaign=redesign2018">
                <img src="./assets/img/logo.png" alt="Stay Regular logo" />
            </a>
        </center>
        <spacer size="100"></spacer>
        <img src="./assets/img/text-header-1.png" alt="We redesigned our portfolio site" />
        <spacer size="45"></spacer>
        <a href="http://stayregular.net/?utm_source=newsletter&utm_campaign=redesign2018">
            <img src="./assets/img/btn-check-us-out.jpg" alt="Check us out" />
        </a>
        <spacer size="145"></spacer>
    </columns>
  </row>

</container>

The Flaws

Even though the framework made designing emails incredibly simpler in a lot of ways, it still had a few kinks.

I had random conversion errors with MailChimp and sending the emails to GMail accounts. Foundation for Emails comes pre-built with a grid system, and it has media queries that make the email responsive at smaller widths (so it's not hard-set to a certain pixel width). The email code looked fine in MailChimp, but GMail compiled it differently, inlining the smallest media queries CSS. It broke the layout completely making the email fluid -- rather than a set width.

I also had issues testing emails with anything other than AWS. I wanted to use Mailtrap, since it's my go-to dev server for emails. Though I can't find any documentation on how to use Foundation with it.

At the end of the day you're still designing emails, so you're limited to what is compatible with common ESPs. No fancy CSS or JS effects, even with the SASS support. But don't hate the player, hate the game.

All in one solution?

This framework is the easiest and best solution I've found for developing emails. No one comes close to this complete package. Despite a few kinks, the automated sync and build process are stellar additions to this framework.

All my changes, from SASS to compressing images, gets compiled in seconds into production build that I can live edit or zip up for MailChimp.

It even makes collaboration a bit easier by keeping all emails and styles under one repository. You git clone it off our Gitlab and you're good to go designing emails using our styled components.

Quick Start Guide

If I've piqued your interest with how successful our transition was, it's very easy to get started with Foundation for Emails. Just paste the following commands into terminal in your project's parent folder:

git clone https://github.com/zurb/foundation-emails-template your_project_folder
cd your_project_folder
npm install

Thanks again to ZURB and all the contributors for putting together such an awesome seamless and simplified email development solution (that's open source!).

Stay regular,
Oscar

Keep Reading: