HTML Email Design: Best Practice

HTML Email Design: Best Practice

Best Practice HTML Email Design Recommendations

As there is no universal format for emails, please consider the following guidelines when designing your HTML for an e-mail campaign. This will ensure that the lodgement of the job is efficient and effective.

Clean code: The cleaner the code, the greater the potential for consistent delivery of the message to all recipients. Code with redundant or excess tags will raise the spam score and may interfere with the rendering of the creative.

Layout limitations: The typical email client is quite similar to a web browser from 1999, with limited or inconsistent support for modern HTML and CSS. Tables should be used for layout rather than divs as they are sturdier. The width, cellpadding & cellspacing should be declared for each table as many email clients like to fill in the blanks themselves which can ruin the email design.

Keep image file sizes small: You have only a few seconds to grab the recipients attention, don’t waste it with large images that take too long to load.

Keep HTML & CSS clean and simple, use tables for positioning, not layers or divs: Many email clients have poor support of advanced HTML & CSS.

Use a combination of images and text in plain HTML, don’t use an all-images creative design: Images may be blocked by some email clients.

The copy in your email and the nature of your offer are more important than the design of the email: Don’t sacrifice the readability just to have a fancy looking creative. Focus more on what you are offering and how you are saying it.

The majority of text in your email should be plain text and HTML. Do not put the main body text of your email in an image. Images may be blocked by some email clients, therefore your recipients may never read your email!

Text within images is only suitable for headings and graphical elements that are not critical to the main campaign. Specifying alt text for these images ensures your email is still readable if images do get blocked.

Make sure text is easy to read. On a white background, text should be black, not light grey. Light grey text may look good, but will be unreadable for many users with poor eyesight or a lower quality monitor. For other background colours, consider choosing a text colour that gives thehighest possible contrast.

Minimum font size for main body copy is 10 point. Only secondary content such as terms and conditions can be smaller. We recommend the Arial font, or a similar sans-serif font. Studies have shown that a sans-serif font such as Arial is more readable on a computer screen, and Arial matches the PermissionCorp header and footer.

Remember, what good is a fancy email design that looks great, if half of the campaign recipients cannot read it? Try to design your HTML as close to the guidelines set by The World Wide Web Consortium (W3C). A useful tool to determine your EDM’s compliance with these guidelines is available online.

HTML & CSS

The HTML & CSS should be coded by hand to ensure clean, compact code.

Please do not use Word’s “Save As HTML” feature, and we recommend you do not use Microsoft Frontpage or any other WYSIWYG web design software.

Do not use global CSS selectors, use inline styles only.

Characters used must be from the US-ASCII character set printable characters 0-127. For characters outside this range use a suitable replacement. For example, two dashes for one emdash, or &copy for ©.

Always specify alt text for images that have a context or meaning important to the campaign message or desired action. For unimportant images used for decoration only set alt=” “.

Link all images and URLs.

Do not use CSS absolute positioning, divs or layers as these features are not supported by some email clients. While not recommended for web pages, tables are still the best way to layout HTML emails.

Do not use Java, Javascript, forms, frames, ActiveX, animated GIFs or Flash.

Use background images as secondary design elements as they will not display in some email clients.

Do not use image maps.

Do not use <body> tag attributes (bgcolor, background, etc.) and do not apply any markup or styles in the section. Web based email clients will often filter out this code.

Multimedia & attachments

Do not use Java, Javascript, VBScript, forms, frames, ActiveX, animated GIFs, Flash, or embedded video.

If you do use any of these interactive or multimedia features, there is a very good chance that either the email will be blocked by spam and virus filters, or the email client will not display the content correctly.

Call to Action: Treat your EDM like any direct mail piece, make it clear, engaging and evoke a compelling call to action.

Body Copy: Long copy can be a motivation killer for any communication piece. Try to keep the amount of reading to a minimum with plenty of white space and well distributed short paragraphs.

Images: Alt tags – Be aware that many email clients have a default setting that prevents images from downloading automatically. For this reason, it is always a good idea to use alt tags (short descriptions) for all of your images, especially images that are intended as headlines or subheadings. It will also aid those who are vision impaired and have text to speech software installed.

Avoid putting key information in images that may be missed if the images are not downloaded.

Height & width attributes – Provide explicit height and width attributes for the “img” elements in HTML emails. This ensures that if a customer views your email but does not download images, the image dimensions are shown correctly. If not, the image dimensions may stretch or distort, affecting the rest of the content.

Include style=”display:blank;” attribute, This style is necessary to avoid additional white space being added to the bottom of the image in some email clients such as Hotmail.

Things to Avoid

Background Images: It is best to avoid these as many popular email clients strip out background images e.g. Hotmail, Gmail, Lotus Notes

Dynamic Content: Flash, JavaScript, java applets, DHTML & iFrames are not supported by the Flash & JavaScript campaign software and are not universally recognised by email clients/programs. It is best to avoid all dynamic features, instead, use compelling hyperlinks to your website where content of this nature can be viewed.

colspan & rowspan: These tags have a tendency to be interpreted poorly by email clients. As an alternative, try nesting tables within tables and use accurate measurements for your table cells.

td height:” “: The td height attribute tends to be inconsistently interpreted by email clients and our campaign software. For this reason, it is best to include the height attribute as part of the image element or as a table attribute.

Words to Avoid: The following are just some of the phrases that attract the attention of spam filters and should be avoided within your email body copy (nb: this is NOT a complete list).