Navigation

Design responsive emails with brand new Ink

By Penina Finger | Resources | Nov 7, 2013

App design powerhouse, ZURB today launched Ink, a powerful new resource for designers to easily produce responsive HTML emails that look and work great across more mobile platforms than ever, including Outlook.

“If you’re not considering mobile devices for your emails,” says Jonathan Smiley, Partner at ZURB and Creator of ZURB Foundation, “you’re not just crazy, you’re already irrelevant.”

Email marketing is considered one of the most effective outreach channels on the web — in many cases, it’s still more effective than social media. However, over 40% of emails are now opened on a mobile device, and this is an upward trend. If your email doesn’t display correctly, a recent survey shows that nearly 70% of your recipients will just delete it.

Even after you nail Outlook, email’s biggest bane, you still need to factor for scores of other popular email clients. The folks at ZURB recognized that this problem has continued to have no truly satisfactory solution, and created Ink. According to ZURB, “Ink is a framework that let’s you quickly build responsive HTML emails that work everywhere. Even Outlook.”

As the maker of responsive front-end framework, Foundation, ZURB is now bringing its advanced and influential expertise to email.

Ink’s “Outlook first” approach lets you to build for Outlook, and then progressively enhance your email for more capable clients. Today’s release arrives with comprehensive documentation for all its components, including a responsive twelve-column grid (with sub-grid), built using media queries to identify devices and stack layouts as needed, as well as visibility classes to show and hide content depending on the device.

zurb-ink-code-snippet

The documentation also covers image-free buttons that can be easily implemented and updated to improve click-through and a block grid that can implement a simple Gmail-friendly two column layout.

The Ink launch also includes:

Matt Kelly, Partner at ZURB and Creator of ZURB Ink adds, “There are lots of great individual solutions for responsive emails. Ink brings them all together into a single tested framework.”

To that end, Ink is a flexible platform over which you can build more tools as needed. It also aims to give larger teams a set of conventions, making collaboration and consistency much easier to achieve.

Here’s the list of all the email clients supported with this launch:

  • 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

 

Have you designed responsive email, what problems did you encounter? Are you excited about Ink? Let us know in the comments.

Share this post
Comments (no login required)
  • Jogi Silalahi

    Coming soon. But the idea sounds good.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Actually, it’s available now.

  • Matt Kelly

    We’re super excited to launch Ink. We’re looking forward to seeing better looking emails on our phones.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Perhaps try emptying your cache, I believe it was live at 11am EST.

  • Björn D

    Being already a advanced user of foundation, I’m looking forward to use Ink, thanks.

    @zurb: in the docs the last compatibility part (retina) is still showing the panel table ;-)

  • disqus_BJsFqYUX7b

    I’ve tried to use handmade responsive email but my current sending company delete all headers

  • Victor

    A recommendation: You should add a “_blank” to your links so the user can read more news instead of going back several times to do that. It’s kind of annoying.