Hey there. Today I'll be discussing creating an email campaign using Zurb Foundation. A project landing on my desk recently to create an email campaign with HTML. This meant I'd be using the most beloved feature of HTML, HTML tables. Cue in moans of agony, lol. This project, due to the client's preference, would not be using known email automation platforms like MailChimp. Another unknown factor was what system or program the campaign would be sent through. Email marketing is already clunky but not knowing how it'll be delivered would only add to my troubles. Looking for a framework to build with, I noticed there is a lot of drag and drop email builders, though interesting not exactly what I wanted. Eventually, I landed on Foundation by Zurb. Foundation calls its product “the most advanced responsive front-end framework in the world.”
At first glance, Foundation looked like many other frameworks. It utilizes CSS classes like grids, columns, and has built-in styles. If you're familiar with frameworks like Bootstrap, then the learning curve is almost non-existent. Foundation's documentation is very well written and easy to navigate. Development options include using CSS or Sass. Between the two, Sass is more advantageous for using variables, making development easier.
Foundation has custom HTML tags for writing email components called Inky. The project I worked on had a short turnover time and needed to be completed the same day. I didn’t have an opportunity to utilize Inky but it's quite an interesting feature. The HTML-based templating language Inky "converts simple HTML into complex, responsive email-ready HTML.[1]" Inky takes in simple HTML and spits out made for email HTML in tables with the classes intact.
For example this through Inky:
<container>
</container>
Becomes this:
<table align="center" class="container">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
It's clear Zurb understands the struggles of email marketing since their website includes information on how different email clients treat email and CSS. They also list what email clients Foundation is compatible with. After building, sites like Litmus are useful for testing and displaying how the email will render on different email clients.
Building with Zurb Foundation
Getting started
Begin by downloading the files provided by Foundation. There are two ways to get started, selecting to build with their CSS version or Sass version. I selected CSS since it is "the fastest way to get started." Sass is useful in streamlining your workflow. Inside the "foundation-email" folder are two folders "css" and "templates" in addition to an index.html file.
Inside of templates is ready to use email layouts. They are pretty nice samples of common layouts for newsletters, marketing, adding a sidebar or featuring a hero image. The CSS folder has two files "foundation.css" and "foundation-emails.css" for the email's CSS. The index.html file is used for coding a layout from scratch. It's pretty much a boilerplate for HTML with the !DOCTYPE declaration, head element, body element and an outline for creating a table.
HTML emails are built on tables. There's no way around it if you want your email to work on multiple email clients. Foundation includes the use of grids, typography styles, buttons, callouts, and a few more features. Foundation states its components have been tested "in every major email client, including the problematic ones like Outlook". That's wonderful especially the Outlook part. Outlook is the troubled child of email clients always causing problems and failing to fall in line even with inline, lol. Even I get frustrated with the troubles Outlook brings to email development.
Foundation's grid includes a container, row, and columns. The container wraps the body of the email, the rows group the columns together, and the columns divide the layout into sections. If you ever run into any problems, look to the documentation for help. The team behind is Foundation are very helpful and provide a master class on Foundation for Emails in the form of an on-demand video series.
Additional styles
Foundation is great for providing styles you may need, such as typography, buttons, and callouts. There were a few additional styles I created, so I placed them in the head tag. And the few changes I made I added to the inside of tags with inline styles. I tested how the page would appear with Mozilla Firefox, Google Chrome, and Safari.
Web inliner
Foundation has a web inliner I absolutely adore. This is the last step in development and will become the production version of the email. Quick background information, email clients tend to strip CSS away from the HTML head and body. Behavior like this is why inline styles are a common practice in building HTML emails. Copying and paste the entire index.html into the HTML textarea field and foundation-emails.css in the CSS textarea field. Press the "Inline!" button and out comes the inlined email. With the web inliner, the styles I wrote in the head, were automated into the body’s inline style.
Testing
I tested the production version of the email with Litmus. It's a site that displays images of how different email clients would render email. This allowed me to see the errors that may occur. It also brought to my attention the flaws each email client contains. While testing, most of the issues came from Outlook. No surprise. The problem area was my footer, so I had some fixes to make. With the help of Litmus, I made the necessary corrections and the email eventually rendered close to exact on every email client
Result
I can't publish the client's work so instead, I created a one-column email campaign with Foundation. I placed it in CodePen for viewing. The results are below.
