DESIGNING FOR EMAIL GUIDELINES
May 12, 2015
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