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 traditionalCSS
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
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-cliIf 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 emailsThe 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.cd 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 startThis 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.
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 thesrc
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 basicHTML
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 manyCSS
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.
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 theHTML
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="https://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 theassets/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 i[email protected] 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 buildWhen 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
Andy Leverenz
Andy Leverenz is a co-founder and technical director at Couple of Creatives, a small branding agency from St. Louis, MO. He spends his days designing and developing websites and apps. When he’s not working, he plays guitar for fun in two bands. Check out his side project, Web-Crunch, an online publication where he writes and delivers news for designers, developers and entrepreneurs across the globe.
Read Next
24 Best Creative Portfolio Websites in 2023
For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…
By Simon Sterne
15 Best New Fonts, September 2023
Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…
By Ben Moss
Weekly Design News #1
Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…
By Louise North
The 20 Most Controversial Logos of All Time (Ranked)
When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…
By Robert Reeve
LimeWire AI Studio Generative Art App
If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.
By WDD Staff
20 Best New Websites, September 2023
Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…
The Dangers of Deceptive Design Patterns (And How to Avoid Them)
As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…
By Louise North
10 Best Ecommerce WordPress Themes in 2023 [September update]
You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…
By WDD Staff
5 Marketing Tools Every Designer Needs
Yes, designers do need marketing tools. From freelance graphic designers who need to land more work to designers who…
Exciting New Tools For Designers, September 2023
At the end of another summer, we are all getting ready to knuckle down for some serious work in the fall. But we want…
Elon Musk calls LinkedIn ‘Cringe’—Announces Competitor
Elon Musk recently announced his intentions to create a direct competitor to LinkedIn. Musk’s grand plan is to make his…
Everything You Need to Know to Embrace the Y2K Design Trend
The turn of the millennium was a major cultural shift, and the Y2K aesthetic emerged as a visualization of what the…
By Simon Sterne