Using images

To use images within an HTML email you must place the images on a web server and link to the absolute path of the image. It is not possible to send the images along with the email.

e.g. <img src=”http://www.yourwebsite.com/email/images/graphic.gif”>

Table layouts

Most email clients sadly don?t comply with the W3C HTML/CSS specification and therefore building an HTML email based using those guidelines is likely to lead to inconsistent results so tables must be used for layout.

It is also important to consider when designing an HTML email that all the content must fit into a grid like layout so that it can easily be converted to HTML without the need for lots of nested tables.

If the design is complex then it is better to split the table out into separate tables than to try and include everything within one table using multiple rowspan and colspans.

Styling the body

Within HTML email it is not possible to style the body tag. This is because web based email clients will already contain a body element and therefore nesting a second body element wouldn?t make sense in the structure of the document.

To get around this problem, simply wrap the entire content in a div or table tag and style that element as though it was the body (you?ll probably need to set the width=”100% on the div/table too).

Using CSS

CSS can be used in most email clients but should only be used for styling text. CSS positioning (absolute, relative, floats) are not consistently supported by email clients and should be avoided. Use tables for positioning instead.

External CSS (avoid)

Some email clients will accept external CSS but the majority of email clients will strip out any linked to CSS (Outlook 2007 and Gmail do not support this) and therefore it is not advisable to use an external style sheet.

Embedded CSS (avoid)

As with external CSS, some email clients will accept embedded CSS but the majority of email clients will strip out any that is embedded and therefore it is not advisable to embed CSS.

The only exception to this is when you want to enhance the style of HTML email for those email clients that allow embedding, in which case you must ensure that the <style> section is placed at the beginning of the body. (An example of when this can be used effectively is for controlling the hover style of a link element).

Inline CSS (recommended)

Nearly all email clients understand inline CSS, so it is recommended to control the style of all elements by writing inline CSS on all elements that you want to style.

Font Styling (recommended)

All email clients understand font styling but as the font sizes are limited compared to inline CSS, it?s recommended to use both so that those that understand inline CSS will use it but any that don?t will fall back and use the font alternative.

Alt Text

Where images are required to give meaning (e.g. a product image) it?s important to include alt text which is displayed to the user before images are displayed so that they receive a similar experience to users who have enabled images.

However, some email clients do not display alt text and therefore it?s always advisable to include call to actions as text based hyperlinks.

Table Cells

When content is within a table cell, it can help to reduce the amount of bugs in email clients by ensuring that there is no white space within the td.

Flash / JavaScript / Ajax / ActiveX

Some web based email will allow you to embed client side code within an HTML email, however all desktop software will not run client side code and should be avoided.