Design Responsive HTML Emails With Ink, New From ZURB

Written by Epic Monkeez on | Tiny Url

ZURB the creators of Foundation, one of the most advanced and responsive, front end frameworks, have finally released their newest product, a framework for designing responsive emails: Ink
Ink joins the Foundation Yeti as another of ZURB’s mythical creatures. She’s a giant sea squid that uses her tentacles to help you manage all the different email clients you need to deal with.

“Ink is taking what we learned about frameworks from Foundation, and applying it to responsive emails” – Jonathan Smiley, Partner at ZURB, Creator of ZURB Foundation

Ink is open source and it is the aim of the creators at ZURB, that it will serve as a collection of best practices as the community develops it.

Design Responsive HTML Emails With Ink

Many marketers use emails to reach people and report it as being more effective than using social media. With over 40% of emails being opened on mobile devices, and so many popular email clients that all have varying technical capabilities, it makes implementing emails across different clients very difficult. Most emails you get look terrible and are hard to read on mobile devices. This problem is only increasing and a recent survey (pdf) found almost 70% of people will delete an email immediately if it does not display on their device correctly.

The creators at ZURB wanted to find a solution to this, so they created Ink. A framework that let’s you quickly build responsive HTML emails that work everywhere. Even in Outlook

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

Ink is a responsive email framework that gives your templates a robust base and because it has a flexible platform, it enables you build other tools on top of it.

Inks five step process is an Outlook first approach, enabling you to build for Outlook, and then progressively enhance your email for more capable clients. As a framework you have more flexibility to create custom layouts, rather than just making minor changes to a template. Ink enables you to add your own responsive styles, inline and test them, before sending them however you choose.

Email clients supported with Ink:

  • 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

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

So What Do You Get With Ink?

Comprehensive Documentation For All It’s Components
  • A twelve column grid with sub-grid, to easily create different layouts that stack on mobile devices.
  • Visibility classes, to show and hide content on different devices.
  • Buttons without images, that can be easily implemented and updated to improve click through.
  • Panels to easily highlight content.
  • A block grid that can implement a simple two column layout and that also works on Gmail.

<html>
    
  ...
 
     <table class="row">
       <tr>
         <td class="wrapper" style="background:#ddd">

           <table class="eight columns">
             <tr>
               <td>

                 Eight Columns

               </td>
               <td class="expander">
             </tr>
           </table>

         </td>
         <td class="wrapper last">

           <table class="four columns">
             <tr>
               <td>

                 Four Columns

               </td>
               <td class="expander">
             </tr>
           </table>

         </td>
       </tr>
     </table>

   ...
       
</html>

A Hosted CSS Inliner

Using Inky’s inliner, enables you to test your emails with ink, ensuring they work properly on Gmail and the other compatible clients listed in the docs.

Ink CSS Inline

5 Sample Templates

Giving you a starting point and enabling you to demonstrate the framework.

  • Basic — perfect for sending out basic but good looking emails
  • Hero — allows you to put a snazzy hero image in your email
  • Sidebar — includes a sidebar area for a list of links
  • Sidebar Hero — this combines the sidebar and hero templates
  • Newsletter — create newsletters with ease

Ink Email Templates

Ink is a convention for creating responsive emails. Allowing you to use a framework, it creates consistency with how emails are implemented, enabling large groups to standardise on Ink so everyone can easily understand emails coded by other people.

So what are you waiting for,Try it out today!

Have you tried to design an email lately? How did you find the process?

Tags: