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.

1. DESIGNING FOR EMAIL GUIDELINES

2. 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.

3. 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.

4. 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

5. 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

6. 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.

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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