How to create HTML for modern email clients
A guide for designers and marketers
Outlook, Hotmail, Yahoo!, AOL and more recently Gmail- the number of different email systems people use to read email in the UK market is seemingly endless. Email marketers need to be aware of how different email clients display html. Otherwise, messages can become mangled. This results in ineffective marketing communications, negative brand perceptions and wasted budget. The marketer responsible for sending often does not know that distortion has taken place.
The purpose of this document is to help designers and marketers alike understand email HTML to help maximise your readability, deliverability and campaign effectiveness. It covers:
- Overview of HTML and glossary
- HTML code considerations
o Web site code that does not translate
o Getting the size right: Preview panes and email widths
o Forms
o Images
o Style sheets
o Other problem HTML tags
- Don't forget the text version
- 5 tips to ensure your emails work cross platform - About Adestra
Recently, we've added a preview option in our message editor in our Message Focus email marketing tool that allows you to test your HTML designs in different email systems before sending. In the course of our research, we discovered many differences in the many different email clients and I'm glad to be able to share this with you in this guide. I hope it is useful.
Steve Denner, Client Services & Development Director, Adestra
Overview of HTML
HTML emails were first popularised by the inclusion of HTML support in Microsoft's Outlook and Outlook Express email clients. A technology called MIME (Multipurpose Internet Mail Extension) had been used previously to attach files to emails, and was employed to allow emails to contain both text and HTML parts in a "multipart/alternative" wrapper. This wrapper allows the recipient's email client to pick the 'part' of the message that they can display.
Typically email clients that support HTML use a web browser used to display the HTML to the user (for example Microsoft Outlook, Outlook Express and many other email clients use embedded versions of Microsoft's own Internet Explorer web browser to display HTML).
As the growth of spam took hold, HTML email clients evolved to protect users from these risks including spam filters and the blocking of certain HTML techniques employed on web sites. Designing HTML for email is hence different to designing for a web site.
The purpose of this briefing is to give marketers an understanding of the creative restraints email designers are working under and provide designers a practical checklist of rules to adhere to ensure their messages look as intended in different email systems.
HTML code considerations
When crafting a HTML email, it is important to be aware of some of the major differences between designing HTML for a web page and for an email.
The major differences are:
o Web site code that does not translate
o Getting the size right: preview panes and available spaces for displaying emails in web mail systems
o Forms
o Images
o Style sheets
Each will be discussed in detail in the coming pages. At some points, a working knowledge of HTML is assumed, but in each section a short summary of the main lessons are presented.
Frames and Iframes
These should be avoided. Frames and Iframes (Inline frames) are also often used on websites to include one document inside another. Some older email clients will permit them, but the majority of email clients will remove them.
Things to avoid
- Javascript
- Flash
- Frames and Iframes
- Plugin technologies such as ActiveX, Java Applets, etc
Things you can do
- Replace Javascript rollover effects with CSS effects
- Replace Flash animations with animated GIF images
Getting the size right: Preview panes and email widths
The preview pane is a means to display (or 'preview') emails in the same window as the email list to allow users to quickly see an email's content. This has implications for design in that it is key that 'hooks' are positioned 'above the fold' to grab potential reader's attention.
