HTML email design and coding tips part II

This article has now obselete, the revised article is here.

There are many desktop and online email browsers available, each have their idiosyncrasies. Some are more quirky, and obscure than others, so you may decide that compatibility with them is not worth the trouble. Before you make that call, see if you can get information on whether the target audience uses those programmes. In some companies the use of Lotus Notes is mandatory. So B2B emails may need to work with Lotus notes. Lotus notes it seems is not going to go away, it’s recently been released for the iPhone. Campaign monitor publish a list of email browser support for various aspects of HTML and CSS standards. There are also companies that offer Email browser testing.

Choose the correct doctype

One big email broadcasting agency I worked for omitted doctypes from their emails as they said there were problems associated with their use. If you do use them, make sure you select the correct doctype/character encoding combination. We had great trouble with unwanted margins and padding in various Microsoft products until we arrived at the code below, which reliably rendered heading and paragraph tags without large amounts of unwanted white space.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Use nested tables

Nested tables are far more stable, and far easier to debug than cellspans and colspans. Divs, for the moment at least, remain too problematical.

Use semantic markup

The structure of the HTML may have to be horrible old school style but headings, paragraphs and lists will still work. Having said that‚Ä¶

Use inline styles

It’s very old school, and very laborious, but it’s reliably stable in every Outlook 2007/Windows operating system combination we tested in. See the code example in the paragraph below.

Use padding to provide white space

How the email will look

While working at an email broadcasting agency I realised just how easy this is. It’s easier, faster and more reliable that using spacer images, which is what I used to do. The banner ad and lead text of the email shown on the left can be coded as follows:

<table width="556" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/conference08.jpg" width="299" height="161" style="padding: 28px 0px 0px 14px" />
<h1 style="padding: 30px 28px 14px 28px; font-family:Arial, Helvetica, sans-serif; font-size" 21px; color: #333333;">Online retention solution</h1>
<p style="padding: 0px 28px 14px 28px; font-family:Arial, Helvetica, sans-serif; font-size" 13px; color: #333333;">Give your members more value for money with <strong>FREE</strong> virtual magazine and online fitness shop.</p>
</td>

A neat trick to improve message preview in Outlook

Outlook message preview

For some reason Outlook is prone to picking up slightly random pieces of text that it then displays in the image preview pane. Although what follows will not validate it sends a neat piece of preview text to Outlook and seems to not upset any other email browser. Simply select the text you wish recipients using Outlook to see, and place it as the alt text to a 1px gif. The correctly presented preview message will appear in Outlook as shown on the left. Insert the gif right at the top of the code of the email, before the head or doctype:

<img src="images/spacer.gif" width="1" height="1" alt=">Online retention solution - Give your members more value for money with FREE virtual magazine and online fitness shop" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Creative Glo - Information architect, user experience designer, front end web designer and coder and WordPress consultant