Designing HTML emails

Before delving into writing HTML code for your bespoke design email, it’s a good idea to spend a few minutes doing some planning first. Don’t think of this stage as wasted time - it is more likely to be the opposite - saving you time in the long run as you will know exactly what you are aiming for before starting. A well-planned email is also likely to be a success, especially if you are using the email for marketing purposes.

Some questions to consider

Before you start writing the code, ask yourself some or all of the following questions:

• Who will the email be sent to?
• What is the aim of the email?
• What is the ideal outcome?
• What are other positive outcomes?

To answer those questions, let’s think of an example scenario. The email might be going to existing customers of a particular company (let’s call it 'My Company’). The aim of the email could be to share the latest news about an exciting new product. The ideal outcome might be that people reading your email click through to your website and buy the new product. Other positive outcomes might include following the company on social media (Twitter, Facebook, Google+ etc.), or that they remember the company and what it does. At a later date they then may decide to buy the product or look for other similar products, and they may return to the site.

What to include in the email

The answers to the above questions will also help you to decide what you want to include in the email. For the above 'My Company’ scenario, it would be wise to include:

• A customer name
• Text with the news and information about the product
• A strong 'call-to-action’ for the recipient to click through to the company website news page (read more about 'calls-to-action’ in our earlier post on email marketing tips)
• A logo and social media buttons

Now that you have decided on the content of the email, you can go ahead and sketch a design. You might like to use a pen and paper to do this, or use a simple graphics program that you are familiar with.

Design tips

It is a good idea to use a simple white background for your email - you can choose another colour if you like but white is preferable for ease of reading and a subtle, professional design. When choosing a font, remember that HTML emails are restricted to 'websafe’ fonts so it is quite a simple choice: Georgis, Palatino Linotype, Times New Roman, Arial, Comic Sans, Impact, Lucida Sans Unicode, Tahoma, Trebuchet or Verdana (we don’t recommend using Comic Sans or Impact as they are unlikely to look good and/or be easy to read). Our preference is Trebuchet as it looks modern and is less common that well-used fonts like Arial and Lucida Sans Unicode.

A subtle grey colour works well for text and you might like to choose an 'accent’ colour to go with it. Make sure your text is large enough to read easily. You can use headings anc columns to guide the reader through your text. Keeping a lot of white space in the email is a good idea as it makes the email clean and easy to read. Make sure the 'call-to action’ is very visible. Include a signature, logo and your social media buttons as well.

Step-by-step guide

You can view a short video about designing HTML emails using Simplelists here. This video takes you through the design process step-by-step and is based on the questions we started with in this blog post.

You may also like to browse the short series of six videos about HTML emails that include tips and guidance on: designing emails; writing code for responsive emails; and testing and sending emails.