HTML email

Overview

HTML email uses a subset of HTML 4.0 to provide formatting and semantic markup capabilities in email that are not available with plain text.

Most graphical email clients support HTML email, and many default to it. Many of these clients include both a GUI editor for composing HTML emails and a rendering engine for displaying received HTML emails.

It allows the sender to properly express quotations (as in inline replying), headings, bulleted lists, emphasized text, subscripts and superscripts, and other visual and typographic cues to improve the readability and aesthetics of the message, as well as semantic information encoded within the message, such as the original author and Message–ID of a quote.

Although HTML email development follows some conventions of regular website development, we have to consider the display criteria within email clients and webmail clients from all popular webmail providers, as well as supporting requirements for those across all of our supported browsers.

Users should be provided with a hyperlink so they can view the email as a web page. The code for this will vary depending on what level of personalisation is used.

Plain text email

A plain text version of any HTML email must be created and both offered to users. When delivering the email, your chosen distribution system will decide depending on the recipients’ preferences which version they receive so you will not have to worry about how to target different clients.

Plain text emails are to be written in Notepad or similar, should contain no formatting at all and be 70 characters per line to ensure they display correctly in the preview pane.

Legal requirements

Any marketing emails must offer an unsubscribe hyperlink or email address to users so they can be removed from mailing lists.

Design considerations

Designs need to be created with HTML emails in mind. They need to be static and cannot feature interactive or dynamic elements like JavaScript, Flash or Server side interaction. Video components are also not supported in many modern clients and should not be used.

Email width

Designs must be created to a maximum width of 600 pixels as this is considered the average size of webmail client preview panes.

The average preview pane is 300 to 500 pixels high, so all important content should sit within this area.

Images

Images should be exported for email in JPEG format for photographic or stock based imagery and gif format for any graphical element that uses text; including headers, navigation, icons, signoff signatures.

Animated GIF images are not supported in many modern email clients and must not be used.

Background images are not supported in many clients so must not be used on any area of the email that is to contain copy, only plain background colours should be used in these areas. The only areas where a background image may be used are:

  • as a decorative non repeating area of the design
  • as a static image such as a promotional banner where any copy is incorporated as part of the image (not overlayed)

In these cases the image should be able to be placed on its own in a table cell.

Development

  • DO use tables for layout purposes
  • DO use spacer gifs
  • DO use <br /> to create carrage returns and paragraphs
  • DO use background colours
  • DO set font styles using the font tag and its attributes
  • DO use absolute urls for all images and anchor tags
  • DO specify width and height for all images
  • DO NOT build the email wider than 600 pixels
  • DO NOT use a doctype
  • DO NOT use inline styles or style blocks
  • DO NOT use background images
  • DO NOT use dynamic elements such as JavaScript

Within the definition these guidelines we will refer to “spacer gif”. The spacer gif is a 1x1 pixel transparent gif. It is to be reused throughout the HTML email and sized as required to fill and hold open a table cell.

A doctype must not be defined, and the code must be well formed, featuring closing tags on all elements. The document head must be empty aside from a <title> and <meta> definition for the UTF–8 character set.
The basic structure of an HTML email is as follows;

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Title</title>
	</head>
	<body>
		<!-- content here -->
	</body>
</html>

Layout

All layouts must be of an HTML tabular structure. Nested table usage is promoted where necessary to achieve layouts where design criteria are more diverse.

Styles such as padding and margin must not be used to define or help to define layout.

The table dimensions: width, borders, cellspacing and cellpadding must be defined in each opening <table> tag such as;

<table width="600" cellspacing="0" cellpadding="0" border="0">

There is no requirement for <th>, <caption>, <colgroup>, <col>, <thead>, <tbody> or <tfoot> tags to be used.

Table cells

Cell backgrounds must be created by colouring the cell directly, dimensions should be defined on the cell and filled by spacer gifs;

<td bgcolor="#123456" height="50" width="50">
	<img href="https://www.example.com/spacer.gif" decoding="async" width="50" height="50" />
</td>

If a border is required, an element must be built with a container cell spacing an inner cell, using a spacer gif and coloured background to achieve the desired border width. CSS Styles should not be used.

Images can be stretched horizontally using pixel or percentage widths to produce effects such as horizontal shadows.

Please note it is not possible to stretch images vertically using percentage heights eg to fill a cell thats height is effected by dynamic content generation. Only pixel heights can be used on any images.

Vertical alignment of cell content is achieved using the valign attribute;

<td valign="top">

Horizontal alignment of cell content is achieved using align attribute;

<td align="right">

Styles

A style block or links to external style sheets must not be present within the document.

Inline–styles must not be used within the document unless:

  • To ensure that colour of the underline on anchor tags matches the colour defined in the anchors font tag. This is an issue that has been found in some versions of Firefox where the <font> tag will not colour the underline of an anchor tag.
  • Use of display: block; on all images to ensure images are displayed correctly. This is because images in Hotmail sometimes collapse even when a height and width have been defined.

Fonts and copy

All fonts must be styled using the <font> tag and following attributes.

Size
  • size="3"
  • Possible values: a number from 1 to 7
  • Browser default is 3
Colour
color="red" or using hex code color="#123456". Shorthand hex code usage is not advised.
Font face
face="Arial, Helvetica, sans-serif"

Font weight and emphasis must be changed using <strong> and <em> tags respectively.

Anchors

All links used must be absolute and specify that they are to open in a new window.

<a href="https://www.example.com" target="_blank" style="color:#FFF000">
	<font face="Arial, Helvetica, sans-serif" size="3" color="#FFF000">
		www.example.com
	</font>
</a>

If wrapping an anchor tag around an image such as for a button, ensure that the image has the border attribute set to 0.

<a href="https://www.example.com" target="_blank">
	<img src="https://www.example.com/example-button.svg" decoding="async" width="150" height="50" alt="Visit our website" border="0" style="display:block" />
</a>

Carriage returns and paragraphs

Copy cannot be defined with <p> tags (Hotmail does not recognise this tag correctly), instead the content must be spaced using <br /> tags

To create a carrage return:

<font face="Arial, Helvetica, sans-serif" size="3" color="#FFF000">
	text
	<br />
	carriage return
</font>

To create a new paragraph:

<font face="Arial, Helvetica, sans-serif" size="3" color="#FFF000">
	Paragraph 1
	<br />
	<br />
	Paragraph 2
</font>

Images

All images must have height and widths defined and should have a file size no larger than 30kb each. Larger images should be sliced into smaller sections where necessary.

The JPEG format should be used for photographic or stock based imagery and the GIF format should be used for any graphical element that uses text; including headers, navigation, icons and signoff signatures. However animated GIF images are not supported in many modern email clients and must not be used.

Many email clients automatically block images so in all instances alt attributes must be used to define the content of the image (an alt attribute is not required for spacer gifs).

Background images should not be used as these are not supported in many clients, instead background colours on table cells should be used.

Links to images must use a full, absolute path.

<img href="https://www.example.com/spacer.gif" decoding="async" width="1" height="1" style="display:block" />

Scripting

Functional or interactive content, such as JavaScript, must not be used. This includes JavaScript blocks and the loading of external scripts anywhere within the document.