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.


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

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

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…