DESIGNING FOR EMAIL GUIDELINES

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

Introduction

This is a quick reference guide to help you plan and design your next email campaign.

It covers getting your core message across, design tips, fonts to use and avoid, copy writing tips and it also helps you tick off the legal stuff.

DESIGNING FOR EMAIL

Responsive Design

If there is only one point you take out of this guidelines document it is that responsive emails should now be the norm, not the exception.

You’re probably aware that a high-proportion of your audience reads their emails on mobile devices. If your email doesn’t resize and respond for their phone, it’s most likely destined for the bin.

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

START WITH MOBILE LAYOUT

Responsive Design

Responsive design is not about creating two different designs (desktop and mobile) and then coding them separately. If you create a flat for a desktop email and then re-work that design into a single column, the results you see may be different to what you expected (or worse, had your client approve).

If you can make an email design work as a single column layout, you can then more easily visualize how it would look as a responsive 2 column layout.

Designing the mobile version first helps you avoid text that’s too tiny and buttons that are too small to click on a touch screen.

Tips:

Keep subject lines to 25 characters.

Decrease number of navigation items to three.

Continue to use HTML text. Most mobile email clients default to disabled images.

Increase font size.

Add contrast.

Add padding between sections. A typical adult finger covers 45 pixels when pressed against a mobile screen.

Use distinctive colours for links.

Design whole sections to be clickable.

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

Mobile

Look at your mobile design and you should now clearly be able to see how it will work as a two or three column layout.

Desktop

VISUALISE THE DESKTOP LAYOUT

A

B C D

E F

H

A

B

C

D

E

F

G

G

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

EXAMPLE

Try to get the core message into the top 400 pixels without relying solely on images.

PRO TIP

Size

An ideal size for your email design 660 pixels wide.

Generally you only have the preview pane to grab and hold people’s attention, so try to get the core message into the top 400 pixels without taking up too much of that space with images.

Images

The images in your email may be blocked, so make sure the key message is clear, without having to rely on images.

Text within images is only suitable for graphical elements that are not critical to the message.

The same applies for links. If the whole goal of your email is to get people to click a link, don’t make that link an image because they might not see it.

DON’T RELY ON IMAGES

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

CONTENT

Content

Have a clear and simple call to action. There’s no need to include all your products or offers in the email campaign.

Think about including links to your website for greater detail, booking or to enter a competition. If you include no links at all, it’s difficult to track the success of the eDM much beyond open rates

An enticing sale item or a quick overview of updates is enough to get a click through. You want to catch their attention before they can make it to the delete button.

Stay focused on the goal. What is the one thing you want recipients to do? Make it easy for them to see what they need to do.

Links

Links should look like links, not images. We’re talking a simple text link – bold, underlined and (if your brand guidelines can stretch to it) blue.

Including an image (e.g. ‘book now’ button or icon) within a line of text can cause problems. It’s best to keep links as just text.

If you must use an icon for a link, its best to do this at the start of a paragraph.

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

FONTS

Fonts

Not all fonts will work for email.

In order for copy to appear in a certain font, the reader must already have that font available on their device.

Generally your recipients will not have the huge variety of fonts installed as your designer has, hence the need for a standard set of fonts for email.

The next page gives you a list of fonts you can comfortably use. Unfortunately if your brand font is not one of them, it means you will need to deviate from your brand font when designing for email.

Font Sizes

The minimum recommended font size for body copy is 10 point – larger is better.

Only secondary content such as terms and conditions can be smaller but try not to go below 9 point for these.

Best Fonts To Use

Verdana, Georgia, Arial and Times New Roman are four of the best choices for email fonts that you can find, and are distributed on both Windows and Mac OS platforms.

Close runner up options are Tahoma, Lucida Sans Unicode, Myriad Pro and Calibri.

Verdana Tahoma Georgia Lucida Sans Unicode Arial Myriad Pro Times New Roman Calibri

This is 10point, the minimum size recommended for body copy.

PRO TIP

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

Browser Safe Fonts

FONTS

Windows Fonts Mac Fonts Font Family

Arial, Arial Bold Arial, Arial Bold, Helvetica, Helvetica sans-serif

Arial Black Arial Black, Gadget, sans-serif

Comic Sans MS, Comic Sans MS Bold Comic Sans MS, Comic Sans MS Bold cursive

Courier New, Courier New Bold Courier New, Courier New Bold monospace

Georgia, Georgia Bold Georgia, Georgia Bold serif

Impact Impact, Charcoal CY sans-serif

Lucida Console Monaco monospace

Lucida Sans Unicode Lucina Grande, Lucina Grande Bold sans-serif

Palatino Linotype, Palatino Linotype Bold, Book Antiqua3 Palatino, Palatino Bold serif

Tahoma, Tahoma Bold Geneva, sans-serif

Times New Roman, Times New Roman Bold Times New Roman, Times New Roman Bold, Times, Times, serif

Trebuchet MS, Trebuchet MS Bold Trebuchet MS, Trebuchet MS Bold sans-serif

Verdana, Verdana Bold Verdana, Verdana Bold sans-serif

Symbol, (Symbol) Symbol, (Symbol)

W e b d i n g s (Webdings) W e b d i n g s (Webdings)

Wingdings (Wingdings) Zapf Dingbats (Zapf Dingbats)

MS Refence Sans Serif Geneva sans-serif

MS Reference Serif serif

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

COMPOSITION

Layout

Email needs to be coded as a grid/table, and as such the flat design needs to follow a table structure. The following image is used to illustrate the points discussed below:

A design gets divided into sections vertically or horizontally. The most important thing to note about this diagram is that each part of the grid can contain either text or an image but no sections of the grid can overlap.

Background

Stick to block colours for image backgrounds and don’t place text on patterned or gradient backgrounds.

With email, it’s not possible to float or have transparent backgrounds on images, which means text cannot cross over into a section that has an image.

PRO TIP

A design gets divided into a grid, sectioned vertically and horizontally

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

WORDING

Copy Writing Tips

Make the subject line attention grabbing without triggering SPAM filters.

Give people a reason to read it – break through the clutter.

Remind people why you’re emailing them – gain trust.

PRO TIP

Capture your audience within the first sentence

EXAMPLE

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

Commerce General Finance Financial - general

As seen on Free Accept credit cards $$$ Discount No fees

Buy Guarantee Cards accepted Affordable Earn One hundred percent free

Buy direct Now Check or money order Bargain Fast cash Only $

Clearance Win Credit card Beneficiary For just $xxx Price

Order Winner Credit card offers Best price Hidden assets Profits

Order status Winners Investment decision Big bucks Hidden charges Pure profit

Orders shipped by No credit check Cash Income Quote

Shopper No hidden costs Cash bonus Incredible deal Refinance

No investment Cashcashcash Insurance Save $

Requires initial investment Cents on the dollar Investment Serious cash

Sent in compliance Cheap Loans Subject to credit

Stock alert Check Lowest price Unsecured credit

Stock disclaimer statement Claims Million dollars Unsecured debt

Stock pick Collect Money Why pay more?

Compare rates Money back

Cost Mortgage

Credit Mortgage rates

Credit bureaus No cost

WORDING

Words To Avoid In Subject Headings

DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES

LASTLY

The Legal Stuff

Include your company name and address (or at least tell us, so we can include it).

Make it easy to unsubscribe (we’ll look after this).

Disclose how you got their email address (let us know and we’ll include this too).

Make sure you have permission to email all of the recipients.

Checklist To Supply

Your design as .PSD and .JPEG

Copy deck as .DOC or .TXT

Your preferred subject heading (or headings if you are AB testing)

URLs for all links

ALT text for all images

Physical address of your organisation

Database of recipients as .XLS or .CSV along with confirmation that you have permission to send to this database.

EXAMPLE

PRO TIP

Make it easy for the reader to find information by using a footer

Traverse Digital is a New Zealand based creative thinking agency for the digital age

Talk to us about all things web, mobile and social

WWW.TRAVERSEDIGITAL.CO.NZ