Becoming an expert
starts here
HTML email design
HTML email design can sometimes be a headache for marketers. Getting the design right is never an easy task, especially as there are many different email browsers, all which display emails different. Even if you have a design you’re happy with, it could end up faltering later on. No HTML email template is future-proofed.
HTML email design is an ongoing process involving frequent review of design methods. This document can be used as a current guide to assist in HTML email design.
Tables
- All email communications should have their content housed within a fixed width (pixels, not percentage) table. This provides greater control over the display of the email, regardless of what email browser or screen resolution the end recipient is using.
- Avoid nesting too many tables within each other. Certain email clients produce inconsistent results when there is more than one level of nested tables (i.e. a table within a table).
- Always define table, row, column and cell widths (and height where applicable).
- When defining table, row, column or cell heights, remove non-breaking space tags ( ) for low height settings.
- Use tables as much as possible to define placement, rather than using line or paragraph breaks. Avoid using the spacebar to position your content.
- Avoid using cell padding and spacing as not all email clients support this feature.
Images
- Background images should be avoided, as some email clients such as Outlook 2007 do not display them. However, they can still be used if they are not critical to your message and do not affect the look and feel of your email if the image is not present.
- Include alternative text for all images in an HTML email.
- Animated GIFs are not recommended, as they do not fully render in some email clients. If they are used, keep in mind that the first frame of the GIF animation may be the only frame to display, so your main message should be displayed there.
- Most recipients will not be able to view Flash in HTML emails. Link to Flash content on a landing page instead.
- Always include the width and height in the image tag.
- Stretched images may not render correctly in some email clients. All images should have their correct dimensions in the file properties.
- Images should be set to border=0 by default, unless you specifically intend to design it with a border. However, image borders are not fully supported.
- Avoid relying on vertical and horizontal spacing for an image, as it is not fully supported.
- Use style=”display:block” to avoid spacing issues with email clients such as Hotmail viewed through Firefox.
Text
- Define font size in pixels, not points. Pixels are the web standard measurement. Points are absolute lengths and different browsers and platforms may display these values differently.
- Use one or two different types of fonts at maximum and provide a sufficient list of alternate fonts in the style class. Fonts should be listed in terms of: desired, acceptable, generic (e.g. Arial, Helvetica, Sans-serif).
- Avoid ASCII characters, such as curly quotes, copyright symbols and special characters. Always use HTML equivalents instead.
- The following codes are allowed for font styling (refer later to CSS). These can be used as needed, or as one inline set: Font-family, Font-size, Font-style, Font-Weight.
- Some email clients create automatic links for any text that it reads as a web domain (e.g. .com, .co.uk, etc.), even if you haven’t specified it as a link.
- Avoid vertically aligned content regions where height is determined by text, since some email clients display blocks of text with slightly different leading and kerning.
Cascading Style Sheets (CSS)
- Cascading Style Sheets are not recommended. Instead, styles should be coded as inline styles to prevent certain email clients from removing CSS headers.
- If CSS is used, avoid embedding above the <body> tag.
Tags
- Avoid using <p> tags as they may create display problems in some email clients. If required, use two
tags between paragraphs. - Frames, iFrames and framesets are not allowed.
- Define style attributes in the nearest <td> or <a> tag.
- Forms, such as surveys, questionnaires or subscription forms, are not recommended due to inconsistent user experiences and results captured. It is better to use forms on landing pages rather than within the email.
- Avoid empty lines of code and spaces between an <img> and </td> tag. Some browsers may read this space as an actual space in the overall layout, which can lead to misaligned graphics.
- Ensure all tags are properly closed; many email clients produce significant rendering errors if tags are not closed properly.
For more detailed information on creating HTML emails, contact our design team.