Responsive email template framework from Zurb
There’s no escaping it: building reliable responsive email templates is hard. While Smartmesssages provides a great array of tools to help you build your templates, we can’t claim to have everything! Email client applications like Apple Mail, Outlook and Gmail vary wildly in how they present HTML messages, and it becomes even harder when you take different devices into account. Zurb’s Foundation for Emails 2.0 changes all that.
Design agency Zurb has a long history of maintaining the Foundation framework, a competitor to the popular Bootstrap framework (which this site uses). These are both frameworks used for building responsive (a term used to describe HTML layouts that adapt to multiple screen sizes automatically) web sites, but what if you could apply the same kind of approach to email templates? That’s exactly what Zurb did when they introduced Ink in 2013. Now in 2016, Ink has been overhauled and renamed “Foundation for Emails 2.0“, which I’ll call “FFE2” to retain typing sanity…
FFE2 streamlines Ink’s original approach, and uses a combined div and table-based layout to build templates that adapt or degrade gracefully on an enormous array of screen sizes, devices and services. It can simplify layout creation enormously, and the base styles have been tested extensively on many clients and devices, making for far more reliable rendering and consistent markup.
FFE2 provides a toolkit of HTML snippets and CSS rules to help you build responsive layouts quickly and easily. Smartmessages provides built-in hosting of FFE2’s base style sheet, so your templates remain easy to edit, and we’ve adapted FFE2’s example templates with Smartmessages tags (such as for greetings, unsubscribe, privacy links and contact details), which you can use as-is or as the basis for your own layouts. Smartmessages’ integrated CSS inliner means you don’t have to use an external service to inline your styles, making editing and testing a much more straightforward process.
FFE2 also adds a new feature called “Inky”, a high-level HTML meta-language that simplifies construction of HTML layouts – we don’t have built-in support for that, but you can simply use the Inky (and SASS) build tools supplied with FFE2 and paste the results into Smartmessages.
Using FFE2 in Smartmessages
When you’re editing a mailshot, just pick one of the “? ZF2”-prefixed templates from the template menu or gallery (don’t you just love that little octopus emoji?!), and it will be inserted directly into the WYSIWYG editor, ready for you to customise.
If you’re building your own, you can pull in the FFE2 base styles with a link tag in your head tag:
<link rel="stylesheet" href="/styles/zurbfoundation-2.1.css"/>
and no, you don’t need to worry about that being a relative URL – it will be imported and inlined for you when you send!
Like all good software, FFE2 provides documentation to help you get started.
FFE2 is an open-source project (like PHPMailer that we maintain), so you can (just as we have) submit bug reports, make corrections and provide suggestions and contributions via the FFE2 GitHub project.
We’d like to say a big thank you to Zurb for developing and supporting the FFE2 project and we hope that using it will help you build better email templates to use with Smartmessages!