An HTML Email is anything but basic HTML. Of course, that’s if you’re referring to basic HTML as it relates to current standards. HTML Emails follow the outdated standards of table based layouts and inline styles. It is nearly impossible to create an HTML email that will be pixel perfect across email clients, not to mention the original art files. When beginning an HTML email project, it is likely more realistic to plan on controlling how your HTML will fail instead of planning on it not failing at all. One of the client’s recipients is bound to be using an email client that you were not prepared for and the email will break. Hopefully it won’t break badly, but the end result is unavoidable.
HTML Tables
It goes against every rule of modern web development best practices, but HTML emails need to be developed using Tables and inline styles instead of divs and cascading style sheets. Divs and styles will actually work in some modern email clients; however, not all will render a reliable result. As such, we must rely on the solid structure offered by HTML Tables.
Your email content should be wrapped in a containing table with its width set 100%. This will allow for the email to fill the width of the email client and background colors will be easily viewed as intended.
Properly nested tables are essential. To keep the composition clear to other developers and make the code easy to scan for code reviews, code with the intention of proper indentation. Proper indentation can make it easier to follow your nesting structure.
Avoid complex rowspans and colspans. Over-using these attributes can make future updates a nightmare. These attributes should not be used concurrently within a single table.
Specify the width in each of the table cells and not the table itself. Any required padding should also be added to the table cell using "cellpadding" or CSS padding – but NOT both.
Inline Styles
Styles should be kept as simple as possible and written inline. Certain email clients, especially Gmail, do not support embedded or external CSS. General style properties, such as font type, size and color, can be specified in the "table" tag, but more specific styles should be placed with in the "td" tags. Examples of styles and their acceptance:
- Good Support: font-family, font-size, font-style, font-weight, color, padding and border
- Limited Support: margin, line-height, background-image, background-position
- Padding is universally supported – always use padding instead of margin
- No Support: clear, float, list-style-image, position, z-index
Do not use CSS shorthand when applying inline styles. Specificity helps ensure acceptance. It’s also important to note that some email clients do not support 3-digit hex color codes. You should always use the full 6-digit hex color code (e.g. use #999999 for grey, not #999).
GOOD
<td style="font-family: sans-serif; font-size: 12px; line-height: 24px; font-weight: bold;">
BAD
<td style="font: bold 12px/24px sans-serif;">
Block Level Elements
You should always enclose all of your copy within <td> tags instead of the traditional <p> tags and header tags, such as <h1>, <h2>, etc. Not only do some email clients strip out <p> and headline tags; but also certain email clients, like "Yahoo!" and can adversely affect your layout by adding additional spacing (padding) because of the use of that element. If you must wrap your text in something within the <td>, always use a <span> and style it accordingly.
Images
The default setting for most email clients is to disable image downloading. It’s safe to assume that the images in your layout will not be seen, at least upon initial load. Important things to keep in mind when including images:
- Include "alt" attributes
- Add style="display: block;" to images to prevent gaps underneath them
- Use "gif" and "jpg" images and not "png"
- Always include height and width attributes
- Use absolute paths and not relative paths
- Set border attribute to "0"
You can also include font and color properties in your img tag. Some browsers will honor the additional attributes and result in styled "alt" text.
Generally when "wrapping" text around an image in an HTML email you can accomplish the task by faking it with nested tables. However, you can also wrap text around an image by specifying the "align" attribute within the img tag. By default, you can assume it is going to break in at least Outlook 2007 and all of the text will crash into the image as it wraps.
To correct this, specify the hspace/vspace attributes of the img tag. This will account for horizontal and vertical spacing. For instance hspace="10" is the same as 10px left/right padding.
Links
Email clients often revert link colors to the default blue with an underline. You can include your custom color and text-decoration in the "href" tag, but to ensure that it is properly rendered by the email client you should also nest a "span" tag with the same styles applied.
<a href="link" style="color: #0E0E0E;"><span style="color: #0E0E0E;">Link</span></a>
Note in the previous example that the link is set to a very dark grey and not black as may be needed to match the text of the email. This is because Gmail will not allow the use of "pure black" or #000000 when styling links.
Include a "target" attribute in your links to external resources so that anyone viewing their email in a browser based email client will have the link open in a new tab/window instead of within the email client interface.
All emails should include a "view in browser" link.
Interactivity
No JavaScript, no Flash, no Videos…
Margin and Padding
Not all email clients honor margin but tend to work fairly consistently with padding. Which once again means that results may vary based on the email client. It’s best to nest table cells to accommodate important layout conditions rather than relying on margin or padding.
- Don’t use margins – ever
- Use cellpadding and cellspacing where appropriate, verses CSS padding.
