HTML Template Design Tips

HTML Template Design Tips (updated March 2007)

Different email clients (Outlook 2003 & 2007, Outlook Express, Hotmail, Gmail Outlook Express 6, Lotus Notes, Yahoo etc) render email messages differently. The aim of these tips is to retain the integrity of rendering and branding across a variety of email clients.
We highly recommend utilising the services of an email marketing designer who specialises in creating email focused templates. Email marketers know how to create reusable templates with the aim of making the template as flexible as possible to keep message programming time to a minimum.
However, if you are keen to design and create your own email marketing template the following information should be of assistance to you:

General Design:

The design of a template is important to keep with and consolidate your branding, hence why a customized template should be used whenever possible.
Design to capture attention
Design the top of the template to be preview friendly. Many Email Clients (such as Outlook Express, Outlook 2003 & 2007, Lotus Notes, Yahoo BETA and Thunderbird) have preview windows. Therefore utilise these to your advantage. When designing think 'above the fold'.
At the top of the email provide a web link for readers to have the option of reading the email on a web browser. This enables recipients who have either received the text version or have images blocked, to easily view the HTML version in all its glory.
Have a separate area for subscription information, Company Name and contact details and Privacy Link. Make sure that you are compliant with the necessary legislation of your Country/State.
Have continuity with your emails, so be sure to have the information in the same place each time. As a rule of thumb, the above information is generally placed at the bottom of the template.
Make the width of your HTML between 500 and 650 pixels. This is standard width. It can be either left aligned or centered, depending upon the design of the template.
Aim to keep the overall weight of the email less than 100kb and never larger then 150kb.

Images:

When using Animated Gifs, be aware that Outlook 2007 does not display them in their animated form, but rather as a static gif - displaying the first frame of the gif. So, when designing these, design with the aim to have the end result show in the first frame.
Avoid Flash, as not all Email Clients can handle Flash. Outlook 2007 displays only a red cross where the Flash image should be. It is best to use a static image which then links to the Flash image, which is hosted on a web server and viewed via a browser.
Host your images rather than embed your images. This will assist with minimizing download time and thus increase readability of the message.
Add Alt Tags to your images. Whilst they don't show up in all email clients, if images are blocked, they do show up in the following: Gmail, Mac mail, Thunderbird and Outlook Express. Outlook 2003 & 2007 both show the Alt Tags, along with a warning. Note though, that in an email, if the image is also a link, then the link overrides the Alt Tag, therefore, when the image is moused over, the URL will display rather than the Alt Tag.
Design the template to still look good even if the email client blocks the images. i.e Put a background colour behind the image to match the background the image is sitting on. (Email Clients which have images 'blocked' as default are: Gmail, Outlook 2003 and 2007, Hotmail, Yahoo Beta and AOL 9)
Very importantly - do not design the template to be reliant upon images to keep its structure, for if an email client blocks the images, it may render the email unreadable

Copy:

Write to retain attention
Try and keep your copy so that it is a greater % than images. This will assist your spam score. Emails which have a higher % than text can find that they've been penalized in their spam score.
Put the important information - the offer or call to action at the top of the email. This allows for easy and quick viewing.
Make the subject line a headline. Draw the reader in by making it engaging and relevant. The subject line should be no more than 25 characters so that the entire line can be read before opening the email.
Write the copy so that it is scannable. Readers don't like to read hefty
Use bullets points to effectively get points across.
Link to external articles/items/products. This will keep the readers attention and it will also help you to track which articles/items/products are popular.

Coding:

Do not use Microsoft FrontPage, Publisher or Word to create the template. All of these products create their own version of HTML, which can cause many problems formatting & rendering problems. (see Microsoft Smart Quotes below).
Do not use any Comment tags. If creating the template using Fireworks, be sure to delete the Comment tags which it automatically creates.
Don't use XHTML, as XHTML incorporates other markup languages into the code. The template needs to be created using W3C compliant HTML. In email, XHTML can cause problems with un-closed tags and non-standard tag types and formatting, which will also cause rendering problems within many email clients.
Use Alt tags - Many email clients now block images by default, so make sure your alt tag is descriptive and if at all possible, entices the reader to download the image. Hence you can use images to encourage the reader to download the images and help to make your 'open rates' more accurate.
Use tables to create the structure of the email, rather than CSS.
Using CSS is recommended over using Font tags, however, instead of using CSS within the <Head> tags, or linking to external stylesheets, it is best to use inline CSS within the <body> of the emails, as recipients who use webmail clients such as Hotmail, Yahoo mail & Gmail will most likely receive the email with the CSS and <head> tags stripped out. However, the benefits to using CSS can be quite significant - such as getting around the coloured fonts and large fonts being penalized by Spam filters problem. Bear in mind that Outlook 2007 uses Word to render HTML emails and that Word only supports CSS level 1-which is quite basic.
Therefore, for the above reason, don't use any absolute, float or relative positioning, as these will be ignored in Outlook 2007.
Further Reading on CSS:
http://css-discuss.incutio.com/?page=StyleInEmail
http://www.alistapart.com/articles/cssemail/
http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/
http://www.sitepoint.com/article/code-html-email-newsletters
Background images are also ignored in Outlook 2007. You can still use background colours within cells, but not within entire tables nor within Div tags, and so if you're wanting to add a background image, then add a background colour of a similar shade to support it for the Outlook 2007 recipients.
Avoid HTML errors. Many ISP's will block HTML emails with coding errors within them and at the very least, you will incur some hefty spam score penalties. Something as simple as an extra tag can cause your email not to be delivered to AOL or the likes.
Avoid scripts. Most scripts, such as JavaScript and VBScript are stripped out of emails due to vulnerabilities within the email browsers. In fact many servers will just delete the message entirely. If you require these scripts, it is best to send your reader to your website where these scripts are accepted.
Avoid using Forms within emails - this is a relatively new tip. Previously, providing the form was carefully constructed, it worked in the majority of Email Clients. Now, however, with both Hotmail and Outlook 2007 not supporting forms, it is best to avoid using them and simply link to a web-based form instead. Outlook 2007 not only blocks forms form working, but it also changes the look of them, replacing the form fields with [brackets].
When using <font> tags, avoid large font tags and many coloured fonts (Red, green and blue are usually penalized by the spam filters). If you need to use these, then be sure to use CSS rather than font tags, as spam filters do not penalize CSS font styles.
Don't copy and paste into your template directly from Microsoft Word, as this will cause symbols to appear in your HTML where your apostrophe's, quotation marks, hyphens and arrows once appeared in your MS Word document. Microsoft Smart Quotes are a series of special characters that appear only in Microsoft Office Products. Because they are not default plain ASCII characters, they generally do not convert to standard HTML characters. As a result, many Email Clients have a difficult time rendering these characters correctly, often times substituting a question mark, symbol or small box in its place.
To solve this problem, disable the use of Smart Characters in your Microsoft Office Documents. In most versions it can be found under the Tools, Auto Correct, Auto Format as you type. Uncheck, "straight quotes" with "smart quote" and hyphens (--) with dash (-).
We also recommend that you "clean-up" your MS Word copy by pasting it into a non-Microsoft editor such as Notepad or similar program. This can help identify and aid the removal of any unnecessary characters.
Try using Microsoft's Outlook HTML and CSS Validator to check your newsletter. This validator will help your developer identify potential problems with Outlook 2007, while coding, so you can identify problems before even sending a test. This tool plugs into common HTML editors such as Macromedia Dreamweaver MX 2004 and Dreamweaver 8. The Validator plugin can be downloaded here: http://www.microsoft.com/downloads/details.aspx?familyid=0b764c08-0f86-431e-8bd5-ef0e9ce26a3a&displaylang=en

Deliverability:

Recommend that your recipients 'whitelist' you. This can only be done by actually adding the 'Sender to Safe Senders List' - not by adding the address to the contacts list.
Always create a text version to go with the HTML version.

Kath Pay is Marketing Director of Ezemail, an innovative company that provides comprehensive email marketing solutions. For more information on how easily email marketing can be implemented, please contact Kath at kath@ezemail.com.