Ultimate Guide To Foundation For Emails

Email layouts have always been finicky and difficult to work with. But email frameworks like Foundation for Emails can make a world of difference in regards to browser rendering, responsive grids, and dynamic features powered by toolkits like Gulp.js.

In this post, I’d like to delve into Zurb’s newest email framework. Foundation for Emails is just as flexible and powerful with an onslaught of tools made to improve the email design workflow.

Whether you’re a professional e-mail designer or just getting started with the process, this post offers an inside look at Foundation to improve your workflow and help you craft impeccable email layouts.

Email Frameworks: The Basics

The Foundation for Emails library initially started as Zurb Ink, a classic framework with support for browser webapps and desktop email clients. Ink is no longer supported but lives on under a new name: Foundation for Emails.

A good place to start is with the question of an e-mail framework in general. Why even use a template or email framework system?

Well, the benefits are multifaceted but the obvious reason is to save time. With a framework, you get pre-built codes that have been tested in all major email programs. You can just design and let the framework handle all the heavy lifting.

Custom templates can save even more time because of consistency and reliance across all forms of email inbox software. Since Foundation is a responsive framework you never need to worry about screen size or device system ever again.

The Foundation website has individual pages explaining the value of different e-mail campaigns built on the framework.

Transactional emails
Drip campaigns
Marketing mailers and newsletters

With custom grids and templates you can choose from a wide variety of layouts that suit your needs. Web compatibility is vast and while it’s still smart to test your email layouts individually, you can rest assured that Foundation for Emails should work across the board for every rendering engine.

This framework also comes with basic UI design styles for buttons, links, headers, and other typographic elements. This gives designers a custom style to use as a base with the ability to overwrite CSS if needed.

Structuring a Vetted Email Design

There are only a few required steps to go from a Foundation for Emails download to a custom email layout. It’s all much simpler than you think and just requires repetition to nail down the workflow.

To get started download a copy of Foundation for Emails locally. Those who want to use Sass can work with the .SCSS files, but you can also choose the plain CSS alternative. This pack includes:

foundation.css
index.html
templates(folder)

The templates folder holds boilerplate examples of an email layout with generic HTML. By cloning this example you can alter table grids with classes to generate rows and columns.

The Foundation docs feature a CSS guide for plain CSS email templates.

Once you have the files downloaded you’ll want to actually build the HTML email. This does require some understanding of email design, but you can learn most of it from the Foundation docs.

Zurb’s team also added their own custom templating language called Inky, named after the octopus mascot. This template system adds a layer of abstraction on top of your e-mail HTML code.

Inky converts tags for rows and columns into complex table layouts without writing all the code from scratch. But to parse Inky code you’ll need to use the Zurb Email Stack (more on this later).

Here’s an example of Inky code followed by the converted HTML output.

<-- Inky code -->
<container>
  <row>
    <columns>This is a column.</columns>
  </row>
</container>

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

Once you have the HTML code written you’ll likely have the CSS written too, albeit elsewhere in a stylesheet or <style> tag. Since emails work best with inline CSS you’ll want to handle that before wrapping up the design.

Thankfully Zurb has custom e-mail inlining in their Email Stack. But they also have an online web app if you prefer that.

So once the Inky code has been converted to HTML and the CSS has been inlined, you can kick up your feet and relax! Well, almost.

Even though Foundation is a heavily-tested framework it’s always a good idea to test your designs before shipping. Here are some apps to consider for email rendering tests:

But if everything looks good then you’ve got yourself an e-mail design ready to go out to the masses. And hopefully, you can see just how valuable Foundation for Emails can be to this whole process.

Now let’s delve into the features that make Foundation For Email a must-have tool for email design & development.

Inline Styles

For compatibility issues, all emails must use inline CSS styles for crisp rendering. It seems neanderthal but it’s truly the best way to ensure the largest number of users can experience your newsletter as intended.

Luckily Zurb has its own inliner webapp hosted for free online. You just copy/paste the HTML and CSS content into their tool and all your e-mail selectors will be applied directly to the elements.

If you’re looking for alternatives there’s also this inliner by Campaign Monitor and this one by PutsMail.

It’s important to understand how to edit templates with inline CSS in mind. Tables and inline CSS are antediluvian technologies, but email hasn’t kept up with the times(or should I say “e-mail clients”).

There’s not much to talk about in regards to concepts for inlining. But there is a solid foundation and reasoning for this behavior. Check out this CSS-Tricks post to learn more about the history of CSS inlining for emails.

Foundation’s benefit to you as a developer is how much time can be saved during your routine. If you can automate inlining CSS with Foundation then you’ll save hours of time in the long run.

Responsive Layouts

Foundation for Emails can handle custom responsive email layouts with media queries. Although these are not fully supported in all email clients, your grid layouts will still use flexible content containers for easier rendering across all screen sizes.

Classic email layouts were always fluid with a certain maximum width set to a fixed pixel size(often 550px-650px).

Now that so many people check email on smartphones you really need to consider the smallest possible screen sizes. Not all email systems recognize media queries but most modern rendering engines are catching up.

This is where responsive design with custom classes will make all the difference.

For example, Foundation uses classes like .medium-4 and .small-6 to define the number of columns to use at a certain device width. These do rely on media queries but they function just as well on mobile and desktop email clients.

If you really want to delve into responsive email design with Foundation you should check out the Zurb Master Class specific to responsive email.

Pre-Built Templates

When first getting started it’s worth using a template. Foundation For Emails has you covered with a number of free starter templates.

There are currently 10+ unique email templates with varying features like a hero image, sidebar, or blog post listing. You can download all the templates together from Zurb’s template page or pull them one by one from the website.

While you do get free layouts and HTML for styling those layouts, you also get custom GUI elements built on top of Zurb’s CSS. These templates include custom buttons, thumbnails and typography for common elements like headers and page dividers.

I don’t think it’s a good idea to always rely on these templates. But if you’re just getting into Foundation for Emails these templates are the best introductory material you could ask for.

Dynamic Design: The Zurb Email Stack

Finally, we come to the king of email design tools: the Zurb Email Stack.

If you’re a serious web developer then you already know about the power of preprocessors like Sass and task runners like Gulp. These tools run through the command line and Zurb’s Email Stack follows in a very similar fashion.

This is basically your all-in-one email design workflow powered by the top development tools like NPM and Sass. You have access to an auto-inliner that can run through the command line with other tools.

There’s also Zurb’s templating language Inky which offers custom tags for building tables without all the clutter.

The Email Stack will parse code with Inky-style HTML and compile it into tables at runtime, along with automatically inlining CSS on the fly.

Inky grids use three tags: <container>, <row>, and <column>, all of which render into compliant HTML tables with classes using Foundation columns.

The Inky templating language also works with Panini which lets you define flat templates for a header and footer. These templates can be imported into all of your email designs without copying & pasting code. If you’re someone who builds a lot of emails this will save hours of time.

Handlebars can also be used in conjunction with Inky code. This also allows you to include partials of reusable code for many different email templates.

It should go without saying that you can also convert all Sass code right into CSS without much effort. Zurb’s Email Stack runs through Gulp which is powered by NodeJS and NPM, so you have access to other tools that run on the same foundation.

Also remember to check the compatibility chart and do some live testing before sending your beautiful emails out into the world.

If you’re serious about e-mail design & development then Zurb’s Email Stack is a must-have. These tools are indispensable and once you understand how they work together you’ll never go back to manual development.

Wrapping Up

Email is one of the best marketing techniques for maintaining a consistent audience. It takes time and practice to learn how email layouts work, but it’s worth the effort if you understand the value of email marketing and a well-designed newsletter.

I hope this guide offers a deep dive into the pool of Zurb’s email framework. The best way to learn is to test it out for yourself by crafting new projects. Over time Foundation will grow into your workflow and you won’t want to design an e-mail without it.

To read more about e-mail design check out these related posts: