Home > Email Marketing > How should a html email be designed?

How should a html email be designed?

September 18th, 2009

The database is ready, the email marketing software installed, ready and now the email has to be designed and built. Websites are normally built to fill the average screen which is commonly 1024 * 768 pixels or larger.  However email clients display html emails differently to a web browser.  Email clients feature a preview panel which is commonly much smaller than a web browser and only occupies part of the screen.  To make matters worse the preview panel is configurable by the user and hence can have different sizes and orientations.  An average width for a preview panel is between 440 – 700 pixels and hence this is the width to which you should design your emails.

Creating the html email

Modern websites are built using html for the content and css for the styling of the pages including layout, colour and fonts. Ideally this method should be chosen to create your html emails, however unfortunately different email clients have different support for css with some supporting it totally and others having limited or no support.  A useful document to illustrate the various email clients and their levels of css support has been produced by Campaign Monitor.

Until email clients improve the best way to create html emails is to revert back to the old method of using tables for layout.  The number of nested tables should be kept to a minimum as once more than two or three tables are nested, unpredictable results can occur. The key is to keep your layout plain and simple.

Create an email with movement and graphics?

Firstly it is important to consider that most email clients do not immediately show graphics on opening an email. Instead they will show a message informing the user that the email contains graphics and asks their permission to load the graphics.  Hence if the user doesnt see this message or chooses not to download the graphics your email will look completely different to how you planned.  If you choose to create your html email as one large graphic or alternatively have no text at all then the user will initially see a blank message.  You should always have a combination of text and images in every mail you create.  The text will give the recipient something to read if images are switched off and will also act as initial marketing thus encouraging the reader to click the download images button to view more. You will also need to create a text based version of the email and hence you should make sure that the text alone gives the message you want to portray and doesn’t rely solely on graphics.

Unless the email client uses a web browser to render its emails (microsoft outlook version 7 doesnt use a web browser), things like flash, animated gifs and javascript may not be processed and hence are best avoided in html emails.  The best solution is to have an email which introduces the user to the subject matter before asking them to click a link to go to the website where the full detail can be shown.

Email Marketing

Comments are closed.