Embed Size (px)
Citation preview
Best practices design advice from Vuture.
www.vutu.re/explore [email protected]
London +44 20 7928 6250
New York +1 646 569 9079
Sydney +61 (0) 2 82160767
Template design: Email and newsletter
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 2
Table of Contents
IMPROVING EMAIL DELIVERABILITY FOR 4
TEMPLATE LAYOUTS BEST PRACTICE 5
RESPONSIVE DESIGN 6
What is responsive design? 6
MANAGING IMAGES 7
CHOOSING AND USING SNIPPETS 8
Snippets included in the initial template 9
SUPPORTED EMAIL CLIENTS 10
Desktop 10
Mobile/tablet 10
Web Clients 10
*Source: radicati.com
132.1 Billion
Business Emails Sent/Received
Per Day in 2017*
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 3
Vuture Email & Newsletter Template Design Introduction
With Vuture, every client is
assigned a dedicated Project
Manager to work with you to
design and plan the content
and layout of your new email
and newsletters templates.
We often get asked for advice at this stage
and this email and mewsletter template
design best practices paper is designed to
provide you with the information and
guidance you need to get started.
The following suggestions are
based on our experience in
working with over 260 clients in
practically every country in the
world. They are only suggestions
– every client is different – but
you will find some useful tips
here for when you are planning
your designs.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 4
Improving email
deliverability for Vuture works “behind the scenes” for you,
taking a variety of technical measures which
will help to keep your email deliverability high
and help to prevent you being blocked as a
spammer.
Things to think about when designing your templates
range from content and layout to your choice of
colours and the use of your branding, through to
images and calls to action.
All these aspects of your design will affect the success
of your emails in different ways. On average, you have
only 15 seconds or so to get the message across to
your readers, so you need to optimise your email
structure for the best results.
Looking now at key elements in turn…
We are fully integrated
with Litmus to ensure
maximum deliverability
for every digital
communication piece
you’ll send through the
Vuture platform.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 5
Template Layouts
Best Practice A “layout” is the way the email page is structured –
how many pixels wide, and what elements (such as
text and images) go where. One of the benefits of
using Vuture is that the layouts you can create are
so varied – allowing you to try out different styles
to see what works for you. You can start with a
couple of layouts and move the elements
(snippets) around yourself, with no technical know-
how, in an almost endless variety of ways.
You may decide to start with a
One Column layout or a Two
Column layout. Both can work
well, and it is possible to build
a page which appears to be
One Column at the top,
blending into Two Column
further down the page.
One Column
Two Columns
Right Sidebar
1:2 Column
Try to keep your layout as clean and clear as possible, so don’t clutter it up with too
many areas of boxed text or links. To keep the page “clean”, use lots of white space.
This will allow your areas of text and your images to stand out on the page. Layout is a
big subject, with many lines written on the topic about such aspects as tracking eye
movements across the screen and where on the page is best for certain elements to
go. One point in all this advice stands out – keep it simple. A messy, crowded page will
put your readers off from the start. Another piece of useful advice is to keep the most
important items at the top of the page – who you are, what you are trying to say and
what you want your readers to do.
Most popular choices are a 50:50 split page or 75:25 or 66:33 for layout with
more than one column.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 6
Responsive
Design
What is responsive
design?
Email templates that are
responsively designed will
render differently when
viewed on devices based on
the screen resolution of that
device and the email client.
This allows users to view the best
possible version of an email no matter
where they view it from. Responsive
design is Vuture’s recommended
method of creating mobile-optimised
content.
In short - responsive design is a way of
making the layout of your email or
website adapt to suit the device they
are being viewed on.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 7
Managing images Vuture will help you to manage images and keep your
email size small by resizing images as it places them on
the page. You should save images as High Resolution,
preferably at the same size as the snippet in which you
intend to use them, in one of the permitted formats.
Vuture recommends saving images as .jpg and .png but th platform supports
additional format types such as JPG, GIF, PNG, EPS, TIF and PDF by default.
The default maximum
file upload size is
30MB. The Vuture
support team can
change this.
1,138 Million
Active Business Email Accounts source: radicati.com
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 8
Choosing and Using
Snippets Snippets are the elements on the page which make up your email design.
You might have a text snippet at the very top of the page, followed by a
logo in an image snippet, followed by a heading snippet.
Each template supplied by Vuture at the beginning of the project, can have up
to 10 different snippets in the design, not including the Header area and the
Footer area. However, this is only in the design stage.
Once you are using a template you can repeat snippets or remove them as you wish.
Snippets can be copied and repeated on the page, so an area of text high up on the
page and another area of text lower down the page would count as just one snippet,
not two. Here is an example of a master template page divided into snippets:
This example “Master
Template” has all the
available snippets on the
page. The finished email
would probably use fewer
than this example.
A dedicated Project
Manager will work closely
with you to discuss the
options available to meet
your specific needs.
It is helpful to provide
examples of your current
newsletters and invitation
pages that you would like
to replicate.
The logo and colours
would be changed to your
branding and snippets can
be moved about to suit
your preferred layout.
Snippets can be moved up
and down the page, but
not left to right.
Wide column snippets
cannot sit in the narrow
column and narrow
column snippets cannot sit
in the wide column.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 9
Snippets
included in
the initial
template
} Contact
} Disclaimers
} 1 column
} 2 columns
} Header
} Event
} Footer
} Wide image
} RSVP
} CTAs (buttons)
Don’t forget –
Vuture email
platform can also
be used effectively
for internal
communications.
Keep in mind the
possibility of a very
simple template for
this purpose.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 10
Supported Email
Clients When Vuture builds your templates we always check that those emails
would render correctly in different email clients. The email clients we
support are the following:
Desktop Outlook 2003 through
Outlook 365
Apple Mail 9 and up
Lotus Notes 8.5
IBM Notes 9
Mobile/tablet IPhone 5s (IOS 7) and up
IPad Mini (IOS 10.2) and up
Android 4.4 and up
Web Clients AOL Mail
Gmail
Outlook.com
Yahoo! Mail
These are the major players. We keep up to date with developments in this
market to ensure that we continue to support the major email providers.
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 11
EMAIL AND NEWSLETTER – TEMPLATE DESIGN
www.vutu.re PAGE | 12
The Vuture vision is to play a major role in helping organisations build and maintain strong, lasting relationships – both internally and externally.
FOR MORE INFORMATION 3rd floor, Crowne House, 56-58 Southwark Street, London, SE1 1UN
London +44 (0) 20 7928 6250
New York +1 646 569 9079
Sydney +61 (0) 2 82160767
[email protected] www.vutu.re
