Image courtesy of Zurb
In Responsive email design for beginners, we had a look at the challenges involved in building consistent responsive email templates. A product which deals with all these issues has been long sought-after, with the high-level drag-n-drop WYSIWYG email builder seemingly the only solution for a good long time.
The template builders built by the big email campaign players like MailChimp and Campaign Monitor provide a simple, reusable solution. But a product like MailChimp may be outside your budget, it could be overkill for the kinds of emails you wish to send to your audience, or perhaps you don’t want to rely on an external tool for emails.
WYSIWYG email template editors tend to come with some caveats as well. If you want to edit your email template, you’ll have to edit inside the editor. This may seem rather obvious, but fancy editors do keep a lot of the email code behind-the-scenes (to keep things idiot-proof…). What this does mean is limited control, which can be frustrating at times when the design calls for something outside of the scope of the builder. As wise as they are, WYSIWYG editors can behave unexpectedly, this can result in some bizarre and unpredictable consequences.
What we need is a tool with more presentational capability than plain-text emails, more power than a simple boilerplate and more control than an interactive template building app.
A newly proposed solution may be the responsive email design framework, a tool for designers and developers who want:
- Full control over email template presentation and structure
- A reusable email boilerplate which deals with all those annoying email-client rendering issues
- A lightweight, grid-based CSS baseline
- Independence from external tools
Zurb, the guys that brought us Foundation, have just released a new tool called Ink. Built with design in mind, Ink pretty much ticks all of these boxes. The build process is a little bit more hands-on:
- Download a template or a blank-slate boilerplate
- Edit the HTML template to your liking using Ink’s responsive grid classes – Note – You can add custom responsive styles in a style tag in the <head> and other styles in a style tag inside the body, so you won’t need to deal with those horrible inline-styles.
- When you’re happy with your template, chuck it into Ink’s Inliner – this magically takes the contents of your style tags and applies the rules across the affected elements.
- Use the resulting HTML template as your new email template
- Test! Yes… you still have to test it, but you should be testing everything anyway! Ink recommends using Litmus for testing emails, I haven’t tried it yet, but it looks pretty cool.
Okay, it’s a little bit more involved than writing plain-text emails or dragging boxes around a browser window, but it’s worth it!
- Ink includes a responsive grid and a block grid for email clients without support for media queries. This means it’ll look good in Gmail and native Gmail apps.
- Ink includes a big bag of style resets to take care of all those tricky rendering issues in troublesome email clients like Outlook.
- By pushing our style rules inline, we can avoid any problems arising from email clients which don’t support specific CSS rules.
- It gives you absolute total control over structure and presentation, which I’m sure will be hugely appreciated by web designers.