10 Email Design Best Practice Tips

Not getting the results from your emails that you would like? Haven’t got a clue where to start designing your emails? Your emails are a gateway to more information on your website, meaning that the way you present this information is very important to activate interest and drive click throughs to your desired conversion.

Take a look at my top 10 best practice tips to help you get the most out of your email design.

1. Leave some white space!

Don’t cram everything in! Use white space wisely and ensure your email is readable by leaving some blank space (using padding for example). Remember, quality not quantity!

2. Make your email ‘scanable’ and take research from eye tracking studies into account

People don’t want to spend a lot of time reading an email, they want to be able to scan it, mentally note the important information, and make the decision as to whether to click through and follow your call to action. Taking this into consideration, you should make your information as easy to scan through as possible using smaller paragraphs and bullet points for example to give the most information possible in the shortest amount of time.

Over the last 8 years Jakob Neilson have performed various email newsletter usability tests including eye tracking studies 4 years ago. In this test they studied users reading behaviour in great detail. Their report summarised: “We found that users are extremely fast at both processing their inboxes and reading newsletters: the average time allocated to a newsletter after opening it was only 51 seconds. "Reading" is not even the right word, since participants fully read only 19% of newsletters.

The predominant user behaviour was scanning. Often, users didn't even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content.” You can read more from this report here: http://www.useit.com/alertbox/newsletters-study-3.html

Eyetracking heatmap of users reading a newsletter.

Notice the emphasis on reading the first two words of the headlines. The areas where users looked the most are coloured red; the yellow areas indicate fewer views, followed by the least-viewed blue areas.

Some people including myself, like to call this behaviour the email ‘F’ where the top, left hand side and middle are the most viewed pieces of content. Make sure you bear this in mind and add your most important information and intriguing words in these areas.

3. Use Bullet Proof buttons

With images blocked by default it is really important to ensure that the majority of your call to actions are not enclosed in images. Instead try building your CTA buttons in a ‘bullet proof’ format; which simply means splitting the image down and ensuring the centre copy is actually coded into your HTML as text. This means that even when images are blocked by default and not turned on by the recipient the CTA is still available and able to be clicked on.

The way you do this is to split the image into 6 sections as shown in the below very basic example:

Step 1

Build a 6 celled table with the centre cell as your linked call to action text. Add a background colour to all the cells.

Step 2

Then, if you want to add curved corners for example add these as images in the corner cells of the table.

By doing this, even if images are blocked, you still have a complete button!

4. Design for preview panes (Horizontal and Vertical types)

Test your email before broadcasting to check how it displays both with and without images turned on in various email clients in total as well as in the preview pane.

Studies show that many b2b email users will view their emails in the preview pane before deciding whether to fully open the email and download its contents in programmes such as outlook and lotus notes.

A survey by Lyris showed that more than 9 of 10 email users have access to a preview pane, and 7 of 10 say they frequently or always use it. Additionally, 75% of email readers who use the preview pane use it in a horizontal format and most often see either 4-5 inches deep of content (44%) or 2 to 3 inches (41%).The survey also showed that nearly half of email readers look at just the first few lines they see in the preview pane to decide if they want to continue reading the message, but 32.9% will read the whole message, even if they have to scroll through it.

The key take away from this and other studies is to ensure that there is text available for the recipient to read in the preview pane area to entice the recipient to read on even if images are disabled.

5. Use Alt Tags on your images

When images are turned off by ISPs all that the recipient will see is a grey box... unless you add alt text to your images. By doing this, even when the images are blocked, the recipient can still see the message you have added here and it may help to persuade them to turn the images on and see the email in full.
However, using Alt text on the images does not mean that it is a good idea to fill your whole email with images; spam filters for example expect a good image to text ratio or they are likely to place you in the junk box. You can read more about this in my post ‘Why you shouldn’t use big images in your email campaigns’

6. Use Pre Headers to back up your subject line

A pre-header is the first line of text that appears in your email and is shown underneath the subject line in the inbox in many email clients such as outlook and gmail. They can be used to quickly communicate the purpose and value of an email and back-up your subject line, which not only encourages the recipient’s interest and the chance of them opening the email to read on, but also helps you survive the cut when standard or mobile email users rapidly delete mailings from their inbox.

Previously, people have not understood the pre-header and added text links that directed people to an online or mobile version of the email; you will still see this happening. But this is not a valuable use of the pre-header space and should be moved below it (certainly not removed altogether).

7. Make your call to action clear, concise and repeat throughout the email

You are sending your email for a reason, to get the recipient to perform a specific action; whether that is to visit a web page for more information, register for something or to make a purchase for example. So why would you not make this purpose explicitly clear to the recipient? It is advisable to repeat your call to action throughout your email in both text and images at least 2 or 3 times (depending on the length of your creative); ensure they are entered within the body of the copy as text links in addition to images (if you want to use images for this purpose) in case the recipient has chosen not to turn images on – if they don’t turn them on and you have only placed them in this way the call to action will be lost.

8. Personalise your email – not just using the first name!

Your email results are more likely to improve if you tailor your content to the needs of the individual recipient and what they are interested in. This requires a good database with reliable information that can feed into your email campaigns in the form of sections personalised on different aspects such as:

• Name; a word of caution here though, if the name you have in the database is incorrect or the field is blank, firstly it does not look very professional, and secondly it can cause negative feeling
• Certain preferences given on sign up or requested after sign up
• Previous purchase data

One of the best ways to do this personalisation is to use dynamic content so that you do not have to build separate emails to cater for each different variation.

You can also personalise your messages based on the customer journey and use triggered messages to target consumers as they are exploring your site. For example, sending a tailored message to someone who has visited a certain page for a specific amount of time and then left the page or someone who has abandoned their basket at the checkout. This kind of targeting involves further tracking on your site and the ability to identify who they are (you also need to have their email address already in your database of course)

9. Avoid using background images.

Tests have shown that in email clients such as outlook 2007, 2010, hotmail and Gmail background images will not render in tables and table cells. Therefore it is advisable to stay away from using these altogether to ensure your email displays as you initially wanted it to and designed it to be.

10. Don’t use CSS. Instead use inline styles.

According to various sources, anything outside of the body tags gets stripped when HTML email is displayed in browser based applications such as Yahoo!, Hotmail and Gmail. This means you can't link to an external CSS file from this  portion of your email and should use inline CSS in your email HTML to ensure that your message displays as you had intended it to.

Don’t forget...
Test, test and test again! Although these are best practices, don’t forget that every database is different and will react differently – try testing different elements of your creative to find what gets you the best results whilst getting you into the inbox; it doesn’t matter what your message is or how nice your email looks if you do not reach the inbox and have your email viewed by the recipient.

Why you shouldn’t use big images in your email campaigns

We’ve all seen them and received them in our inboxes at one point or another;  emails from companies that are made up of one large image (whether this be physically one image or one image sliced into sections) or an email filled with lots of smaller images with no copy at all.  But if big companies are using this method why can’t I?

It is widely proven that using appealing images in marketing campaigns makes the piece look better and can increase conversions; showing the customer what they are buying for example.  However, using all images or one big image in your campaign is playing email Russian roulette for the following reasons:

• Most studies that you read show that anywhere between 40% and 60% of people receiving your email will look at it with the images turned off by default with the recipient needing to actively turn on image viewing in their email client to see your images.  If they do not do this, your important content will not be shown and all they will see is a blank gray box making it look like your message is broken – not very professional!  You should of course always add ALT text to your images but this does not replace the whole message that you want to get across.

• Servers are more likely to filter emails with large images, meaning the campaign will end up in the recipient’s junk folder rather than the inbox; so they may not see your message at all. Use images in your emails to enhance and entice, but not to convey the entire message. Always use a good mix of textual content to describe all the necessary details and explain your main message and call-to-action. Don’t forget that one of the major elements spam filters look at is your image to text ratio in the email. A good rule of thumb is to use a 70:30 rule; 70% of your email in text and 30% images.

• Large images can take a long time to load, and your recipients may move on to the next email in their inbox without viewing yours

• One large image can only link to one URL, limiting your ability to include links to multiple products, articles or specific landing pages to increase your conversion rate.  It also means that your ability to track your audience’s response to different products is negated.

In summary, don’t follow the crowd – they don’t always do it right!  Do it your way and get the best results you can from your email marketing campaigns.