Email design and creative guide

www.vutu.re/explore
explore@vutu.re
London
+44 20 7928 6250
New York
+1 646 569 9079
Sydney
+61 (0) 2 82160767
VUTURE GUIDE
Email design
and creative

EMAIL DESIGN AND CREATIVE | GUIDE
WWW.VUTU.RE PAGE | 2
Table of contents
DESIGNINGFOR EMAIL 3
STRATEGY 4
Objectives 4
Audience 4
Types of emails 4
STRUCTURE 5
Header or intro 5
Web version 5
Pre-header 5
Safe sender 5
Logo 6
Headline/hero banner 6
Social media 6
Salutation 6
Menu 7
Primary call to action 8
Footer 8
Lead copy 8
Body 8
Event invitations 9
Surveys 11
Publications or thought-leadership content 11
Mobile responsive 12
Content 13
Images 14
Master and sub-templates 14
BEST-PRACTICE SUMMARY 14

Designing
for email
So, you’ve come to the point where
you need to provide us with an email
design for us to code?
Clients often ask us for advice at this
stage. There are so many different
things to consider when you design
for email. We’ve created this guide to
help you consider everything you
need to create an amazing and
effective email design.
This guide includes best practices and
examples of the recommendations
that we make.

Strategy
The first thing to consider is the overall
strategy for your email programme. What is
it that you are trying to achieve? What is the
goal for each stream of your email
programme? Why are you sending emails?
What are your desired outcomes with
Vuture? These questions are important
because your goals will determine the
elements you should be including in your
design and creative.
•
Objectives
• Provide information
• Build relationships
• Drive hard sales
• Improve efficiency
• Increase client engagement
•
Audience
• Existing clients
• New, prospective clients
• Internal employees
• Suppliers and partners
Types of emails
• Event invitations
• Publications, thought-leadership content
• Surveys
• Newsletters
• Other

Structure
Header or intro
The intro and header are critical to the
success of your emails. A recent study
says that you have eight seconds to
catch a recipient’s attention.
So, it is of the utmost importance
that this section of your emails is
optimised and effective for keeping
the reader’s attention.
Web version
Adding a link to a web version is less
important than it was a few years ago.
Many companies are choosing not to
include this in their emails. Many
businesses haven’t quite caught up with
consumer technology so it’s still worth
including a link to a web version. Keep
the copy simple such as: ‘View online’,
or: ‘View web version’.
Pre-header
The pre-header is the area before the
main content of your email. It includes
the “web version” and “safe sender”
along with additional real estate to
extend the impact of your subject line.
With many email clients now displaying
the first line of the email as a preview
you can add more impact.
The image below shows the pre-header
on a mobile device.
Safe sender
This is a simple-text prompt to your recipients. In this text you should encourage
them to add your email address to their safe sender or address book. This means
that your emails will be delivered to their inbox every time and with images
switched off.
This is called user-level whitelisting.

Logo
Including your logo as part of your intro
is important as it can help your recipients
identify who the email is coming from.
Email real estate is really important so
don’t make your logo too large.
Where you position your logo is very
much up to you and is based on your
brand guidelines.
Headline/hero
banner
Since images are often turned off by
default, ensure that your headline is
written through, so your recipients
can see the content of your email.
Using a hero image or banner at the
top of your email is a great way of
engaging your recipients. These are
the first visual element your recipients
see and could impact whether they
continue readying your email beyond
the eight seconds or not. The
photography and impact of this image
is important.
Social media
If your organisation uses social media you
should include links to your social media
pages.
Salutation
Consider where your salutation is
positioned within the email itself.
Think about your audience and
whether they will be expecting you
to greet them with their first
name or surname.

Menu
Menus can be a really useful navigation tool for your recipients. Many people use
emails as a means of simply navigating to a company’s site.
Think about the most important pages your recipients may want to visit if you
choose to include a menu. Menus are not always appropriate, particularly when
thinking about mobile responsive versions.
You should consider hiding your menu on a mobile version or reducing the
number of menu items.
Web
Mobile
Web
Mobile
Web
Mobile

Primary call to
action
The call to action comes back to the
strategy and intentions of your email.
The call to action should be above the
fold and clearly state the action that the
recipient should take.
It should back up the objective and
measure of success for that particular
campaign.
Footer
The footer of an email is often
overlooked and usually a hodgepodge
of disclaimers and fairly boring text.
When optimised, the footer can
support your campaign.
Make sure you include statements
about how your recipients can
unsubscribe or change their
preferences to remain compliant with
regulations such as the GDPR and
PECR.
Tell them why you have sent them this
email. Particularly with the changes in
the law it can be beneficial to explain
how you got their details and why you
have a legal reason to contact them.
Include a link to your privacy policy
along with your company contact
details
Lead copy
The copy you include in your email is
very important. Gone are the days
where you can include reams of
information within a single email.
Microcopy is one of the biggest changes
in the industry. Less can be more when
it comes to email, particularly when
thinking about how your recipients
engage on mobile devices.
Body
The main body of your email has to be
engaging. Think about how many
articles or sections you want to include.
Keep your emails relatively short so
that your recipients don’t need to scroll
too much. Shorter is better.
Consider how the calls-to-action for
each article will appear.

Event invitations
When thinking about the structure of
your event invitations the ultimate goal
for any event is to bring in attendees.
Driving desire and making it easy to
RSVP should form a really important
part of the email content.
Make sure that you include a compelling
reason for them to RSVP, provide details
of the event and a map to where it will
be held.
Make it really easy for them to RSVP.
Don’t forget to consider the landing
pages of your events and your RSVP
forms. Make sure that they match the
branding and design of your emails.

Surveys
If you are sending an email with a
survey particularly one that might be a
long survey you want to make sure that
you give your recipients a really
compelling reason why they should
complete the survey.
Consider including an incentive and give
them a detailed explanation.
Don’t forget to include how long it
will take.
Publications or
thought-
leadership content
Often these emails promote a single
piece of content or thought leadership.
Your goal with this type of email is to
encourage your recipients to click
through, download and ultimately read
this content. You want to ensure that
you have a clear call to action.
To do this, ensure that your subject line
and copy is engaging and interesting to
encourage action.

Mobile responsive
When thinking about your email design,
make sure you consider how your
recipients engage with it on their
phones. Mobile screens are much
smaller than desktop and being able to
scroll easily is crucial to engagement.
Complex email designs don’t render
as effectively on a mobile device.
Your email will render slightly
differently on each device across
technologies.
Responsive design allows some level of
control so that your email looks great
regardless of the device. Not all mobile
devices or apps render the media
queries or code that allows for this
responsiveness.
Below is a guide for your reference:
Mobile Webmail Desktop
Android 4.4 AOL Mail Apple Mail 10
Gmail app (Android) Gmail Outlook 2000-03
Gmail app IMAP
(Android)
G Suite Outlook 2007-16
iOS GMX.de Outlook for Mac
Inbox by Gmail
(Android)
Inbox by Gmail Thunderbird
Inbox by Gmail (iOS) Libero Windows 10 Mail
Outlook (Android) Office 365
Outlook (iOS) Orange.fr
Samsung Mail
(Android)
Outlook.com
Yahoo! Mail app
(Android)
Gmail
Yahoo! Mail app (iOS) SFR.fr
T-online.de
Web.de
Yahoo! Mail
*Accurate as of 13/09/2018

Columns typically stack with the left-
most column at the top and then each
subsequent column stacking underneath
the one before. Including more than a
two-column snippet may cause your
email to be very long on a mobile
device. We suggest that you only use
one or two-column snippets.
We recommend your body text fonts
be no smaller than 12 pt.
Aim to keep your overall text to a
minimum. Not all devices have every
font so keep to the web-friendly fonts.
We recommend not using side
bars/columns in your design. They don’t
stack effectively on a mobile device and
are no longer best practice for email.
Menus can be a useful navigation tool
on a desktop. On a mobile you could be
taking up precious space.
We suggest cutting down the number of
menu items or removing the menu
altogether when viewing the email on a
mobile. We don’t suggest stacking your
menu items.
To keep the overall length of the email
down, think about parts of your email
you could hide without affecting the
overall objective.
You could consider hiding some images,
some articles and some of the additional
extras in your email.
Make sure that these links are big
enough for someone to click on and
that there aren’t too many links, too
close together.
‘Target areas’ are an effective way of
thinking about this when it comes to
mobile devices
We recommend these touch areas
to be at least 46x46 px in size.
Content
Email copy should be succinct and
simple. It is best practice to keep your
emails short and then link through to
where your recipients can read more.
People tend to scan emails and don’t
read every word of your emails.
Make sure that your emails are
easy to scan through.
Use a maximum of one or two
sentences in body copy.

Eager to learn how to build trust and relationships with email?
Watch the webinar
The way your recipients use their mobile
device, they don’t ‘click’ they ‘press’
using their finger or thumb. The words
‘click here’ as a call to action may not be
applicable. Consider using different
language in your calls-to-action.
It’s very common now for companies
to use microcopy in their emails. This is
short and succinct copy designed to
guide people through the content
more efficiently.
Images
The images and colour used in your
email are crucial to its effectiveness.
Make sure that your imagery is
interesting and engaging.
Don’t use images that are too small
and make sure they are good
quality.
Master and sub-
templates
The master templates contain all of
your snippets from which you can build
any type of email campaign. We’ve
provided an example below of the
snippets you should consider when you
design your templates.
Best-practice
summary
This area summarises the main
points from this document and serve
as a reminder of what to include and
what not to include:
• Include plenty of white space in
your email
• Keep your copy short and succinct
across all parts of your email
• Keep edges straight and at 90 degrees
• Call to action buttons should stand out
from the rest of your email
• Your primary call to action should be
above the fold
• Text should be no smaller than 12 pt
• Use web-safe fonts
• Template width – 600 to 700 px wide
www.vutu.re
explore@vutu.re
London
+44 20 7928 6250
New York
+1 646 569 9079
Sydney
+61 (0) 2 82160767

Email design and creative guide

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Email design and creative guide