Advertisement
  1. Web Design
  2. Email Design
Webdesign

Your First Responsive Email Build With Foundation for Emails

by
Difficulty:BeginnerLength:ShortLanguages:

In this tutorial we’re going to take a first look at ZURB’s Foundation for Emails framework. We’ll get it setup, explain what comes in the package, then build ourselves a simple responsive email.

We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.

Frameworks

In the last half-year I got acquainted with a couple of frameworks and boilerplates for creating HTML emails. Before these tools, the actual development was always hard to test and fix, not to mention making emails responsive.

Coding HTML emails is a very different animal compared to creating a normal web page. It’s like traveling back in time to 1999. We need to use table-based layouts, inline styles and accommodate clients like desktop apps (Thunderbird, Outlook) and webmails (Gmail, Yahoo). 

To solve this puzzle and get reliable results, we have two options:

For the purposes of this tutorial, we’re obviously going to go with the second option.

What’s in the Box?

The ZURB email stack provides an all in one package solution for creating emails.

It consists of:

  • Gulp: a build system for automating the workflow
  • Inky HTML: for converting simple code to tables
  • Sass: the popular CSS preprocessor
  • Inliner: for inlining the styles
  • BrowserSync: a test server for reloading
  • Image Compression: for auto-compressing images

Foundation for Emails will watch as you code, compiling, inlining, then minifying the result ready for production. It’s been widely tested in many desktop and mobile apps; for the full list of what’s supported you can check the compatibility section. You may also want to refer to the official guide when starting out with the framework.

Setting up the Project

For this entire process, I use Windows 10, the 64 bit version. If you use a different system you’ll still be able to follow along.

The stack works with Node.js and its package manager npm. To install Foundation for Emails we open up our terminal, then we use the command:

Then we change directory to a project folder (wherever you want to run this project) using cd [project folder path]. In the project directory the next command should be:

You’ll be asked “What's the project called? (no spaces)”, at which point you enter a project name, hit enter, then sit back for a moment while the project dependencies are installed.

Start Your Engines

Now we’re setup with all our project files, our Node modules are installed, and our Bower components are installed. To start the framework and server, go to the project folder and use the command:

The default web address (usually http://localhost:3000/) will open directly in your browser as soon as you do so. You’ll see a brand new email template, ready to go:

Src

In your project folder you’ll find (amongst other things) a src folder. In this folder you’ll find:

  • assets, styles and images
  • layouts, wrapper layouts
  • pages, base HTML codes
  • partials, reusable HTML parts

The index page can be found here: src/pages/index.html

Note: if you’re unfamiliar with Node.js, you may want to check out our beginners’ guide just to reinforce what we’re doing:

Grids

Foundation uses a twelve column grid. It’s worth noting that the horizontal space in an email is usually narrow, especially as so much email has moved to mobile, so it’s advisable to use one or two columns only. For more best practices, check out the following guide:

Foundation for Emails makes use of Inky, its own new Templating Language which aims to remove the complex markup which tables inevitably cause. These are the Inky tags to help us markup the grids:

  • <container>: the wrapper element
  • <row>: the wrapper for rows
  • <columns>: the column element for actual content

We can also specify the size of the grid with the attributes small and large.

This is a one column section.

That simple markup, when compiled, gives us the following:

This separate example is a two column row (each column collapses to 12 wide at small breakpoints, staying 6 wide for large).

In essence, we’ll use one <container> element, with a series of <row> and <column> elements to build our structure.

Building Our Email

Now we understand the basic use of Inky, let’s change the email subject. In pages/index.html we can change the following details at the head of the document–you may be familiar with this form of “Front Matter” if you’ve ever used YAML:

Logo Area

For inserting a logo image we use standard HTML <img> markup within a <column>. The path to the logo image is relative to the document, in the assets folder. I also added an empty line above the picture by slotting in another <row> with an empty <column>:

Intro Text

I then added another couple of rows within the <container>, with some intro text, a welcome and grand prize content.

More Images

I added another image about the tournament city, again relative to the document.

Notice the <img> tag is wrapped in a <center> tag. This triggers one of Inky’s alignment classes, centering our image without us having to worry about it.

Details

The details section is a little more involved, providing more information about the event. For this section I used two columns per row, each explaining one specific part. Again, each half collapses into one column on mobile screens.

Button

Finally I added a Register button for signing up. I used the provided <button> component, centering it with the <center> tag.

Compiled Version

As you build and change things, your project will be continually refreshed in the browser. The compiled code can be found in the project’s dist directory, the main files being index.html and css/app.css.

Building the Finished Email

When we’re happy with what we have, we can use this command to inline the code with styles and compress the whole thing:

After the build process, what you’ll then find in the dist folder is a minified, ready version, suitable for production but certainly not suited for any editing!

Conclusion

You’ve completed your first session, making a responsive HTML email with the Foundation for Emails framework! We made a simple layout, with one and two column rows, images, rich text and a Register button at the end.

For inspiration, take a look at the Email Templates category on Envato Market. Perhaps design, build, then submit your own!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.