Email’s the original online communications tool, but it hasn’t aged as gracefully as it counterpart HTML in browsers. There’s so many different email clients and oddities in email rendering — not to mention the fact that email should be mobile first these days, with over 40% of messages opened on a mobile device — it’s terribly difficult to make a rich email message that looks great everywhere.
On the web, you could hand-code a responsive site, or you could just use a framework like Bootstrap or Foundation as the base for your site so you can focus on your design and forget about the complexities of making it work great everywhere. And now, you can do the same thing for HTML emails with ZURB’s new Ink responsive email framework.
Ink is for email what Bootstrap and other web dev frameworks are for your site. You can take its base code, add in your own branding and design, and in minutes have a full-featured responsive HTML email template that’ll work great in any app your team users. No more need to despair that MailChimp’s email templates are looking tired — you can now code an alternate template that’ll look great everywhere without having to learn the nuances of Outlook’s email rendering.
It’s surprising how backwards HTML and CSS rendering is in most email clients — as is obvious in this detailed chart from Campaign Monitor, Outlook’s standard support is minimal at best and Apple’s email apps are some of the only ones with nearly full CSS support. It’s a mess, enough that most of us just resort to plain-text emails. It’s easier.
Table-based layouts, still state-of-the-art in email
ZURB’s already made some of the most popular code-compliant email templates, and now they’ve taken that experience and turned it into a framework that supports Outlook along with everything else. It’s relatively easy to use if you have any HTML coding experience, and there’s docs to help you find your way around the table-based responsive grid — yes, you’ll have to go back to coding with HTML tables to get nice-looking HTML emails. And then you’ll have to bring your CSS styles inline, but ZURB’s got a free Inliner tool to help you with that.
Once you’re done, you’ll have a beautifully modern email template that you can use in any service you use, say MailChimp or Sendy for bulk emails, or Mail.app or even Outlook for your direct emails. It should just work — and you can use the email testing service Litmus to make sure it looks great everywhere without having to bug all of your friends to test out your emails.
Email design, freed from the coding conventions of the ’90’s? It’s still a dream, but one the ZURB team has at least helped made a tad closer to reality with the Ink framework. It’s free, open-source, and is the framework you should try out the next time you’re setting up a rich newsletter email for your team.
     |