Responsive email design tools comparison

Tags: , , &

responsive-email-design-tools-comparison-by-Zing-Design

Email design has come a long way since the old days of plain-text messages. In this series we’ve looked at the various problems we have to deal with when building emails and a new approach; the responsive email design framework.

Now we’ll discuss some of the best methods, the benefits of each one, and which is best for the task you’ve been given.

Want to go straight to the feature comparison? Here is our feature comparison table

Plain text emails (no HTML)

We’ll start with the classic. And I know what you’re thinking, ‘Lame… Plain text emails look super boring!’. While it is less than aesthetically pleasing, a plain text email is by far the fastest method to create emails, ensure that your email message gets through to your audience and displays 100% consistently across email clients. So there’s a lot to be said for plain text…

When to use:

  • When you have absolutely no time to build anything more complicated
  • You don’t want to go through the hassle of setting up a template
  • When you want to send a one-off message to users (e.g. a coupon code for a Foundation tutorial course)
  • A situation where it is imperative that the message gets through to the user (e.g. A sign-up confirmation or password reset)

When not to use:

  • For any email which needs to look good (e.g. promotions, newsletters) – needless to say, plain text leaves you few options for visually impressing your audience (except maybe ASCII art)
  • When you need to include HTML elements in your email (e.g. headings, images, tables)

HTML email boilerplate

Those of you familiar with the tremendously useful HTML5 boilerplate will appreciate the HTML email boilerplate. It’s a simple HTML file which includes a whole lot of style resets targeting those unpleasant email client issues which we discussed in Responsive email design for beginners. This boilerplate allows you to hand-pick the snippets which support the various rendering issues. So if you only need to support a specific list of email clients, you can cut it down to meet your needs.

When to use:

  • For basic emails which need to include HTML elements
  • When you want a blank-slate to work with, without any potentially conflicting styles.

When not to use

  • Any email with a layout more complex than a single column (you can, but there’s a better tool for that…)

Ink

This is one of Zurb’s latest creations, which is the responsive email design framework we talked about in Responsive email design made easy with Ink. It’s a framework similar to Foundation or Bootstrap (albeit a lot and simpler) for rapidly building email templates. Ink allows designers and developers to quickly build emails with complex structure.

It includes all the added style tricks to fix the myriad problems associated with email clients, as well as some reusable CSS classes to do handy things like centering images, buttons and panels. It also includes a responsive grid for email clients which support media queries, and a block grid for mobile email clients which don’t support media queries.

When to use:

  • Emails where you want full control over HTML and CSS – ideal for web designers
  • Great for newsletters, promotions and notifications with complex layouts and a custom-built look
  • Personal projects or start-ups looking for a way to send out a huge number of eye-catching emails without the cost of using a big complicated SaaS product

When not to use:

  • When you need all the bells and whistles that come with the aforementioned big complicated SaaS products (e.g. Mailing lists, scheduled services, analytics, plugins, etc…). Most of these applications allow you to paste in your own HTML templates now, so you can probably use both!

MailChimp

There are plenty of similar email marketing SaaS products out there; Campaign Monitor, Constant Contact, GetResponse to name a few… But I’ll use MailChimp as the example here, as it’s very popular. MailChimp is crammed full of useful features for dealing with practically everything associated with email marketing. I won’t give you the sales pitch, you can see that for yourself on the MailChimp website.

MailChimp has a simple custom template builder, as well as a more powerful Drag & Drop template builder with easy to organise template sections and WYSIWYG content editing. Which I suggested in the previous article as a potential solution to building email templates.

When to use:

  • When you have to manage a lot of different email campaigns to send large volumes of emails to many different audiences
  • When you want all the extra functionality that comes with products like MailChimp (e.g. campaign management, A/B testing, fancy WYSIWYG editors)
  • Ideal for users unfamiliar with HTML and CSS, the interactive template builder makes things a lot faster and easier

When not to use:

  • When you want total control over the design and structure of your email templates. Tools like these operate at a very high level, and therefore lock the core HTML and CSS away to stop users from seriously breaking things.
  • As good and easy to use as they are, these interactive tools are prone to bugs. They could be the app’s problem, or a user’s mistake. Either way, there’s rarely a way to easily diagnose the problem, meaning it can very frustrating for web designers.

The email tool comparison table

Features Plain-text email HTML email boilerplate Ink MailChimp
Email client compatibility ★★★★★ ★★★★ ★★★★ ★★★
Mobile compatibility ★★★★★ ★★★★ ★★★★ ★★
Speed ★★★★★ ★★ ★★★★ ★★★
Presentation ★★★ ★★★★★ ★★★
Reusability ★★ ★★★★ ★★★★★
Maintainability ★★★★★ ★★★ ★★★★ ★★★★★
Cost effectiveness ★★★★★ ★★★★★ ★★★★★
Design control ★★★★★ ★★★★ ★★
Ease of use ★★ ★★★★ ★★★★★
Bells and whistles* ★★★ ★★★★★

*Bells and whistles is a technical industry term to describe additional features which add value to a product.

Next post

December 17th, 2013

People who have viewed this post also viewed

Comments

  1. teaqueue

    That’s a good article – just what I was after.
    The MailChimp drag&drop is a bit limited in its design capability, but client’s and non-tech users love that they have some control.
    It’s a toss-up between Ink and MailChimp for me. Might try Ink out for some internal stuff.
    (Your comparison table is broken though – might wanna check that.)

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text