HTML Template Design Tips

HTML Template Design Tips

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:

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
Write to retain attention
Design the top of the template to be preview friendly.
At the top of the email provide a weblink for readers to have the option of reading the email on a web browser.
Recommend that your recipients 'whitelist' you (i.e add you to their contacts list)
Put the important information - the offer or call to action at the top of the email -allow for easy and quick viewing.
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.
Have a separate area for subscription information, Company Name and contact details and Privacy Link.
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.

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.
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.
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 a combination of tables and inline CSS (Cascading Style Sheets).
Using CSS is recommended over using Font tags, however, instead of using standard CSS within the Header, or linking to external stylesheets, it is best to use inline CSS, as recipients who use webmail clients such as Hotmail, Yahoo mail & Gmail will most likely receive the email with the , and 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.
Further Reading:
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
HTML errors. Many ISP's now will block HTML emails with coding errors within them. Something as simple as an extra tag can cause your email not to be delivered to AOL or the likes.
Don't use any absolute or relative positioning.
Avoid scripts. Most scripts, such as JavaScript and VBScript are stripped out of emails due to vulnerabilities within the email browsers. In fat 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 large font tags and many coloured fonts (Red, green and blue are usually penalized by the spam filters)
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, most 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.

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.