A concise guide on what to include and consider before creating a HTML email.
In my day job I also design and build a lot of html emails. So in addition to my leaflet design blog posts - here is some HTML email tips and best practices I've got together which i think you will find useful:
All HTML emails, should adhere to certain best practices and you
should always consider the following items:
Subject Lines
Don’t underestimate the importance of the subject
line. Before everything else in your email, your subject line is what gets the
attention of your audience in their inbox and draws them in. If it’s a good
engaging subject line, your audience is more likely to open the email, if it’s
a bad subject line – the email is more likely not to be opened – despite what
is actually in the email! So spend time devising a relevant, compelling &
engaging subject line that will attract your audience. If you don’t fully understand
your audience yet, simple A/B testing on subject lines, including content, tone
& language, will help you get a
better picture of just what will attract them.
Research suggests the most successful subject lines
are short, engaging, descriptive, non-spammy and provide the reader with a
reason (or benefit) to explore your message further. They are not salesy or pushy at all. A good
subject line will simply describe the engaging subject matter of your email.
It’s as simple as that.
From Header
There isn’t a great deal to say about this – other
than when sending an email, you must ensure that your identity is clearly
stated in the ‘From Header’.
HTML Build / Coding
We have described HTML Build/Coding guidelines in
more detail elsewhere – but it needs to be emphasized here to. To render
consistently for all recipients across all email clients (and each email
clients limitations) a HTML email should be built according to strict HTML guidelines.
If you don’t know these – then you shouldn’t be building or designing emails!
AVL
Right at the top of your email should be a “view this
email in browser” link. This is there incase recipients receive an email which
is all mangled and messed up – either because it wasn’t built correctly to
render consistently across all email clients – or maybe because the email has
been forwarded on by someone and this process has screwed the layout up. Having
an AVl is a second chance for recipients to view the email contents as intended
through a web browser.
Small mobile headline
With an increasing number of emails
now being opened on mobile devices, it is now best practice to place a very
small email text headline (10px font size) in the top left part of the email.
This text will then display in the preview text that a mobile device such as an
iphone gives you – and by placing it top left it will also be in the part of
the email that would be viewed first on a mobile device, especially incase the
email doesn’t shrink to fit the width of the mobile screen. If the mobile
device it is opened on somehow only displayed the html code of the email (early
generation blackberries)– this (along with the AVL) would still be viewable first
and would hopefully entice the viewer to investigate further.
Above the fold
When opening an email not
everyone views the same portion of an email instantly, due to variations in
email browsers size, and whether they use a preview
pane (most recipients do!). Our research shows that the top 300 pixels x 600
pixels (wide) is the area that will be shown to almost all email recipients
regardless of their email browsers preferences. Therefore the content placed in
this area should be engaging, compelling & relevant - hooking recipients
attention and giving a strong reason to further investigate the email and
scroll down it.
Optimum size
Because of the desktop preview
pane variability, and the increasing tendancy of emails to be opened on mobile
devices. We advise to build emails at a maximum width of 600pixels. Height can
obviously vary – but the ‘above the fold area’ needs to be considered as the
most valuable real estate area.
Look & Feel – Brand consistency
Because an email recipient has
more than likely opted in to receive email communications on a company’s
website, it is good practice to follow on similar visual branding into the
email as seen on the website. This will breed instant familiarity, and a recipient
will realize that the email they are receiving is because they have registered
a previous interest in that brand. Therefore, it is good practice to have brand
consistency across all marketing materials (including web, email & social).
In an email this means prominent use of a brand logo above the fold, use of
similar colours, fonts and imagery elsewhere in the email.
Alt tags
Like subject lines, alt tags are vitally important,
yet often neglected in terms of their importance, or worse still – forgotten to
be included! For most people viewing an email for the first time – images will
automatically be blocked. And all viewers will be left with is any html text
and alt-tag description. If an image takes up a major chunk of the space above
the fold, then an alt tag may be all the recipient see’s. Therefore it’s vital
that the copy for the alt tag should be written as engagingly and interesting
as possible in order to encourage the recipient to proceed to the next stage
and ‘download images’! If your really clever like us you can even style the
text on an alt tag! But remember – cut the clutter, only fill in alt tags that
matter, you don’t have to apply alt tags to every little image!
Content
It may be obvious, but an emails content should
be carefully chosen to be of upmost relevance to your intended recipient. Good,
engaging content will not to be too salesy or pushy - ideally you want to use
email communications to build trusted relationships with your audience - so
give them content of useful information and real value - rather than just sell
sell sell! That way your recipients will come to value your communications, and
become more likely to read future emails from you, and value your Call To
Actions. Multi-tasking, time-poor email recipients are often skipping through
lots of emails to find something of relevance. Text should be as concise as
possible - so as not to risk bombarding the recipient with too much
information, and thus putting them off. Avoid the urge to try and pack too much
information into your emails. In the cluttered inbox, less is always more. If
there is lots of text in an email – it will put recipients off wanting to read
it. If you want to cover lots of areas in an email – consider short teaser
paragraphs on different topics – with the user directed to click a link to go
to a website to find out more! Finally - avoid using spammy cheap words in your
text copy (as they will, surprise, surprise, increase your spam rating!) If you
are unsure about what spammy words are, a simple web search for ‘email spam
words’ will be useful to try!
Layout & Visual Hierachies
Once you understand the point of your email - and what result you are
trying to achieve with it - then you design the layout of your email around
achieving this end result. Email viewers scan content before jumping into
reading everything straight away, to find something of relevance to them. To
achieve this an email should be designed around the principle of visual
hierarchy. There should be sectioned off elements that immediately grab
attention straight away - that hook the viewer - and get them interested. Once
you have their attention - you can tell them what important things you have to
say!
Personalisation & Dynamic Content
Really effective content that will be of most relevance to the recipient
is that which is personalised to their individual needs and preferences. It may
seem obvious, but when a recipient receives something which is tailored to them
and their needs - then it is more likely to captivate their attention.
HTML text / text as image
There
are 2 ways to display text in an email – either as html text, or text which is
infact part of an image. HTML text will instantly appear on opening an email,
whether images are disabled or not, whereas text as image will not display if
images are blocked. Therefore if important text or headlines is within an
image, and images are blocked, it wont be instantly viewable and wont be able
to hook the recipient.
At
small font-sizes HTML text does tend to render better than text as image, but
HTML text does have its limitations in that you can only use a handful of
web-safe fonts (fonts that are available on all computers as standard so that
you are sure of consistent renderinga cross all platforms). Having text as part
of an image opens up the number of fonts you can use and how creative you can
be in styling the text. Another good reason to use HTML text is that the higher
the ratio between HTML text to images in your email reduces the spam rating. If
an email consists of just images – spam rating is likely to be high. Think
about it – most spammers in trying to avoid spam words being picked up through
the html text could instead put their spam words as part of an image! As a rough
guide text to image ratio should be 60:40 in terms of area they cover, or 1
image per paragraph of text.
Call to Action
A well
planned effective email campaign is always trying to get some sort of
measurable result. And a well designed
email will always channel the recipient to a ‘Call To Action’. The CTA should
be prominent enough so it’s clear to the viewer what the next course of action
is, and everything within the email should be layed out to encourage them down
this route. Factors that determine a good CTA include positioning, colour, size
and wording; CTA’s are for actions - so
the text should begin with a verb! And remember - every CTA added to a page
reduces the impact of the others!
With the
emergence of mobile & touch-screen tablet devices to view emails, care
should also be taken to design CTA’s for the fingertip as mouse. So you may
want to consider using buttons rather than small text URL’s as links – and
these buttons should be big enough to touch and also with multiple CTA’s they
should be a finger width apart!
Social media profile links
Such is the growing importance of having a social
media presence, it is also important to include links to your social media
profiles in your emails. It’s best practice to include the logos of each social
media platform you wish to promote, as this aids instant recognition for the
email recipient. The best spot for social media links depends on your activity
in this space, placement of your SM links at the top of the email means they are
more likely to get hit, equally the bottom of the email after sign off is also
a good spot.
Social-sharing
Often everyone now puts in links to their social media profiles within
their emails. But you can also go one stop further and add social media sharing
links, for example the facebook share/like button. These shouldn’t be put in
because they are trendy and its the ‘in’ thing to do. Rather, if you are giving
your recipient content which is highly relevant and useful to them, then they
are more likely to want to tell their friends about it – so give them the
option to do so! If you do want to include these sharing options, then your
messaging should be designed around the whole sharing concept, and should not
be an after thought.
Email Footer Information
Unsubscribe:
An unsubscribe
link is a a one-click opt-out link that removes people from your list immediately.It
should be placed where it is clearly accessible so that people who want off
your list can find it really easy (instead of clicking their “Junk” button).
Company contact Info (LEGALLY REQUIRED UK)
Following The
Companies (Registrar, Languages and Trading Disclosures) Regulations 2006
(United Kingdom), every email marketing message should now include the company
registration number, country of registration and registered office address.
[DMA p23]
Privacy policy:
A clear link to
your company’s privacy policy should be in your email.
According
to the DMA In every email you must include:
•
a clear link to the privacy policy of the Data Owner; and
•
a clear link and comprehensive information on the cookie policy of the Data
Owner where clear and comprehensive information about any cookie, clear gif,
web beacon or similar device within the email is provided, including the
purpose of any storage of and access to any information stored on the
recipient’s terminal equipment, and an opportunity for the recipient to refuse
its deployment.
Best
practice would be to rename the Privacy Policy link as “Privacy Policy and Use
of Cookies” in order to raise the visibility of the use of cookies.
T&C’s &
Disclaimers: Special Offers, Prizes etc
If the email
content includes any prizes or special offers, be sure to include any
disclaimers & T&C’s
Reminder Text:
It’s best practice
too to include some kind of reminder text, such as “You are receiving this
email because you signed up to receive our newsletter at our website.” Email
recipients sometimes forget that they opted in to receive communications, and
can just hit the junk button quite easily! Boosting your spam rating to the
major ISP’s.
Text only version of the email
The Art of
the Text only Format
Sending a text only format email not only
helps with decreasing spam rating, but it also offers another chance to reach
those recipients who cannot receive full HTML email. Although much simpler than
HTML, there are still best practice tips to follow when creating a text only
version.
Whilst containing the same text content as
your html version, (apart from having to enter each link as a full URL), you
can apply simple styling techniques to the text only version, such as bullet
points and visual markers like the ‘*’ & ‘-‘symbols, to emphasize or
section off pieces of content to make scanning the email easier. Like the
following:
-----------------------------------------------------------------------------------------------------------------------------------------
**** Simple visual aids can make all the
difference in making text only emails more engaging ****
-----------------------------------------------------------------------------------------------------------------------------------------
The Mobile impact on HTML email
Smartphone
useage and mobile email open rates
Mobile useage is increasing all the time, and
within this channel smart-phone useage is also rapidly gaining a bigger and
bigger market share year on year.
Here’s some stats to show where we currently
are:
UK:
•
31% of the adult population in the UK now owns a smartphone (Jan 2011, Ipsos Mori)
US:
• 234 million mobile users
in the US
• 90.1 million smartphone
users
• 38% of all mobile users
use smartphones, therefore
• 28.8% of US population own a smart-phone
• 28.8% of US population own a smart-phone
(all 4 above eMarketer, Aug
2011)
• 82% of smartphone users check and send email with
their device.
(Source:
Google “The Mobile Movement: Understanding Smartphone Users” April, 2011)
• 16% of ALL emails are opened on a mobile device, an increase of 81%.
(Source:
Google “The Mobile Movement: Understanding Smartphone Users” April, 2011)
•90% of smartphone owners access the same email
account on mobile and desktop. (Source: Exact Target
Channel Preference Survey)
All this means that there is an ever
increasing chance that a HTML email will be opened on a mobile device. What
does that mean for the HTML email? Well firstly an email must now also be
designed & built with the foresight in mind that it could well be opened on
a mobile device.
Increasingly most smart-phones render HTML –
so your email will appear as intended. However, mobile screens are a lot
smaller and your email layout should cater for this. This adds greater weight
to our advice that emails should not be more than 600 pixels wide. With most
mobile devices being in the 300-320pixels wide range (iphone 4 320pixels wide)
this means your email will be shrinked 50% for display on mobile devices. Which
is an acceptable amount of shrinkage and text will still be readable if you
follow our text size guidelines.
Because of the shrinkage – we advise no key body
text to be smaller than 12px. If you can make it 13-14px then great – but if
there is quite a bit of body text – then 12px will be fine.
Headlines should be clear, bigger than the
body text and immediately stand out from the rest of the email so that some, if
not all headlines, Will attract and interest the recipient.
We tend not to advise text to stretch the
full width of the email (600pixels) – instead only filling a portion of the
full width, so a user can zoom into the email for bigger text display whereby
only the text box width fits the screen – but it is still scrollable up &
down.
It is best to layout emails quite simply to
cater for this zooming in – and try to have all text (or content sections) which
fits in one column vertically. Having images to the right / left of the 1
column of text is a good way to add visual interest to the email, helping it
fill the 600pixel width, whilst still making it function well.
In terms of content – reems of text will put
off the mobile recipient – so it’s a good idea to keep text short & sweet
and to the point. Perhaps use a web-landing page for more detailed information,
and the text in the email will just act as a teaser to get recipients to click
through to a web-page (which is of course is also mobile optimized!)
Finally – its also good practice to have
clear calls to action, and buttons big enough so they can easily be hit by a
finger! so that your mobile optimized HTML will get the desired results!
------------------------------------------------------------------------------------------------------
That just about wraps that blog post up! Hopefully you have found it insightful and informative and it helps you create better email campaigns. If you have any questions feel free to post a comment
