Design responsive emails with brand new Ink

Wdd Logo.
November 07, 2013
Design responsive emails with brand new Ink.

thumbnailApp 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.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…