There’s a very different technique for creating HTML email compared to traditional web pages due to the very nature of email and the abundance of email clients available. Designers have to step back in time with their techniques to ensure good formatting across the board.

Here’s a few pointers and best practice guidelines to help you along the way. This article is designed to help with the design and coding of the email and not the content itself. You’ll have to wait for that one along with an article on the best ways to actually send and manage email marketing campaigns.

Not too wide

These days we’re designing websites for 1024×768 giving us around 960 pixels to play with. Unfortunately, email is typically displayed in a much smaller space (depends on the email client and the setup of the individual user) so keep to less than 600 pixels wide. Somewhere between 500 and 600 pixels should be fine.

Use tables for layout

This is probably the most important thing to consider when designing HTML email. We have to go ‘old skool’ when it comes to HTML email with the use of tables to layout the content. CSS based layouts remain very much unsupported with email clients.

You’ll also need to say hello to your old friend ‘spacer.gif’ to help force table cells to work the way you want. Don’t forget to set the border, cellpadding, and cellspacing values for all tables.

Include the DOCTYPE and validate the HTML

Make sure you use valid HTML or XHTML and include the DOCTYPE definition and character encoding tag. This is best practise for any HTML document which should be no different for HTML email.

Always make sure that you test the HTML and CSS using one of the numerous validators on the Internet.

Don’t use an external CSS stylesheet

External CSS files are normally stripped out by email clients so make sure you include the CSS in the email body. External stylesheets will also require downloading which will result in email display issues until the file is downloaded.

Put the CSS styles within the BODY tag and use inline styles

Typically, content within the HEAD of the document is removed by many webmail clients. To avoid this, place the CSS code just below the opening BODY tag. Where possible, use inline CSS styles on paragraphs, table cells, headings etc. to ensure the content is formatted correctly. Otherwise, you’re relying on the email package to render the CSS correctly and not overwrite any defined styles.

No JavaScript or Flash

The use of JavaScript will almost certainly result in the email being identified as spam and if not, it’s likely that the JavaScript code will be blocked. Flash is generally not supported in the majority of email clients so it will be rendered useless. Animated GIFs are OK, but shouldn’t be relied upon since Outlook 2007 only shows the first frame of the image.

Forget about background images

Many email clients don’t support the use of background images. Of course, feel free to use them but don’t rely on their display. Make sure the email still displays well without them.

Use ‘live’ selectable text where possible

Using text rather than images (with text on) increases the chances of the email being delivered, reduces download times, and ensures users can read the email without relying on the display of images.

If the email contains just images and no text, many spam filters will block the email. Users that have images turned off will see nothing. In this case, you may as well just send a blank page.

Don’t attach your images to the email

This may sound obvious but it happens all too often. Make sure all images are hosted on your web server and linked to rather than physically attached to the email. This reduces the file size and subsequent download times of the email.

Remember the ALT text

If the user has images turned off or they are working offline they will not see any images. Instead, they will be able to read the image ALT text. Therefore, make sure to use this text wisely. For accessibility purposes it should contain a description of the image contents but at the same time try to encourage your users to download the images to view the full email.

Test, test, test

The best way to test your email template is to create email accounts for the major emails clients and webmail services. We test our HTML emails using Outlook 2003 and 2007, Thunderbird, Apple Mail, Yahoo! Mail, Google Mail, and Hotmail.

Many online email sending tools provide automated display testing of your email but I still recommend testing the email yourself on the big players.

It’s unlikely that your email will look perfect in all of the above but as long as the HTML degrades well you’ll be fine. Unfortunately, you’ll be banging your head against a wall if you want to be pixel perfect.

Email Marketing html email