Friday 15 June 2012

HTML Email Content Best Practices

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!


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!


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.


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


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:

31% of the adult population in the UK now owns a smartphone (Jan 2011, Ipsos Mori)

• 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
(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