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

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…