How to Build a Custom Email with Foundation for Emails

Building email templates is down right hard. Building responsive emails is even harder. Luckily, the kind folks over at Zurb have developed a fantastic framework that makes the process of building responsive emails easier than it has ever been before. Foundation for Emails (formerly Ink) is a framework tailor fit for a modern designer/​developer looking to use the tools and technologies of today to build responsive email templates for tomorrow.

The Numbers Don’t Lie

According to Zurb, 54% of emails are opened on a mobile device and this number is likely to rise. With that figure in place, the need for a responsive email template is a must. Zurb also states that 75% of Gmail users access their account from their mobile device. No matter the type of email sent, Foundation for Emails has you covered. In fact, once you launch their handy project builder you are greeted with sample templates to either reference or customize to your heart’s content.

Getting Started

Throughout this article, I will be showing you how to get up and running with Foundation for Emails using a custom template I designed for my own small branding agency. As with any framework, it’s imperative for you to reference the documentation. I won’t be going over every detail as Zurb already has but this guide will be enough for you to hit the ground running.

Source Code

You can find the final source code to this project on GitHub.

Installation

To begin you can opt in to use traditional CSS or Sass. I’ll be making use of Sass. There are many reasons I recommend going this route as opposed to traditional CSS. These reasons include: 

• More control over the framework’s visual styles
• A full build process including Sass compilation and image compression
• A custom HTML language known as inky which means you don’t have to write table based layouts by hand.
• A built-in inliner for distributing your CSS as inline CSS
• Live reloading
• Handlebars templating

 — The Sass version requires Node.js to run. Be sure to install it before going forward.

Install the Foundation CLI and Create a New Project

The installation process makes use of the Foundation CLI. To make use of it open your command line program of choice and type the following:

Bash $ npm install --global foundation-cli

If you run into any permission errors, try prefixing the same command with sudo. You’ll be prompted to enter your system password. With the Foundation CLI installed, you can now create a blank Foundation for Emails project. Be sure to move to (cdinto) the folder you want to install the project in, and then run the following command:

Bash $ foundation new --framework emails

The CLI should ask you for a project name (I called mine newsletter). This name is what the folder the entire project will be labeled as. After that is set, a number of dependencies will install. (This could take a while to download.) Once the download completes you should see the following:

Bash You’re all set!
✓ New project folder created.
✓ Node modules installed.
✓ Bower components installed.
Now run foundation watch while inside the <projectname> folder.

into your project folder by typing cd newsletter. Your project name may vary compared to mine but if you are following along you should be set to go.

Running the Server and Compiling Assets

From within the terminal run the command:

bash $ npm start

This will fire off the build process I mentioned before. The build process will parse HTML, compile Sass, compress images, and launch a server. Your default browser should pop open a new tab point your index.html file from the address of localhost:3000. From this page, you can visit the sample templates Foundation for Emails bundled with the install.

Assessing the design

With Foundation for Emails installed and our project running on the server provided by the framework, we are ready to dive a bit deeper into handling the design shown below.  For the most part, the design is minimal with placeholder content for a newsletter style email. Going forward we will modify elements within the template to make any changes. It’s a bit more hands on than a WYSIWYG email builder like the default MailChimp templates for instance, but for the sake of custom branding, it’s well worth the time. I think most users would agree. You could certainly extend this to utilize the editor within Mailchimp but that’s a topic for another time.

Starting Fresh

Assuming you are using the Sass version, Foundation for Emails comes bundled with Inky HTML which is their own creation. This HTML is responsible for making writing tables and advanced table-layouts a breeze. The documentation for Foundation fro Emails is the best place to learn all there is to know about the custom Inky HTML you can use in your own projects. Be sure to refer to it often. We will be working inside the src folder within our project folder. These files are being watched via gulp.js and some included plugins. When changes are made to our template code and/​or styles all the files in the dist folder are updated accordingly. I won’t go deep into how all of this works but I remember when I was new to it all it seemed like magic!

Index

The index page you see is found inside src/layouts/index-layout.html. Foundation for emails makes use of Handlebars which allows you do templating inside basic HTML pages. For example, you can create a partial HTML file that gets included into another file dynamically. Note the {{>body}} tag. All the content essentially gets imported here, in the end, thanks to the HTML parsing available inside the framework.

Pages

Every page you see within src/​pages/​is what initially gets displayed when you run $ npm start for the first time. Each page is a sample template provided by Zurb. Copy the contents of newsletter.html and create a new file called branded-newsletter.html. Paste the contents inside. Within this file, we will build the branded template I shared before. Inside the file, you should see a lot of foreign looking HTML tags. These are part of Inky HTML. Essentially by using them, you can get away with never having to physically code table layouts. (You can’t use divs inside of emails like you would web pages; the same is true for many CSS properties.) Below is a brief overview of tags we will make the most use of: 

• <container> - A wrapping element which has a set width.
• <row> - necessary for wrapping columns of content similar to a floated grid on websites.
• <column> - where most of your content will live. These can be customized using a 12 column layout. They behave like a floated or flexed div but involve tables.
• <menu> - create a menu inside an HTML email using tables.
• <spacer> - vertical spacing for email templates. Many mail clients don’t respect margin or padding via CSS. This is a great solution for it. Set any size by adding the attribute like this so: <spacer size=“16”></spacer>.
• <button> - create a button with tables.

On top of these tags are additional CSS classes you can add, customize, and extend via Sass.

Scaffolding the Newsletter Template

For the sake of brevity, I am summarizing the coding process and showing you all of the HTML before I style it. This allows me to build a skeleton of sorts for the template and worry about styles later. Below is the HTML I ended up with for the design. This template lives with the pages directory and gets included in the layouts/index-layout.html file where you see the {{> body}} tag.

html

<container> <spacer size="16"></spacer> <p class="text-center"> <small>Email not displaying correctly? <a href="#">Click here</a></small> </p> <spacer size="36"></spacer> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="24"></spacer> <row class="main-nav"> <columns> <menu class="small-vertical"> <item href="https://coupleofcreatives.com/work">RECENT WORK</item> <item href="https://coupleofcreatives.com/blog">BLOG</item> <item href="http://bit.ly/2oOk3SW">YOUTUBE</item> <item href="https://coupleofcreatives.com/contact">WORK WITH US</item> </menu> </columns> </row> <spacer size="16"></spacer> <p class="issue-meta"> <span class="issue-number">ISSUE #100</span> <span class="issue-sep">•</span> <span class="issue-date">MARCH 29, 2017</span> <p> <spacer size="5"></spacer> <p class="intro"> Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. </p> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Recent case study</h2> <img src="https://coupleofcreatives.com/public/case-study-image.png" width="600" height="324" alt="Screen shot of a case study for Wildwood Family Dentistry from Couple of Creatives" /> <container class="case-study-description"> <columns class="content"> <h4>Wildwood Family Dentistry</h4> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <spacer size="12"></spacer> <button href="https://coupleofcreatives.com/work/wildwood-family-dentistry/" class="small-expanded">View Case Study</button> </columns> </container> <spacer size="48"></spacer> <container class="blog"> <h2>From the blog</h2> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">Donec id elit non mi porta gravida at eget metus.</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </container> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Watch our latest video</h2> <a href="#"> <img src="https://coupleofcreatives.com/public/video-image.png" width="600" height="337" alt="A still of a Couple of Creatives during a video shoot" /> </a> <spacer size="16"></spacer> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <button href="#" class="secondary small-expanded">Subscribe to our channel</button> <spacer size="32"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Follow us on instagram</h2> <a href="https://instagram.com/coupleofcreatives"> <img src="https://coupleofcreatives.com/public/instagram-image.png" alt="Instragram photos of Couple of Creatives" width="600" height="294" /> </a> <spacer size="36"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <container class="footer"> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="32"></spacer> <row class="footer-social-links"> <columns> <table class="social-menu"> <tr> <td> <table> <tr> <th class="menu-item"> <a href="https://facebook.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/facebook.png" alt="facebook" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://twitter.com/couplecreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/twitter.png" alt="twitter" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://instagram.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/instagram.png" alt="instagram" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.youtube.com/channel/UCwLgeZi57pzy-Q4LgvBBXRA"> <img class="text-center" src="https://coupleofcreatives.com/public/youtube.png" alt="youtube" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.linkedin.com/company-beta/10487750/"> <img class="text-center" src="https://coupleofcreatives.com/public/linkedin.png" alt="linkedin" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://plus.google.com/+Coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/googleplus.png" alt="google plus" width="21" height="21" /> </a> </th> </tr> </table> </td> </tr> </table> </columns> </row> </container> <spacer size="12"></spacer> <p class="text-center"><a class="footer-cta" href="https://coupleofcreatives.com/contact">Need marketing? Hire this creative duo</a></p> <spacer size="12"></spacer> <p class="text-center"><small>You received this email because you’re signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p> </container>

Inside the HTML you will see a lot of the custom tags mentioned before. The spacer element, for example, I utilize a lot to create vertical spacing. I do this simply because not all email clients honor margin and padding. To save the fuss the spacer element helps tremendously.

Adding the Styles

Since I’m using the Sass version of Foundation for Emails I’m able to create partials and import those into the master app.scss file which in return gets compiled to the dist folder as app.css. I’m making use of a font called Ideal Sans. Unfortunately, I can only use it on my specified domain which means you won’t be able to make use of it for the headings on your end. If you are following along the headings will have Arial as the fallback for the base font. Most of the customizations you can make to the styles bundled inside the framework are found in the assets/scss/_settings.scss. This file has a variety of variables ready to be customized to match your own branding. On top of customizing these settings, I created some partials of my own. I imported these files into the app.scss file.

Responsive Emails

Foundation for Emails has support for responsive emails out of the box. Using the bundled <container>, <row> and <columns> tags you can essentially do the same handy work as you would in the browser. Within columns you can specify specific classes to establish a 12 column grid. For example, If I wanted to have a two column grid I would write:

html <container> <row> <columns small="12" large="6"> Column 1 </columns> <columns small="12" large="6"> Column 2 </columns> </row> </container>

Based on the screensize of the user these columns will appear at 50% width on larger screens and 100% width on smaller screens. If you’re familiar with popular CSS frameworks like Bootstrap or Foundation this should be pretty easy to grasp.

Using Images in Emails

Images need to be loaded from a web server using absolute url paths and preferably from the same domain as the person’s email who is sending it. So if I were to send an email from info@​webdesignerdepot.​com to my subscribers the images would need to live under the same webdesignerdepot​.com domain name. Doing this eliminates the probability of your email being misdirected to a spam folder and also appears as more professional.

Alt Tags Are a Must

If you don’t normally use alt tags (I don’t know why you wouldn’t) you need to in emails. Many mail clients don’t load images by default and it’s up to the user. Alt tags can help describe the image before the user even sees it. This is both great for accessibility and a graceful fallback for those not interested in loading images in the emails they receive.

Building Production Files and Testing

Production based emails need to have their CSS inlined. Inlining is the process of defining the styles on the element itself rather than linking from an external stylesheet. Foundation for Emails has a handy build feature that does this for you. The final files get compiled and minified inside the dist folder. To build production files you’ll want to kill any servers already running by typing ctrl + c in your terminal program. From there type:

Bash $ npm run build

When the email opens in the browser you should see the same as you did before. But, If you look closely at the source of the page you will see a mess of code. This is the result of the build process and assuming everything looks good, is ready to use in the wild.

Testing

I can’t stress enough how important it is to test on as many email platforms as you can. Your design will likely look different on all of them but the goal is to create a solution that at least looks consistent and legible across most platforms. You can use a tool called Litmus for this test. There’s a free version of the tool that allows you to copy and paste your code and send an email to yourself or colleague. Be sure to do this step. Emails that get sent obviously can’t be edited after the fact.

Useful Links

• Source code for this project
• Test your emails before you send them
• Foundation for Emails
• Foundation for Emails — Documentation
• Mailchimp Email Design Guide