html

Guide to HTML Email Design

With our simple to use template you can put together a great looking email in no time at all. But if you have the skills and want to get into the nitty-gritty you can.

However, if you are used to programming websites using the latest development approaches be aware that they do not necessarily apply to email design.

Keep the following guidelines in mind when you are designing your email.

CSS

CSS Shortcuts

Normally with CSS you can group properties. E.g. style=”font: 12px, Arial”

For email design you should instead set each component separately. E.g. style=”font-size:12px; font-family:Arial”

External Stylesheets

Include your CSS within your HTML using inline CSS. External Stylesheets are unlikely to work with many email clients.

CSS Classes

Rather than use CSS classes you should use Inline CSS as many clients do not support classes.

E.g. Instead of

<div class=”cssclassa”>content</div>

use

<div style=”color:#cccccc;”>content</div>

CSS Float and Position Options

Both float and position options will be ignored by many email clients. Instead of these you should use tables.

Layout

Keep It Simple

A complex email design will require a lot of testing to ensure that there are no client issues. If you don’t have the time to spend testing a design and building the tables needed then it is best to use a simpler design.

Table Cell Padding
Be careful with table cell padding. Outlook will render these differently to other clients. It takes the padding from any cell in a row and applies it to every cell in that row.

To resolve this you can either apply the same padding for all cells in a row or you can put an inner div or table with padding into the cell you want padded.

HTML Tables
As CSS floating and layout techniques do not render correctly with all email clients standard HTML tables need to be used instead.

Design Width
So that the email displays correctly in different email clients and configurations the email should be 650px wide or less.

Colspans
Colspans are not supported by a lot of clients and many that do support them may have display issues so it is best to avoid using them at all.

Backgrounds

Background Colour
If you set a background colour for the main body (<body> tag) of your email it will not be shown by many clients including Gmail.

If you do set a background colour in the body tag you should include a wrapping div with a colour that surrounds the content of the email.

Background Images
Background Images are not supported by many clients so gauge their value accordingly. If you do choose to use a background image be sure to use HTML background options rather than declaring a background in CSS.

Images & Video

Videos and Flash
Few email clients will support embedded video or flash in an email but many will regard emails containing them as spam or even malicious content.

A better solution is to include a video thumbnail and link from that to have the video open in a new browser tab.

Alt Tags
Be sure to include alt tags in your images as most email clients disable images by default. Without alt tags an empty box is all recipients will see. With alt tags they will see the alt text in place of the disabled image.

Image Source URLs
Be sure to use absolute URLs for image sources like

<img src=”http://website.com/img.gif”>

Instead of standard format such as

<img src=”img.gif”>

Animated GIFs
Outlook 2007 does not support animated GIFs even though many other clients do. Where a client does not support animated GIFs they will probably just show the first frame of the GIF animation.

Single Pixel Images

Sometimes single or double pixel sized images are used as a makeshift way of aligning layout elements. These are likely to be read by client filters as potential tracking images and the email may be sent to spam or blocked.

Splicing Images
Splicing an image across HTML table cells or using adjacent img tags will require extensive testing as email clients may place a gap between the image, causing it to display incorrectly.

File Size
Viewers are no more patient with emails than they are with web pages so make sure the file can display quickly.

Test Disabled Images
Images are more than likely going to be disabled by default. Test your email with images disabled to make sure it looks and reads the way you want it to even without images.

General Tips

Do not use Word or similar formatting programs to type up code. The formatting of the document is likely to affect the HTML copied from the document.

Any JavaScript is likely to be stripped by clients and filters may see it as malicious code so it should not be included.

Be sure not to put anything above the opening <body> tag. Anything above this will likely be stripped and will not appear in the email.