How to do HTML emails by Mark Mulrooney

How to program HTML emails

Contrary to the current trend of using XHTML and CSS and of avoiding tables, to create a HTML email requires one to take a somewhat retro approach to web development. One has to contend with the horrible things that Hotmail, Yahoo Mail, AOL Mail and GMail will do to your code.

Link to an example of a HTML email

Techniques that you cannot use:

Externally referenced stylesheets - Hotmail et al take out the header.
Stylesheets defined in the header - see above.
Adding style details to the body tag - Hotmail et al also take out the body tags.
Margin attribute - Hotmail strips out any margin references, use padding instead.
Ordered or unordered lists - Yahoo Mail takes out the trailing </li> tag.

Recommended techniques

Have a DIV wrapping up all your body code. With use of inline style, this can replace the body tags that were ripped out.
Within this DIV wrapper, use tables to provide positioning.
Wrap up each piece of text with font tags to be certain that the font size you want is remembered. You cannot rely on CSS inheritance to work.
For the same lack of CSS inheritance, when positioning items with padding, use px units, not em.
Do use the inline style technique such as
<div style="padding:8px 0 0px 6px;">
Do use style tags in the body like this.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Your title here</title>
</head>
<body>
<style type="text/css">
<![CDATA[
div.mark {}
.tableLevel1 td p { background-color:pink;}
]]>
</style>
<div class="mark">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="tableLevel1">

Some Hotmail Problems

Hotmail doesn’t seem to recognise the css property "text-align: center" so if you are asked to horizontally centre the entire email the way to do it for everyone including Hotmail users is to enclose all the content inside your body_replacer <div> in a table with one cell, set to
<td align="center">.

Another Hotmail problem

Hotmail removes the underline for links. This can be defeated by
<span style="text-decoration:underline;">
<a href="http://www.replace_this_link.com"> My Account</a>
</span>

Yet another Hotmail problem

Hotmail has a habit of inserting
<p class="MsoNormal">
<font size="3" face="Times New Roman">
<span style="font-size: 12pt;">
</span>
</font>
</p>
after a table which created an unwanted vertical space. Very annoying, couldn’t find a way to defeat it.

The AOL Mystery

If you have succeeded in getting the look you want in Hotmail, Yahoo Mail and Gmail, then you will be pleased to see the same view within the AOL.com website. However, you are in for a shock when viewing the same email on any of the European AOL sites.

In-line styles are completely ignored. Setting the font-size with "11px" will result in the px part being ripped out and your text being plotted at the HTML absolute font size 11, which is very big! My solution below is to define the font twice; in the old fashioned font tag way, backed up with an inline style definition.

The Horror of Lotus Notes

Inexplicably popular with some corporates, here is a list of tips to cope with the way Lotus Notes deals with emails.

Avoid nesting of tables more than 3 deep
Use text-align left, if you use center then all text will be centered throughout
No images smaller than 12 by 12 pixels
Images as backgrounds are not seen
Setting a background colour can be problematic. In the Kodak project we had to give up on the dark grey background and settle for white. That is why the dark grey corners are deployed in the table cells with the background attribute. They can be seen by every email account type except Lotus Notes

Outlook 2007

Microsoft decided to stop supporting background images in Outlook 2007. You can still use background colours.