Letter Carrier Delivering Mail, 1908. Courtesy of the Smithsonian Institution.

Part 4 in a series on email marketing  |  Part 1: The What and Why  |  Part 2: Who’s Doing It?  |  Part 3: Why responsive?

Here’s the good news: you can send out responsive emails that are tailored to each of today’s multifarious viewing environments without any particular technical know how.

And surprise! There isn’t any bad news.

A few years ago, there would have been. Emails are a colossal pain to code in a way that works for all email clients (the tools people use to read emails, e.g. Apple Mail, iOS Mail, Gmail, Yahoo, Outlook, Outlook.com, etc.). They can’t be coded in the same, mostly logical way that web pages can. Instead they have to use archaic and hacky code techniques to work universally. Doing this from scratch is a specialist skill and a bit of a drag.

There are large companies and sophisticated campaigns (think: run by agencies and big brands) that still require custom email coding, and there are consultants, tools, and test suites to help with that. But, in general, all that is overkill for small to medium-sized organizations.

Nowadays, the good email service providers (ESPs) offer templates which are already designed to be responsive which you can use either as-is or as the basis for your own branded designs. They also have built-in tools for previewing and testing your emails on various devices, so you can can make sure your content is going to work well for your audience. Phew!

If you’re reading this wonder what responsive email is and/or why you should care, check out the previous article in this series.

On the road to sending out responsive emails to your list

In part one of this series, I covered the logistics of getting started with an email service provider and email marketing. And, if you’re not already signed up and familiar with an ESP that you like, this is where you might want to start.

Once you’re ready to start sending out emails, or improving the emails you’re already sending, here are some best practices to help you get your message to more people and have them engage with it better:

Branding

• Make sure that your emails are true to your brand. Depending where you are on the spectrum of brand codification, this may mean following a well-worked out brand guide or it may mean making sure to use the same colors and logo as your website and keeping your tone consistent with other branding materials.

Email headers

• Make sure the name of your organization appears in the from field.
• Make sure the email return address is recognizable as being officially from your organization.
• Use the pre-header field (you ESP should offer this) to write text which will appear as a snippet in many email clients — you know that one- or two-line preview you see before you open an email that helps you decide whether or not you’re going to open it? Take control of what it says. And keep it to 100 characters or less.
• Give a quick google for the current best practices in email subject lines now and then. This changes fairly frequently — in terms of what is currently getting people to open emails and what’s been overdone. It’s also something marketing bloggers love to write about so there’s a lot of information out there. For now, you might want to check out this study that MailChimp did.

Layout

• Firstly, choose a responsive template from your ESP.
• Design your email with a one-column layout. In other words, no sidebars. This is going to fit and work much better on mobile phones and will look fine on desktop and laptop browsers too.
• Your template will help to constrain you, but know that you should keep your email to 600 pixels wide for optimal phone display happiness. This is a handy fact to know when you’re putting together a header or sizing graphics to go into your email. They needn’t be wider than 600px.
• Don’t cram too much in — white space will help readers skim and parse your content. Large blocks of type may put them off.

Type

• Your template will come with font choices already made for you, so don’t worry if you’re not comfortable making design decisions. However, if you’d like to change typefaces, you should be able to do so easily. Here are some reasons you might want to:
  • You want to choose fonts more in keeping with your brand look or style guide
  • You want to use different fonts to emphasize important items, or to create a hierarchy of information
  • You find one font choice more legible/readable than another
• You may be surprised to find that there are very few font choices compared to what you’re used to in other programs. That’s because it’s important to only use the few fonts that are universally available on all systems when you’re sending out an email — lest it display funny because the end user does not have the font it was designed in.
• You should stick to no more than 2 fonts per email to keep it professional-looking and uncluttered. By all means use bold or italics where called for and vary the font sizes where appropriate, but keep it simple. A design rule of thumb is to choose one serif and one sans-serif font that play well together. But this rule is breakable as needed.
  • Your logo doesn’t count in that 2-font maximum, by the way. And it should be a graphic, anyway, so you don’t need to choose a font or stick to the set of universal fonts for it.
• Keep the design of like items analogous. In other words, if you choose to make headlines 5f2px Times New Roman in blue, make all headlines of equal weight 52px Times New Roman in blue. If you choose to make buttons orange with 44px white type, make them all that way.

Affordances

Affordances is a complicated human-computer interaction concept about the relationship of users and what they’re interactive with. But for the purposes of our conversation, it means:

• Make buttons big enough for sometimes less-than-agile phone fingers. It is recommended that you make the type on your buttons at least 40 pixels in order to be assured the button will display large enough on small phones. (The size of the type pushes the size of the surrounding button out around it.)

This is especially important because, generally, the button is the crux of your email (from your perspective). It’s the call to action, or what you want your audience to do — whether that’s signing up for an event, donating, buying a book, reading something engaging on your site, etc.

Call to action

• Ideally, keep each email to one call to action, and, indeed, to keep the whole email to one content message.

This might seem odd if you’re used to sending out newsletter type emails which each contain a lot of separate features and no single overarching theme, aside from the date of issue. If you are sending out multi-subject, newsletter-type emails, don’t stop cold-turkey without reflecting on the strategic implications. But do consider including a table of contents at the top which links to sections below and teases users.

The pros and cons of this kind of email newsletter may be something I revisit in a later article. But for now, let me give you an example of what a one-topic, one-call-to-action email message might be like.

Thinking of it in terms of what consumer brands or for-profit organizations do might help. For example, you get an email from your favorite store. The headline is Labor Day Sale!. There’s an image and some copy about a thing or two that’s on sale. Then the call-to-action button says, Shop Now and takes you to their online store. Or, you get an email from AAA (or CAA, or the AA) that says Your membership’s almost up! and gives you a call-to-action Renew Now!. Single subject emails that give you one task to do.

For a history or heritage org, these same kind of short, sharp single-message, single call to action emails can easily be used for events, special programs, development initiatives, book sales, what-have-you. If there’s something current and timely that you want your community to act on, think about how much more efficient it could be to just thell them about that and give them a button to push to take action rather than distracting them with a newsletter full of interesting bits and bobs.

• Keep your call to action button above the fold.

In the context of email, this silly phrase-borrowing from newspaper design means that you should preview your email and make sure that users on mobile and desktop browsers can both see your call to action button without scrolling down. Because many won’t.

Images

• Don’t use too many image in your emails. They can be slow to load which can put off readers — especially mobile readers. It’s not a hard and fast rule, but sticking to one image per email is a good practice.
  • Note that blocks of color that you use in the template are lighter weight and won’t slow down the email loading like an image (a GIF, PNG or JPG) will.
• Some people read their email with images turned off (to speed up load time, to use less mobile data, etc.) and blind and vision-impaired members of your audience will interact with your email using a screenreader. So make sure your email makes sense without the images. Don’t embed all of your text in the graphic. Also remember to fill in the ALT attribute for your images with a description that screenreaders will read (you ESP should have an easy form for doing this.)
• You also want to avoid background images, as they do not display in Outlook. (Your ESP’s templates may not even let you add them — but essentially they’re the equivalent of filling a block in your email with an image instead of a color, and then being able to type over it.)

Signature

• Traditionally there is a block at the bottom of emails known as the signature where you’ll put your contact information, and you should definitely follow this expected design paradigm.

Besides your contact details, consider providing other information that’s important to your readers (like your hours of admission) but don’t clutter this section up with either too much information or with secondary calls to action that distract from your main message. Links to your social media presences are fine, but I wouldn’t add a donate now button or an invitation to get tickets for an event which isn’t the main topic of the email.

• Don’t hide the unsubscribe link (most ESPs will automatically append this to the bottom of your emails). Not only is it illegal in some countries not to offer and opt out, it could prompt recipients to use their block button instead, meaning you’ll never be able to communicate with them again.

Summary

This article is long only because there’s a lot of explanation. If you’re starting with a good responsive email template, the steps you need to take to conform with best practices are actually quite straightforward and the tool your using will help you with a lot of them. Go forth and send out great emails!

Part 4 in a series on email marketing  |  Part 1: The What and Why  |  Part 2: Who’s Doing It?  |  Part 3: Why responsive?