HTML email basics

It's not quite the same as creating a web page

On this page:

Background about HTML email
Good practices
Useful tips

Background about HTML email

In this modern world of web design and development there is a part that lags behind. Its name is HTML email and it likes to make our lives awkward. We are forced to use outdated techniques for constructing email templates, primarily because of the prevalence of email clients that still rely on old technology to render the HTML.

There are quite a few modern email programs that utilise modern web standards, so we could create some pretty slick HTML email designs. However, in this case we have to work toward a lowest common denominator, if only for our sanity, subscribers' expectations and the benefits to the marketers and the systems they use to send them out.

The key benefit of CSS – that of writing one set of styles and seeing it applied across a whole document – has to be left out of HTML email design. We can still use styles, but we have to apply them directly to our tags – what is known as inline style. It brings its own set of problems, but they are not insurmountable.

Good practices

Start your email design in Photoshop. You'll have more control over establishing the initial structure of your design.
Use a standard grid that gives enough flexibility to vary the layout of content while being able to be used across multiple email templates.
Avoid unnecessary frippery. Too many elements will distract from the email's message and be time-consuming to construct.
Even though we create a wide range of HTML emails that have unique messages, they exist under one brand. Standardising the look and feel enables us to better manage and re-use our markup with the beneficial side effect of design consistency for those on the receiving end of these missives.
It can be helpful to the marketers who edit our HTML for us to include comments within certain parts of the markup. HTML email markup can get quite cumbersome, so it'll help you and the editors to keep on top of what goes where.


									
										<!-- Article start -->
										<p>Some copy within our email template.</p>

The first line is our comment, this won't show in the email client or browser but means we can easily track what goes on behind the scenes.

Useful tips

When constructing HTML emails, of which a separate article is solely dedicated, there are a few things worth noting to avoid infuriating incidents.

Images

To keep the old skool email clients content, we must specify a few specific attributes for the <img /> tag. Take a look:


									
										<img src="myimage.jpg" height="45" width="120" style="display: block;" />

The image tag with the correct attributes for HTML email.

First up is the src attribute that allows us to point to the image we want to use. The second and third attributes relate to the image's dimensions. These are critical and must match exactly the image's true dimensions. Lastly and most importantly is the inline style attribute. This must only say display: block;. It means the image will now be treated as a block element (rather than inline). We do this so that in older email clients there won't be any strange spaces or borders occurring around the image.

Columns

Every opening <td> tag in your HTML email should have a width attribute.


									
										<td width="200">

Opening column tag with width attribute defined.

Tables

All your <table>s should have these attributes, set as shown, by default.


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

Every table needs 'em.

Apply a total width (width="200") when you've finished applying the columns you need for the table.

Document set up

Every HTML email document needs the following:


									
										<!DOCTYPE html>
										<html>
										<head>
										<title> ... </title>
										<style type="text/css">
										a img{border: none;}
										</style>
										</head>
										<body style="background-color: #ffffff; color: #333333; font-family: Helvetica, Arial, Verdana, sans-serif; margin: 0; padding: 0;">
										...
										</body>
										</html>

Basic HTML email document set up.

It shares some essentials with a standard HTML document, like the document type, but beyond that is mostly a cut down job, with lots of inline styles.

The style tag in the <head> contains one style that makes sure any image tag sat inside an anchor does not get a border applied. Quite a few old skool email clients will render these by default, so we apply this style to avoid it messing with our beautiful design.

The inline styles on the <body> are there to help us define some global styles. These will get stripped out in some email clients, so make sure you at least apply font-family, to all text tags to make sure the your chosen font is rendered.

Inline styles

Keep all inline styles written in alphabetical order.
Write hexadecimal colours in full, like so: #000000

Unicode characters

When we take copy from other files, for example from Microsoft Word documents, we sometimes get characters rendering incorrectly. To make sure this doesn't affect our email output, we need to convert those niggles into UTF-8 valid characters.

Here are a few commonly used characters that are prone to mis-rendering, along with their Unicode equivalent.

Pound sign: £ is £.

En dash: – is –. Never use a hyphen unless joining two words together.