While sending an HTML email is basically like sending a webpage via email, designing and coding email templates is a wholly different beast than designing and coding a website. Email programs are essentially the Neanderthal cousins to the modern browser, but like their more modern, sleek, fire-wielding relatives, they all have their own horrid little quirks that you need to be concerned with.
Design: Now, we all know that designers love gradients and non-repeating background textures and non-Euclidean pattern fills and other things that drive developers absolutely batty, but in this case, developers have the advantage: EMAIL PROGRAMS DON’T DO BACKGROUND IMAGES. Solid colors, folks. That’s all you get. That also means that any text blocks need to be a perfectly rectangular spaces with a single color behind it – no images bleeding into the text area. NONE! It also means that dropshadows around expandable areas are right out, because they require a repeating background image.
Coding. Coding a template is the HTML equivalent to speaking in Olde English – or conversing with your local Pikey. Yes, it’s HTML and you’ll recognize some of it, but this is not what you’re used to.
For starters, scrap the <html> and <body> tags and everything in the <head> section. Google hates ‘em.
Second, this is HTML 4.01 transitional. Not XHTML. And you don’t get to use <div> tags or style attributes. That’s right, TABLES!
Third, you can’t use rowspans or colspans. Now you’re not laughing so hard at that Neanderthal comment, are you? Whoever came up with this system was wholly incapable of purchasing insurance online.
So, what does that leave you with? Not much. If you haven’t given the designer cause to hate you, you’ll probably have a nice two-column layout with a header and footer. This means you need (at minimum) 5 tables:
1) The header table. Since there’s no colspans, it has to be its own table.
2) The body table, with two cells.
3 and 4) The column tables, in body table cells 1 and 2. You’ll need these for padding.
5) The footer table. Just like the header.
A note on padding: Need 10 pixels of padding on just the left? Best bet is to use another cell that’s 10 pixels wide and contains only blank.gif.
This is what your code is going to look like:
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="100"><img src="http://www.{DOMAIN}.com/images/newsletter_header.jpg" width="500" height="100" border="0"></td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" bgcolor="#EEEEEE" valign="top">
<table width="250" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="250">
Lorem Ipsum!
</td>
</tr>
</table>
</td>
<td width="250" bgcolor="#CCCCCC" valign="top">
<table width="250" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="250">
Dolor Sit Amet!
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="100"><img src="http://www.{DOMAIN}.com/images/newsletter_footer.jpg" width="500" height="100" border="0"></td>
</tr>
</table>
Yes, it’s a fun world of valign and bgcolor tags that will likely grant you the ability to see the small chittering things that lurk beneath your floorboards. But wait! There’s more! In addition to a copy of our home game, you also get to use the <FONT> tag for the first time since Clinton was President! Just a quick review of the syntax that no one will blame you for forgetting:
<font face="Arial, Helvetica, sans-serif" color="#333333" size="1">Please, why?</font>
As for the font sizes, well, you’re just going to have to play with it and see what works.
Finally, to summarize:
- No HTML head or body tags.
- Besides that, make it compliant.
- Tables tables tables.
- No rowspan or colspan tags.
- No style declarations whatsoever.
- Tables within tables for padding.
- Font tags.
- Dogs and cats living together.
- Mass hysteria.
If you need a good example, Here’s the first BCASC newsletter code:
<table width="500" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="86"><img src="http://newsite.bcasc.org/images/newsletter_header.jpg" width="500" height="86" border="0" alt=""></td>
</tr>
</table>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="4" height="41"><img src="http://newsite.bcasc.org/images/newsletter_header_left.jpg" width="4" height="41" border="0" alt=""></td>
<td width="300" height="41" valign="bottom">
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="41"> </td>
<td height="41"><font face="Arial, Helvetica, sans-serif" size="3" color="#4B749E">Empowering Individuals, Creating Community</font></td>
<td width="10" height="41"> </td>
</tr>
</table>
</td>
<td width="192" height="41" valign="bottom" bgcolor="#E8EEF7">
<table width="192" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="41"> </td>
<td><font face="Arial, Helvetica, sans-serif" size="3" color="#D27904">Highlights</font></td>
<td width="10" height="41"> </td>
</tr>
</table>
</td>
<td width="4" height="41"><img src="http://newsite.bcasc.org/images/newsletter_header_right.jpg" width="4" height="41" border="0" alt=""></td>
</tr>
</table>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="1" bgcolor="#FAFAFA"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#F0F0F0"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#E2E2E2"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#CECECE"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="300" valign="top">
<table width="300" cellspacing="0" cellpadding="10">
<tr>
<td>
<font face="Arial, Helvetica, sans-serif" size="2" color="#444862">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in nibh id diam varius laoreet id nec odio. Cras sed libero sed justo feugiat sodales in vitae nunc. Fusce non sem eget nunc luctus vulputate non a sem.<br><br>
Sed metus enim, rutrum at adipiscing a, tempor egestas orci. Nam ornare, eros ac aliquam accumsan, libero orci porta justo, non consequat erat erat interdum purus.<br><br>
Aenean in mi facilisis tortor sagittis pharetra. Morbi orci sem, fringilla ac viverra nec, pulvinar vitae mauris. Pellentesque sapien ligula, malesuada eu facilisis fringilla, rutrum sollicitudin magna.<br><br>
Imperdiet, orci sodales interdum sodales, tellus ligula malesuada odio, ac egestas enim mi ac odio. Ut nulla sem, posuere ac porttitor a, interdum ut nulla.
</font>
</td>
</tr>
</table>
</td>
<td width="192" valign="top" bgcolor="#E8EEF7">
<table width="192" cellspacing="0" cellpadding="10">
<tr>
<td>
<ul>
<li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.</font></li>
<li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Proin varius venenatis ullamcorper. Vivamus ut nisl justo, at porttitor.</font></li>
<li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.</font></li>
<li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Proin varius venenatis ullamcorper.</font></li>
</ul>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#CECECE"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#E2E2E2"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#F0F0F0"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
<td width="1" bgcolor="#FAFAFA"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
</tr>
</table>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="114"><img src="http://newsite.bcasc.org/images/newsletter_footer.jpg" width="500" height="114" border="0" alt=""></td>
</tr>
<tr>
<td width="500">
<font face="Arial, Helvetica, sans-serif" size="1" color="#444862">
Address goes here<br>
%%unsubscribe%%
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
I’m sure I could write an entire gripping Dean Koontz-style novel on this subject, but this should serve as a good starter guide. Also, no one would want to read anything that resembled a Dean Koontz book, so I guess I’ve spared you that horror. One horror per day is my limit, and learning to code an email template is pretty much akin to handing the keys to your brain to Cthulu and then drinking a gallon of Jolt Cola. Enjoy!