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 considerBefore 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?
What to include in the emailThe 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
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.
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.