The advice I always give when it comes to coding HTML emails is “Forget everything you’ve learned in the past 15 years!”. For a veteran HTML coder, this is a little easier, as we’ve been through the era of HTML 4, tables, and “Web 1.0”. For those just entering the field, in the midst of HTML 5, AJAX and CSS 3, get ready for a history lesson!
Welcome to the dark side of HTML email coding. Say good-bye to floating divs, responsive layouts, ids and classes. Say hello to painful cross-client testing. Now that I’ve scared you away from offering HTML Email template coding as part of your core services, let me walk you through a few techniques that will make the process a lot less intimidating, and lighten the blow that cross-browser testing strikes.
Tables
As I mentioned in the opening paragraph, you need to become friends with the <table> tag again, as it will be used for layout in the case of HTML emails. This will no doubt the be biggest adjustment if you have “gone table-less”. Email clients are many, and most are far less capable than browsers when it comes to rendering modern HTML and CSS. Essentially, you never want your email layout to depend on CSS, so unless you have a single column, extremely simple layout, the HTML table is the only way.
There are a few popular layout options, but one prevalent one is the “centered message, with a background fill color”. This approach typically requires the use of the 3 levels of table wrapper (as shown in the HTML example below). The inner-most table will hold your content, the “middle-table” will provide your white-background color, and the outermost table will provide the background fill-color.
You might be asking, “do I really need a table wrapper just to provide a background color?” Unfortunately, the answer is “Yes”. Other methods of providing a background color, such as CSS, simply aren’t reliable across all email clients. Which brings us right into our next issue, tag attributes vs. CSS.
Supplementing Tag Attributes with CSS (and vice-versa)
Some email clients are adept at parsing and properly applying CSS, some aren’t. Furthermore, some apparently are not adept at reading certain tag attributes (possibly by design). The most common style which this applies to is the background color. As you can see in the example below, I’ve employed both the CSS background-color style, as well as the bgcolor tag attribute. In my experience, this is not necessary for every style, but wherever possible, it makes sense to include both.
Children with a Mind of Their Own
In many email clients, you’ll be surprised to find out that child elements tend to ignore style properties set by their parents. Most commonly, the font style is the little bugger that needs to be explicitly set on every child element. This quirk alone is enough to drive you mad when you need to make font adjustments to the overall email. All I can say is, become good buddies with your editor’s find/replace feature.
Background Images
This is kind of an extension of “Supplementing Tag Attributes with CSS” above, but it’s so common that it deserves special attention. If I can offer any advice to e-newsletter designers, it would be to avoid background images entirely. It is doable and they’ll reach 99% of your viewers, but there’s just no way to make background images work consistently across email clients. Not to mention that they typically do not print, as most users’ printer settings are set to not print background images.
If you really feel the need to include backgrounds, you’ll want to follow the advice above concerning doubling up on the style. That is, including it as an HTML attribute, as well as a CSS style rule, i.e.
<table width="600" cellpadding="0" cellspacing="0" style="background: url('fancy-bg.jpg') no-repeat;" background="fancy-bg.jpg">
...
</table>
Note that I have specified a background on the <table> tag. This is by far the safest and most cross-client approach, when compared to applying backgrounds on other HTML tags.
I think the above are certainly in the top 10 list of most frustrating HTML email “gotchas”. You’ll come across a few of your own as you develop more and more e-newsletters.
HTML Email Example Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>My Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body style="font: normal 12px/16px Arial, Helvetica, sans-serif; background: #319a98;" bgcolor="#319a98">
<!– table wrapper for whole body background color –>
<table width=”100%” cellpadding=”100″ cellspacing=”0″
style=”background: #319a98;” bgcolor=”319a98″ align=”center”>
<tr>
<td>
<!– table wrapper for white background inside content area –>
<table width=”600″ cellpadding=”0″ cellspacing=”0″
style=”background: #fff;” bgcolor=”#ffffff” align=”center”>
<tr>
<td>
<!– table wrapper for header –>
<table width=”600″ cellpadding=”0″ cellspacing=”0″>
<!– header image –>
<tr>
<td><img src=”http://images.mysite.com/header.jpg” alt=”My Header Text” /></td>
</tr>
<!– header slogan –>
<tr>
<td bgcolor=”#d2232a” style=”padding: 12px 0;
font: normal 24px/24px ‘Times New Roman’, Times, serif;
color: #fff; background-color: #d2232a; text-align: center;”>
My Slogan
</td>
</tr>
</table>
<table width=”600″ cellpadding=”0″ cellspacing=”0″>
<tr>
<!– body copy – column 1 –>
<td valign=”top”
style=”padding: 20px 11px 5px 35px; background-color: #f3cd00;”>
<h3 style=”font-family: Arial, Helvetica, sans-serif;
margin: 0 0 3px 0; font-size: 12px; “>Body Heading 1</h3>
<p style=”font-family: Arial, Helvetica, sans-serif;
margin: 0 5px 0 0; font-size: 12px; line-height: 18px;”>
Body paragraph 1
</p>
<h3 style=”font-family: Arial, Helvetica, sans-serif; margin: 13px 0 3px 0; font-size: 12px; “>Body Heading 2</h3>
<p style=”font-family: Arial, Helvetica, sans-serif; margin: 0 5px 0 0; font-size: 12px; line-height: 18px;”>
Body paragraph 2
</p>
</td>
<!– body copy – column 2 –>
<td width=”181″ valign=”top” style=”padding: 0 13px 0 13px;”>
<h3 style=”font-family: Arial, Helvetica, sans-serif;
margin: 0 0 3px 0; font-size: 12px; “>Body Heading 3</h3>
<p style=”font-family: Arial, Helvetica, sans-serif;
margin: 0 5px 0 0; font-size: 12px; line-height: 18px;”>
Body paragraph 3
</p>
<h3 style=”font-family: Arial, Helvetica, sans-serif;
margin: 13px 0 3px 0; font-size: 12px; “>Body Heading 4</h3>
<p style=”font-family: Arial, Helvetica, sans-serif;
margin: 0 5px 0 0; font-size: 12px; line-height: 18px;”>
Body paragraph 4
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>