ZURB Ink: Responsive HTML Email Framework

Ink just launched today. This open source project is by ZURB, creators of the popular front-end web development framework, Foundation.

Ink helps solve a major pain point: Creating a simple HTML email that works halfway decently in the countless of desktop and Web email apps out there is already a big — and often a very frustrating — undertaking. Making HTML emails responsive for mobile devices exponentially complicates the task a great deal.

But with more than 40% of emails being viewed in mobile devices, sending out responsive HTML emails is, on the other hand, crucial.

How will Ink solve your responsive HTML email misery? "There are lots of great individual solutions for Responsive emails, Ink brings them all together into a single tested framework," creator of Ink (and a partner at ZURB) Matt Kelly says.

Ink’s Notable Features

Here’s a quick rundown of interesting things I found in Ink.

Five responsive email boilerplate templates out of the box, which will definitely be useful to new users of the framework (the screenshot below is the Newsletter template).

It’s open source, and you can find the official repo on GitHub.

The docs is easy to read and will help you get up and running in no time.

The framework’s feature set includes things like:

  • Visibility CSS classes so you can conditionally hide and show HTML elements for specific user agents
  • Grid system – which will help make designing email layouts a more streamlined process
  • Buttons that gracefully degrade in case the email recipient has images turned off by default

For inline CSS styles, you can use the Ink Inliner tool, which is especially great for Gmail.

Ink supports these email clients:

  • Apple Mail (5 and 6)
  • Microsoft Outlook (2000, 2002, 2003, 2007, 2010, 2011, 2013)
  • Mozilla Thunderbird (3, latest)
  • Android Native (2.3, 4)
  • iOS Native (6, 7)
  • AOL Mail
  • Gmail
  • Yahoo! Mail
  • Outlook.com

Visit ZURB Ink’s official website

Full disclosure: Ink launched today (just a few minutes before I published this post) but I was given password-protected access to their site a few hours before launch by one of ZURB’s founders so that I could review the project.

  • They’ve done it again! I’ve been using Foundation in e-mails already but this is nifty!

  • If you want to inline on the fly from Ruby you can use https://github.com/craigmcnamara/sexxy-emails

  • Please support this project by watching/starring on GitHub: https://github.com/zurb/ink

    And it would be awesome if you contributed source!

  • Nice. We’re be looking at this for use with Flashissue – especially the Gmail angle so we can create templates for Gmail users to use.

  • Matthias Willerich

    Outlook 2000 isn’t notoriously problematic. Lotus Notes is 🙂

  • Cal

    this is interesting but there’s already an excellent start-up providing this service: sendicate.net

  • cybercoder4life

    This does not really support alot of email clients (18 email clients) there are about 50 email clients out there if your thinking globally, I have a framework that does this better with less code

  • Jens

    cybercoder4life: so how about sharing that framework then? 🙂

  • Eddie

    Is there a specific reason this boilerplate is using tables? Doesn’t seem like the best layout option.

  • For HTML emails with a fluid (responsive) layout, table layouts are (sadly) the best option for proper rendering in email clients.
    See these for reference:

  • Finally one effective framework for creating HTML emails. 🙂

  • Gurprit

    I have created an HTML email using Zurb Ink which is responsive in Chrome browser but not in Mozilla browser. Please help me out.

  • Gareth

    Have created a nice looking email but it does not render correctly on Android devices. Nice framework but disappointing compatibility.

  • Steve Pole

    Hi guys, love the framework. Is the inliner open source or just the templates/css?

  • Lion

    Please let us know what email client do you use when none of the email platforms like MailChimp or Campaign Monitor is used

  • xton

    I wonder what underlying library they are using for the php inliner, as I am searching for one so that my I can automatically inline the css on the fly before sending the email.