An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL

An Emailcenter briefing: Can your customers read your email newsletters? An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL November, 2004 Emailcenter research has shown that around half of the emails received from leading consumer facing organisations in the UK will not display as intended in the majority of customers inboxes. This occurs, as the sender does not take into account the limitations of their recipients email clients in rendering HTML. This has a considerable impact on the sender including: Negative perceptions of the senders brand from recipients An increase in the churn rate of the newsletter list with increased numbers choosing to unsubscribe A higher risk of being reported as SPAM from disillusioned customers who cannot read the email Lost revenue This briefing explains the limitations of email clients in rendering HTML messages including: A general overview of best practice Specific information on the main email clients including Hotmail, Yahoo, Lotus Notes and AOL Available design workarounds to ensure your message is displayed correctly without losing the desired look and feel of the email message Four suggestions to help you overcome these limitations Who is this briefing for? This briefing is of a relative technical nature. Many of the issues are technical HTML issues that can only be answered with a technical answer. Therefore this briefing will be suitable for: 1) Marketers who want to learn about the potential issues they have with their HTML templates and the limitations of email clients 2) Web designers who have a requirement to design HTML email templates 3) Marketers who need to brief a designer on their requirements or are building a specification document for their HTML template About Emailcenter UK Emailcenter UK provides permission based email marketing services, software and solutions. Please visit us at. 1

Introduction Designing a HTML email is far more complicated than a web page. Often marketers and designers will see several hours of effort in designing a message ruined when a particular email client mangles the code to display something like the email received to our email account below: The reason for this is most email clients have limited HTML rendering capabilities. After all they have been designed as an email messaging system and not as an Internet browser. The following sections of this briefing discuss the specific limitations of email clients in rendering HTML. General rules These are the design rules that every email should observe. Scripts and Dynamic HTML Virtually all of the main email clients cannot process scripting languages such as JavaScript. Indeed many ISP s seek out JavaScript in an email and strip it out as they view it as a security threat. We have also seen whole emails being quarantined and blocked because they contained JavaScript. Here are some of the other technologies that should be avoided in HTML email designs: ActiveX Audio External Style Sheets Frames and IFrames Java Meta Refresh JavaScript, VBScript, Perl etc MIME Format Research into Emailcenter clients email lists has shown that around 5% cannot read HTML email and can only accept plain text emails. Around 99% of the recipients on a list use a MIME compatable email client. MIME format is where both a HTML message and plain text message is delivered to the recipients server where it is determined which is most suitable to place into the recipients inbox. Frames Frames cannot be used in constructing a HTML email message. 2

Images Images should always be referenced by providing the full absolute image location. For example, a correct piece of HTML code would read: <IMG SRC= http://www.yourwebsite.com/images/logo.gif> An incorrect piece of HTML code would be: <IMG SRC=../images/logo.gif > In this instance the recipient would not be able to find the image to display. In addition embedding images within the email message should never be used. This increases the size of the message dramatically causing you to encounter deliverability issues with ISP s and corporate firewalls quarantining and rejecting emails that have a large file size. You will also quickly fill up limited space in your recipients inbox and therefore they are less likely to keep your email in the fear of going over their allocated limit. Image blocking Most email clients now offer image blocking as means of reducing spam. This will mean your images could be greyed out if the recipient has this feature turned on. If you have not included the image dimensions in the HTML then the layout of your email will be affected. This is an example of what your email will look like in an email client blocking the images. Users simply have to press a button on the toolbar to show the images. Long lines of HTML code We have identified errors occurring in Outlook where the HTML message contains a long line of code of over 512 characters without a line break. Typical errors that occur are exclamation marks appearing in the HTML at 512 characters on the line. To avoid this simply break up the HTML code onto separate lines so that all systems can parse it. From this example you can see a random exclamation mark appear. The line of HTML code being too long causes this. 3

Hotmail & MSN Hotmail is the most widely used email client by consumers in the UK. Our research has shown that in a newsletter list of a leading travel company, 40% of the email addresses were either Hotmail or MSN. Width of the email Keep this to 590 pixels. Remember the space in Hotmail to display your email is limited as advertising and menus are also displayed. We have seen errors creep into the display of an email in Hotmail due to the excessive width. For example in one campaign a price of 399.99 changed to 39999 after the table cell this was contained in was squashed by the Hotmail client and the decimal point was no longer visible. CSS and Head tags The <HEAD> tags in a HTML document normally contain the cascading style sheets used to define the formatting of text and links. However Hotmail will ignore the contents of these tags and therefore your email will lose all of its intended formatting. This can cause problems such as text which the designer set to be white on a dark background will become invisible to the recipient. The simple solution to this is to move your CSS code to after the <HEAD> tags to between the two <BODY> tags of your HTML. Example: Example of an email with CSS placed within the <HEAD> tags. Note the difference in fonts and colours. In this example the offer text does not stand out. How the email should look with the CSS correctly positioned in the HTML. 4

Body tags Body tags such as those shown below will not work: <BODY BGCOLOR= #FFFFFF TEXT= #000000 link= #003366 > Instead CSS or coding of all paragraphs and links should be used. Example: <A HREF= http://www.mycompany.com > Text for link</a> Forms Hotmail only likes forms that use the GET method and not the POST method. There is also a buffer limit of 4096 characters that can be parsed. Hotmail s own advertising guidelines also state that you should not use a field in the form called PageNum as this will cause a clash with a field name Hotmail uses and it will break the form. Hyperlinks Hotmail has its own standard style for text links with its own font, colour and size. This means that wherever you have a hyperlink you must specify the font, the colour AND the size of the text with the link tag. Even if you previously defined the font face or size for the block of text the link appears in Hotmail will still overwrite the link formatting. Examples: Incorrect Paragraph text <A HREF= http://www.thelink.com > Link text </A> Hotmail will overwrite the formatting of the link with its own default link style. Correct Paragraph text <A HREF= http://www.thelink.com > Link text </A> The above example now has an additional set of tags highlighted in red within the link tag to stop Hotmail applying its own style. 5

Yahoo Yahoo treats email in a similar way to Hotmail but does not have as many constraints. Width Yahoo advertising specifications recommend you restrict the width of an email to 500 pixels although they go on to say 600 pixels is acceptable. CSS, Head tags, Body tags and links Yahoo does not strip the <HEAD> tags so CSS can be placed in here if preferred. However Yahoo like Hotmail does not use global colours and styles that are defined in the <BODY> tag. Similar to Hotmail links are also given a default style by Hotmail unless the extra coding within the link tag is used. Forms Forms with a GET or a POST action will work in Yahoo. Outlook and Outlook Express Outlook and Outlook Express are by far the most advanced email clients at displaying HTML email. The only real limitations are: Scripts and forms do not always work in the preview pane the recipient may have to open the email in a new screen to enable this functionality There is no limit on width but an email of 600 pixels will ensure scrolling is kept to a minimum for users reading the email in the preview pane HTML emails using frames do not work. Outlook and Outlook Express now have image blocking features so this needs to be considered when designing your emails. 6

Lotus Notes Out of all the main HTML email clients Lotus Notes is by far the worst at rendering HTML. According to IBM a total of 95M people use Lotus Notes worldwide and this can make up as much as 20% of a B2B newsletter list so is therefore important in considering when designing your emails. Tables Lotus Notes has difficulty in rendering table widths correctly. In particular where there are tables within other tables the end result is often horrific. A typical example of the result is shown below: The way round this is to have a table of a single cell constraining all of the other tables. In addition graphics and spacer images should be used to control the width of the table. The width of these cells can then either be taken away or set to a much lesser width than the width of the image. This tricks Lotus into displaying the table cells only as wide as the images. CSS Using CSS causes a number of problems. Lotus Notes very rarely interprets the CSS anywhere near correctly and as a result your email might have font sizes of around 48pt. The solution to this is simply not to use CSS. Anchors Named anchors that take you to another part of the email do not work in Lotus Notes. Lotus Notes will attempt to open a new window instead. Background images Background images in table cells do not display in Lotus Notes. 7

AOL The HTML rendering of AOL has improved over the last few releases. Previously links could not be clicked but had to be cut and pasted into the browser! Nowadays most AOL users will be using an up to date version of AOL so most of the old problems have disappeared. Head Tags and CSS AOL like Hotmail does not use anything you placed in the <HEAD> tags so therefore any CSS needs to be within the two <BODY> tags to retain formatting. Background images Background images do not display in AOL so you either will have to use the image as a standard image or find another way of achieving the look you require. Example of how the email looks in AOL without background images displayed How the email is intended to look Width The width of the email is not too important in AOL but 650 pixels should be considered as a maximum to improve readability. Special Characters AOL cannot read special characters and characters that use the HTML code. For example if you use for displaying speech marks in your HTML as opposed to simply " then AOL cannot read it and will display a instead. Anchors Although anchors do work in AOL they don t work very well. When clicked upon, a new window is opened like with a standard link. Although in this new window you are taken to the correct point in the email this is not very user friendly. 8

How can I overcome these limitations? Here are some recommendations to ensure you avoid the common pitfalls in designing HTML emails. Create separate versions of your email If you are having specific trouble in altering your design for someone like AOL or Hotmail then you could create a separate version specifically for one type of email client. However this is something you can only do with the web based email clients as you can easily identify them in your list. Lotus Notes users cannot be identified. Use content management software Content management tools that control what areas of a template can be edited, what fonts and styles are used are ideal for email template editing. These systems enable you to define what HTML tags can and cannot be used, therefore reducing the chances of emails being produced that are not compatible with certain email clients. Create seed accounts The only guaranteed way of ensuring your emails will appear correctly in each email client is to test your campaign before it finally gets delivered. Simply create seed accounts with AOL, Hotmail and Yahoo to achieve this. If you need to test your email against Lotus Notes a 90 day trial can be downloaded from the IBM website. Standardise on your templates Do not change your entire template for each email you send as this increases the risk of including incompatible HTML code. Simply create a standard template in which the content can be changed each time. Notes: The following email clients were tested: Hotmail Yahoo Outlook & Outlook Express (2000 XP) Lotus Notes 6.5 AOL 8.0/9.0 9

About Emailcenter UK Emailcenter UK provides a number of services, solutions and software for organisations looking to run permission marketing campaigns to their customers and prospects. Our solutions include: Maxemail A robust and scalable email campaign management and delivery tool that enables marketers to track each campaign and automate the management of unsubscribes and bounces. Maxemail is used by a wide variety of organisations including P&O Cruises and Saga Holidays. Maxemail is available as a hosted ASP solution or as a licenced software application for in house deployment. Additional modules provide marketers with a wide variety of additional benefits: Content Management module This module enables marketers who do not have HTML knowledge the ability to edit and create HTML templates without requiring input from designers or agencies. Benefits include: Ability to lock down areas of the template to ensure key elements of the HTML are left untouched Define the HTML that can be used to ensure compatibility with all major email clients Reduced load on your website with an outsourced image server Profile, Surveys and lead capture module Additional data capture pages can be created with this module that enable you to build an in depth profile of each recipient for future segmentation and personalisation. Benefits include: Append data from unlimited sources such as purchase databases or telemarketing campaigns to a recipients profile Segment or personalise on any criteria collected Create surveys, profile pages or event registration forms Advanced Reporting Module The Maxemail Advanced Reporting Module enables marketers to gain an in depth understanding of exactly how their email marketing is performing. This goes beyond providing basic statistics on a per campaign basis with full analytics showing trends across multiple campaigns. Benefits include: Save each recipients campaign activity against their profile for future segmentation of your campaigns See at a glance the top or bottom 10% performers in your list Report on your campaigns over time to identify key trends If you would like to learn more about Emailcenter UK and our solutions visit us at or call us on +44 (0)1327 810080. 10