Introducing Ink

UPDATE 3/23/2016: Ink is now Foundation for Emails!

Download Foundation for Emails

We've been taking about the importance of responsive emails for awhile now. With over 40% of emails opened on a mobile device, we knew ensuring our emails looked good on any device was imperative. Iterating and improving our emails is something we've been working on since last year. And we've been teasing that a new solution was coming. Well, today's the day! Ink, our brand-new responsive framework, is finally here.

What We Learned Building a Responsive Email Framework

Ink's development started when we released our responsive email templates last year. We were spurred by our growing mobile readership. Originally, we didn't support Outlook in our templates, but we realized we were cutting off the second largest email client market share. Let's delve deeper into the lessons we learned whilst building Ink.

1. Flexibility is Key

Ink is a framework, not a template. Templates are the most popular approach to responsive emails, but they're not very flexible and have many limitations. We didn't want those constraints. We needed flexibility and a framework provides that. Ink uses a 12-column grid for maximum divisibility ' you can divide the grid into one, two, three or four columns. Originally we planned to use a four-column grid, but found it hampered our flexibility. To give folks further flexibility, we also included UI elements ' buttons and panels ' that designers use frequently. But they're completely customizable to suit any design needs.

But Ink is more than a framework. It's a process that creates conventions for organizations and developers to adopt that creates consistency in the way emails are developed.

2. Outlook Still Matters

Outlook still has significant market share, and people kept asking when we we would to support the second-most email client. Technically, Outlook is the most limiting email client ' it doesn't support max-width: 100%, for instance. Focusing on the client's constraints forced us to consider the hard questions early in the design process. It had us designing Outlook First before enhancing the mobile experience by layering in media queries. And Ink allows you to reasonably support Outlook with fixed-width, as opposed to fluid, desktop layouts and media queries to target small screens. (Of course, you'd want to test it in a service like Litmus to make sure it looks swank on various clients and devices before sending it out.)

3. Media Queries are the Future

We struggled with ways to best support Gmail mobile. We ended up offering a non-media query solution, i.e. block grid, though the media query approach is still preferred. This caused a lot of headaches, so we built our own inliner to let you place CSS inline for better Gmail compatibility. As we move forward as a community, things will move toward better media query support.

Email Anywhere. On Any Device. On Any Client, Even Outlook.

Ink allows you to create emails that work across devices and email clients, even Outlook. Our responsive framework has a 12-column grid that blends flexibility and stability so you readers can view your application updates and newsletter from wherever they may be. There's five easy steps to get started with Ink:

1. Test in Outlook ' Outlook is your best, worst enemy when it comes to responsive emails. Make sure it looks great there before moving on.
2. Add your responsive styles ' Include any responsive styles you want to include.
3. Bring your styles inline ' Include everything looks great in Outlook, bring your style inline using Inky's inliner.
4. Test your email ' Don't ship just yet. Use a testing tool like Litmus to test on a number of devices.
5. Send it out ' Your email is ready. Sally forth with it into the world.

So what's in Ink? Let's delve a little deeper into it's features:

• Ink uses a 12-column, media-query-based grid with a 580px wrapper. On mobile devices, under 580px, columns become full width and stack vertically.
• There are UI elements like buttons and panels for rapid development.

We also provide templates to get you started, such as:

• 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

Even though we include templates to get started, you can build your own using Ink as the framework. The best part? Ink works across all the major email clients:

Send Out Responsive Emails With Ink!

Ink is open source, and will serve as a collection of best practices as the community develops it. Our responsive email framework gives your templates a very robust base that's tested across the major platforms/clients.

Check out Ink