Best Practices in Email Design

best-practice-email-design1


Introduction

Despite the popularity of social media, email remains one of the most effective communication tools available to marketers. In South Africa, 88% of people check their email first when going online in the morning[1].

People are bombarded by dozens, sometimes hundreds, of emails every day and your email must cut through the noise if it stands a chance of communicating your message. This guide will help you design your email so that it stands out, visually and in terms of usability, to ensure that your customers open, read and engage with it.

Designing for the Inbox

The inbox is the first place that your customers see your email. The following design best practices apply to your customer’s inbox:

  • 'From' name and address
  • Personalised 'To' field
  • Subject line
  • Snippet text
  • Preview pane

Let’s take a look at each of these elements in detail.

'From' Name and Address

You want readers to quickly identify that the email comes from you. The ‘From’ name is one of the first things a contact sees when your email lands in their inbox.

From name

Taking this into account, we recommend that you use your company name for immediate recognition. In the image above, you may recognise the bank (Capitec) but you may not know where the “This vs. That” email comes from.

Alternatively, if there’s one person in the company who’ll always send newsletters/marketing emails, you can use that person’s name to make it more personal. The drawback with this approach is that your contacts may not recognise the individual’s name and they may not open your email. In the example below, if you don’t know that Gian works at Afrihost, you may not open his email entitled “Something extra for you”.

AfrihostPersonalFrom

 

Best practice cautions against using ‘no-reply’ addresses as the ‘From’ address. If a customer sees ‘noreply@example.com’ they tend to feel distanced from you. Using an address that encourages communication, such as support@example.com or help@example.com, is a good way to show your customers that you’re open and willing to engage with them.

Personalised 'To' Field

Use your contact’s name in the ‘To’ field. This is another personal touch that can improve customer engagement with your email. The only time a contact may not want to see their name in an email is if your industry deals in personal or confidential information.

Subject Line

Your subject line should be informative, short and non-spammy.

Make sure that your subject line communicates the contents of the email effectively. You need to let your contacts know what they’re going to learn/read about in the email.

GoodSubjectLines

 

Research[2] shows that shorter subject lines (less than 10 characters) have the highest open rates, followed by those between 50 – 59 characters long.

SubjectLineLength

 

Email clients truncate subject lines at different lengths[3], and mobile clients are especially stingy. Android only gives 24 characters, while Apple cuts your subject line at 31. So, a subject line of 10 characters or less will always get your message through.

Finally, avoid spam triggers in your subject lines. Caps, multiple exclamation marks, and suspicious phrases generally ensure that your email goes straight to the Junk folder. If you’re lucky enough to get a “FREE VIAGRA!!!” email into a contact’s inbox, they’re probably going to delete it without opening it.

Snippet Text

Some email clients display a short snippet of your email’s body text. This is usually shown next to, or below, the subject line. You can use it to build on the subject line and communicate more information about the contents of your email. If a contact is interested in the subject line and snippet text, they’re more likely to open the email.

Preview Pane

This is the section of your mail that will be visible in the preview pane of email clients like Outlook, Hotmail and Yahoo and is made up of roughly the first 400x300px of your email. If your preview pane looks good, it’ll entice your readers to open your email.

PreviewPane

 

Five ways you can optimise your preview pane:

  1. Include a company logo that your readers will recognise instantly (beware, however, that some email clients strip images out of emails).
  2. But, keep your logo less than 150px high so that it doesn't push your preview content too low.
  3. Provide a link for online viewing in case readers prefer online versions (this also helps you deal with the stripped-out images).
  4. Try to include a Call-To-Action in the preview pane. Your readers will know exactly what to expect in the email, and whether or not it's relevant to them.
  5. Try not to cram too much into the preview area. It needs to be clean and direct. If you clutter it with images, headlines, links and text your readers will be confused.

Designing the Email

While inbox design is important, the design of the email itself is paramount. Research shows that 80.3% of consumers delete emails without reading them if they don’t look good[4]. An email needs more than just good looks to be effective. We’ll cover the following email design elements:

  • 'Unsubscribe' link
  • Link to online version
  • Pre-header
  • Footer
  • Designing in an F-pattern
  • Email width and length
  • The text-to-image ratio
  • Call-to-action (CTA)
  • Images, including
    • Background images
    • Alt-text on images
  • Web-safe fonts

Make the unsubscribe link easy to find and use. Customers who can’t find the unsubscribe link will often simply mark your email as spam. This is very serious as it has a direct effect on your reputation; too many spam reports and you’ll start struggling to get into the inbox.

Some specific guidelines for the unsubscribe link are:

  1. Make it as easy as possible: You don’t want to leave a bad impression. Customers who unsubscribe from your mailing list are still potential future customers, so make the unsubscribe page as simple as possible. Pre-populate the form with the customer’s email address and don’t ask for passwords or codes. A single ‘confirm unsubscribe’ button is all that the customer should have to click.
  2. Don’t be a jilted lover: Pay attention to the design and wording of your unsubscribe page. You don’t want to come across as an overly-attached girlfriend.
  3. Give your contacts options: Customers may prefer to receive a weekly or monthly digest instead of daily emails, or updates only on specific products. Allow users to adjust their settings on the unsubscribe page, but don’t make this more important than unsubscribing entirely.
  4. Provide a non-compulsory field for feedback so that your contacts can tell you why they’re unsubscribing.
  5. Send a confirmation email immediately after the contact unsubscribes. This confirms that you’re taking their wishes seriously.

GoodreadsEmailPref

 

Link to Online Version

Some email clients strip out images and formatting. Provide a link to an online HTML version of your newsletter so contacts can read your email and share the link with their family and friends.

Pre-header

The pre-header is a single line of text, usually a smaller font than the rest of the email, which appears above the header image. Because of its placement, the pre-header may be displayed as your email’s snippet text. This makes it a valuable tool for increasing open and click-through rates.

Preheader

 

Here are some suggestions for use in the pre-header (choose one or two, not all of them):

  • Include a CTA that supports your subject line. Even if buttons and images are stripped from the email your contacts will still get the message.
  • Include a forward link so that contacts can send your email to their friends and family.
  • Request inclusion in your contact’s whitelist. This will get you past the Junk mail filter and land your email straight in the inbox.

The footer of your email is a good place to give contacts the information they need to interact with you, manage their preferences or opt-out of communications. You can also include sharing options and links to your website and key services.

Footer

 

Designing In an F-pattern

Research shows that people read email and websites extremely quickly, and in an F-shaped pattern[5]. This means that they read in one horizontal movement; skim down the left-hand margin a little, read another horizontal section and then skim to the bottom of the page.

FPattern

 

You want to catch their attention as they scan down the left side of your page, so design your email to take advantage of this by starting subheadings, bullet points and paragraphs with words that carry information.

Email Width and Length

Limit your email to 600px wide so that it’ll display properly in most email clients. If your email is wider, your contacts might have to scroll horizontally to read the whole email. This is a big usability no-no.

If you want to optimise your email for mobile, you should keep it to 350px wide. You should also use a vertical layout for your email, and limit it to 2 – 3 printed pages in length.

Text-to-Image Ratio

The image-to-text ratio is a big spam trap, so you need to make sure you balance your email correctly. In general, a 60/40 text to image ratio is recommended[6].

Call-to-Action (CTA)

Your CTA should be obvious - make it stand out from the rest of your content so that readers can immediately see it. Make sure it looks like a button. If it’s obviously clickable, people are more likely to click it.

It’s a good idea to put the CTA in the centre of the page, as this draws the reader’s eye to it.

CalltoAction

 

Images

Images are a tough element of email design. They can help you to make your email look really gorgeous, but they can also be a minefield. There are many guidelines regarding the use of images in email, so let’s get stuck in.

  • With images, size is important. You should crop your images so that they’re not wider than the email itself before you insert them. You should also try and keep the file size as small as possible (this applies to the whole email). Larger image files mean slower loading times and this can negatively impact campaign’s potential.
  • Host your images on your own server, with an absolute URL for each image. When you insert the image into the email, use this URL. Not depending on someone else’s infrastructure ensures that your images are always available.
  • In general, you shouldn’t use images in .PNG format as it’s not supported by Lotus Notes.
  • Remember to use Alt-text on your images. If the images are blocked by your contact’s email client, they’ll still know what the image showed.
  • Don’t use background images in your email. They bloat the size of the email and won’t render properly in most email clients.
  • Don’t use flash or .GIF animations. They won’t work and they’ll make your email file size bigger than it should be.
  • Remember to maintain an image-to-text ratio of 40:60 so that your email is properly balanced and doesn’t appear to be spam.

Web-safe Fonts

Fonts have to be installed on a contact’s computer in order for them to display correctly in emails. However, web-safe fonts are fonts likely to be present on a wide range of computer systems without the user having to download and install them. If you use a font that is not in the web-safe fonts list, your contact’s browser will try and match the font to something it has available.

Stick to web-safe fonts in your email design and choose one that matches your brand identity. You can always play around with font size and width to give it more personality.

Optimising for Mobile Email

There are a few things that make mobile emails a pleasure to read. The list below sums up the basic techniques that you can use to create great mobile email.

Enlarge fonts Bigger is better when it comes to fonts for mobile devices. Best practice is to have body copy set to 14px and headings of 22+px.
iOS devices have a minimum size of 13px and will automatically scale any smaller fonts.
Use the right scale Most mobile operating systems won’t automatically resize your email to fit the device. If your email is too wide, users will have to scroll to try and read it.Try and keep your emails to 320–550px wide.
Call-to-Action Your CTA must be prominent and easy to tap. Place it upfront, in the centre of the page, and make the button at least 44x44px.
Simplify your design Mobile screens are small. Keep your design simple to avoid cluttering the available space.
 Images Make sure you balance your images with plenty of HTML text. Mobile operating systems very often block images by default (only iOS doesn’t do this), so make sure your email looks good even when the images are blocked. Clever use of alt-text on images can reduce the harmful effects of image blocking.
Be concise  You don’t have a lot of space in mobile emails, so make sure you cut out any unnecessary images, text or links.
 Layout  When designing email for mobile screens use a single-column layout. This is much more mobile-friendly than multiple-column layouts.
Click here! You need to clearly show that links and buttons are clickable. Use shadows, outlines and other effects to clearly indicate which parts of your design are clickable. Also, try and avoid using the word ‘click’. Mobile users don’t have a mouse to click with.
 Fat fingers  The mouse is dead, long live the finger. But fingers are big, and buttons are small. When designing email for mobile, make your buttons big, increase font sizes and line spacing, and use more white space to allow your email to breathe.
 Ergonomics  Many mobile users use one hand to browse on their device, so optimise your design for single-handed use. Keep all your buttons and links in easy reach.

CAN-SPAM

A law passed by the Congress of the USA, the Controlling the Assault of Non-Solicited Pornography and Marketing Act of 2003, CAN-SPAM[7] for short, is a flaming hoop you have to jump through if you want your email to reach the inbox. It’s also really important for your reputation as an email sender. You can face strict penalties and even jail time if you contravene the guidelines of this Act and your email is received by someone in the USA.

A few tips to help you send CAN-SPAM compliant emails are:

  • Only send email to people who want to receive it. Use a subscription form on your website, membership forms or a hand-out at your till point to collect subscribers, but make sure that they opt-in to your email campaigns.
  • Make sure your email has an unsubscribe form. This is non-negotiable.
  • If someone unsubscribes, don’t email them ever again.
  • Make sure your business address is clearly visible in the email. Usually the footer is a good place for this.
  • Do not, under any circumstances, buy or sell email lists.

Important: These tips do not constitute legal advice.

South Africa[8] also has specific legislation governing spam email, as do many countries around the world. We recommend you familiarise yourself with the anti-spam requirements of the countries you’re sending email to.

References

[1] http://www.senderguide.com/wp-content/uploads/2013/07/Everlytics_Demystifying_The_Inbox_Part1.pdf

[2] http://www.marketingcharts.com/wp/direct/email-open-rates-seen-best-in-morning-clicks-highest-in-late-afternoon-21485/

[3] http://www.mequoda.com/articles/email-design/25-email-design-best-practices-for-mobile-desktop-youll-want-to-know/

[4] Blue Hornet, Consumer views of email marketing 2013.

[5] http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

[6] http://www.targetmarketingmag.com/article/10-email-design-best-practices-mobile-email-smartphone-tablet-world/

[7] http://en.wikipedia.org/wiki/CAN-SPAM_Act_of_2003

[8] http://ispa.org.za/spam/south-african-law/

Translate »