10 rules for designing emails your customers will want to read

Default avatar.
July 30, 2014
10 rules for designing emails your customers will want to read.

Email continues to be one of the most popular ways that companies interact with their customers. As with everything else in the design world, how you design an email will have a tremendous impact on things like the click rate and the retention of your subscribers.

When you design for email, you should make the most of the fleeting opportunity you have to make an impression on your subscribers. One of the Cialdini principles of persuasion applies here: if you offer your readers great value through your email, they’ll gladly reciprocate by taking the time to read through and click on any links.

Of course, designing for email also entails responsive email design since almost half of all email opens today occur on a mobile device. Here are the can’t-miss components of successful email design.

1) Transparency counts

Double-check the kinds of subject lines, copy, sender names and even preheaders that you use. Never make any of these ambiguous or confusing for your readers. Otherwise, they’ll be so much likelier to mark your emails as junk or outright delete them.

Instead, always tell your readers your identity, what they’re reading and what the benefits of reading will be. The trick is to get all of this information as close to the top of your email as you can. Having all this information stare your readers in the face as soon as they open your email means your proposition won’t be ignored.

2) Follow a conventional pattern

This is the one time when being conventional and not doing something unexpected helps your cause. People are going to expect certain commonalities in all emails they open. For instance, when designing for handheld devices, be sure to make big as well as easily clickable and tappable buttons for your links. It’s best to even make them 100% of the width of the screen because users want to tap with either thumb!

If you place additional links in the copy of your email, make sure that they appear in contrasting and bold colors to make them stand out and scream for attention. Never put links too close together since it would be annoying if users accidentally tap the wrong link.

Finally, see to it that you also make the advantages of clicking so obvious that they can’t be missed. A good way of achieving this is to combine the advantages of a click with the button itself. For example, ideal button copy would be “get your free demo now.”

3) Minimalism: say more with less

No one makes time to read that much, especially mobile users, so don’t write a lot in your email copy. Readers will simply scan the email for stuff that holds their interest instead of reading the entire email word-for-word. Split up the chunks of text into small pieces that are easier to consume.

A marketing email, for example, has the objective of getting readers to click back to your website. Don’t stall this intended outcome with a long piece of text. At any rate, longer text just makes it so much more tempting for readers to send your email to the trash.

4) Promote scan-friendly reading

Readers love to scan emails, so make them easy to scan. You’ll accomplish this by dividing your text into delineated and orderly chunks that get right to the point. The use of crystal-clear headings and the emphasis of significant concepts in bold will empower your scanning subscribers to get to the gist straightaway.

5) Say as much as you want, just later on

Design your email copy so that the most gripping and shorter details come first; only include your longer content after that. This way, you aren’t making any of your readers slog through the longer content, save for the ones who really want to read the longer content. So there is a place for longer content in email marketing, but it just has to come in the right place in the email.

6) Reiterate the call to action

In marketing emails, the call to action is the whole reason for sending your readers the email to begin with. It therefore pays to repeat the call to action later on in the email, particularly if your email has longer content. No one wants to scroll all the way back to the beginning of the email to see the call to action again.

7) Limit the number of choices

An excess of choices in your email will cause a cognitive overload on your subscribers, so they’ll be that much less likely to actually go ahead and make a decision. Ponder carefully over just what the minimum requirement would be to get a reader to click to go to your site. You want to just gradually introduce this necessary detail to the reader. If you give him too much information at the beginning, then he’ll be likelier to abandon his task.

8) Rely on that whitespace

Whitespace is very effective even in email design. Whitespace is highly useful when it comes to breaking apart crucial bits of information to make it easier for the reader to absorb important details. If you’ve got a lot of elements that are the same size as well as weight, then incorporating whitespace allows readers’ eyes to focus on the stuff that matters. Without whitespace, your email body can appear as a formless, huge block that readers may just skip over.

9) A special word on responsive email design

Today, people are looking at their mobile devices around 150 times a day! In addition, 4 out of 5 people will delete emails if they fail to look good on their mobile devices. All this means that you have to focus more intently on bringing your message across to your readers more efficiently than ever.

The media query @media is used in responsive email design. @media is a unique set of CSS styles that behave like either dynamic rules or conditional statements. They can help you create emails that are more readable on various screen sizes.

What they do is identify a device’s screen size and then various sets of rules that apply to said screen size. Based on specifically what you want to accomplish, media queries may be easy or hard to implement. Note that these won’t work in all email clients and also need more planning as well as testing than ordinary emails.

Based on your specific screen size, media types define the exact CSS styles to utilize. Essentially, this media type says, if your email’s viewed on a screen size that’s 480px or smaller, use the following CSS.

So that would be: @media screen and (max-width: 480px)

Responsive email support

Currently, not all handheld devices and clients support responsive email. That’s why designers must keep abreast of what devices and clients support responsive email. That’s why it’s a really good idea to actually test your emails out in a bunch of different devices and clients, so that you can be sure.

Here is where responsive emails are currently supported:

  • Android 4.x Email OEM app
  • iOS Mail app
  • Windows Phone 7.5
  • BlackBerry Z10
  • BlackBerry OS7

Here is where responsive emails are currently not supported:

  • Android Gmail app
  • iPhone Gmail app
  • iPhone Yahoo Mail app
  • iPhone Mailbox app
  • Blackberry OS5
  • Android Yahoo Mail app
  • Windows Phone 7
  • Windows Phone 8
  • Windows Mobile 6.1

10) Design email for readers

As with all other aspects of web design, the job of designers is to design for the user in order to enhance the user experience. That has to be priority number one. Otherwise, your emails won’t be a big hit with your readers and subscribers.

There are so many things to consider, everything from transparency and following a conventional pattern to minimalism and whitespace. If you want to reach folks on mobile, you have to also figure in responsive email design. Keeping these tips in mind will greatly help with your email click rate.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…