Designing a HTML email is very similar to designing a web page however; there are several limitations that you should consider.
While CSS is supported by most email clients, this is only when it is used ‘inline’ in the code e.g.
<p style=”font-size: 12px; color:#000000”>Welcome to the Newsletter</p>
If the CSS is defined at the top of the HTML code within the <head> tag, many email clients such as Hotmail and Gmail will strip this out. If contained in an external style sheet it will be completely ignored by almost all clients.
A HTML email should not contain any JavaScript or any other scripting code. This will not work in almost any of the email clients and will also increase the chances of the message being treated as spam.
Flash movies, images and sound will also not work in most email clients and additionally will increase the spam rating of the message.
When an email is viewed in most of the free email clients e.g. Hotmail, Gmail and Yahoo, the images will initially be disabled and replaced with grey blocks. For this reason it is important to add an ‘alt’ or alternative text to each image, see the example below.
Without: <img src="http://www.google.co.uk/header.gif" />
With: <img src="http://www.google.co.uk/header.gif" alt=”Google” />
This alt text will display if the image cannot and is also important for accessibility reasons. Visually impaired users may be using voice based browser technologies that rely on such tags.
Unlike web design it is not recommended that you use div tags for layout when building a newsletter, tables are strongly recommended as they are much less problematic in emails and are supported by most email clients. A combination of well structured tables and spacer images will be rendered consistently in most email clients.
There are many known issues in Outlook 2007 which are causing problems for emails, below are a few:
- Background images
These are disabled and will not show up, for this reason it is advised background images are not used in messages.
- Paragraph Tags
Outlook 2007 does not support the <p> tag, instead two breaks must be used <br /> <br />.
Today, the vast majority of all email clients can render (display) HTML emails well. An exception is older versions of Lotus Notes, there are many issues with Lotus Notes (anchors not working, css not displaying correctly) for this reason we recommend adding a ‘click here to view this email online’ link at the top of your HTML newsletter. An online version can be added from the docs tab.
As every email client displays HTML differently, it is important to test each message created thoroughly. In the message tab there is an option to preview how your email will be viewed in a hotmail/gmail/yahoo (and others) email account. This feature can be accessed in the messages tab and is titled ‘preview’.
Or you can create a free hotmail/gmail/yahoo email account and send yourself a test message to each of these accounts.
