I’ve written a couple email engines in my day – one in PHP and one in ASP – to integrate and automate businesses with email marketing.  Work to be proud of, indeed. Invariably after the engine part is done – or maybe you’re using an established service* for the engine part – there needs to be some content, some email design.

*Examples of consumer email marketing services (”engines”) using email templates and data merging:

• http://email.exacttarget.com
• http://www.constantcontact.com
• http://www.mailchimp.com
• http://www.myemma.com

Templates are for branding

HTML templates need to be made so the emails that are received are branded – at least with a logo and company colors.  This is not possible with a plain text email of course.

Merging process

The engine will take the templates and merge in some variables like “first name”, “email to”, “email from”, etc – a basic find-and-replace loop.  The HTML template will contain placeholders for each variable – strings like “{#EMAIL_TO#}” – and the loop will replace those with values from the database, then send the post-merged email to that person in the mailing list.

Email formats

There are many ways an email can be formatted such as “quoted-printable”, “text/plain”, and embedded images, but my focus is on “text/html” with linked images.  Here is a handy site that can convert static HTML into quoted-printable format, and back.

Images

The images will be stored on a server and referenced like any other web page would reference images.

Privacy and missing images

Some email viewers like Gmail tend to hide images that link back to a server, and the user has to click a “display images” link to see the email as it was intended.  This is a privacy feature because images that link back to the server provide the sender with a method for tracking who opens the email.  The log can be parsed to see who requested the image when the email was viewed.

We need to make the design look good even if all the images are missing.

alt attribute

For this reason, be sure to fill your image tags with good descriptive “alt” values so those users still know what they’re not seeing.  Putting “please display images”  in the “alt” attribute is a consideration, but might also be a flag to the program that the message is spam.

Tables

Today web designers use style sheets instead of tables for positioning content.  CSS-heavy, un-tabled code may be a good idea for modern web sites, but not for HTML email templates.  Email templates rely primarily on tables for positioning content, making columns, aligning text, etc.  This is simply because the email could be viewed in any number of applications, with a high likelihood of poor CSS support, even in modern email clients such as Outlook 2007 (whose rendering engine is Word, of all things).  Tables are “old school” web design, and so are email templates.  Being a CSS guy, I just have to suck up that reality.

Put CSS in style attribute

This isn’t to say that one should abandon CSS in email templating altogether.  In fact, feel free to use the “style” attribute – just back it up with the non-CSS way too, as insurance.

If the cell needs a background, use “style=background:url(some image path)” in addition to “background=(some image path)”.  If the font needs a color, use “style=color:red” in addition to “<font color=#ff0000>”.

Go attribute-crazy

The more attributes each table cell has, the better.  Don’t forget attributes such as “height”, “width”, “background”, “bgcolor”, “align”, “valign” and even CSS’s “style”.  You’ll thank yourself when testing in even the latest browsers and email clients.

Always use the “align” attribute in cells with text.  I can’t tell you the numbers of times I’ve seen Internet Explorer “center” text that “left-aligns” in Firefox. Setting “<td align=left..” fixes this.

Stay aware of the design affects of merging in variable data that could reflow text and images.  When columns are growing and shrinking with variable content, and you want the content to “top-align,” use “<td valign=top..”.  Otherwise there tends to be rarely-desirable vertical centering.

Variable images

If your variable images are variable sizes, heaven help you.  If necessary resample all the variable images – perhaps with ImageMagick – to give them the same widths or heights – whichever dimension flows best in your design.  Whatever table cell is containing your image should still have the height and width set.

spacer.gif

A spacer.gif is a 1×1 transparent GIF that can be resized to enforce the size of an empty table cell.

Remember those?  You’ll wanna pull those out from the back of the toolbox to help pad your tables.  Tables + spacer.gif is the “old way” but it’s the “right way” when it comes to making email templates.

If I have an email with 2 columns and padding in between, I will use a 3 column table with all cells’ widths, aligns, valigns set, and put a spacer.gif in the center “padding cell” that is the same width as the padding should be.  The height of the spacer.gif can remain 1px.

Spanning

If you find yourself using “colspan” or “rowspan”, don’t.  Instead, nest tables.  It’s sounds like such a naughty thing to say, but that’s the most dependable way to go.  Go nested-table crazy! We can’t give the cell dimensions any leeway.  Spanning cells tends to produce more random cell dimensions than the predictibility of nested tables.

Table setup example

Here’s a good set up for a centered, 650px-wide table.

<table cellspacing=”0″ cellpadding=”0″ border=”0″ align=”center” width=”650″>

“cellspacing”, “cellpadding” and “border” need to be set. Assume nothing about any dimension.  Be explicit everywhere.

Testing

Don’t forget to test in multiple browsers, and multiple email clients. This is where we see how necessary all the excessive table markup was.

Here’s a few email clients to consider:

• Outlook 2007
• Older Outlooks
• Gmail
• Yahoo Mail
• Apple Mail
• Hotmail

Just because the email client is web-based doesn’t mean it is just as CSS-compatible as a you’d expect.  Sometimes the CSS is rewritten to prevent style conflicts with the web page it is presented in.  We would hope that the rewriting will not be harmful to your CSS, but I wouldn’t bet on it.  Best to take the hybrid route so we won’t have to worry about it.

Conclusion

Email template design is an aging art with the advent of Web 2.0 social marketing tools, but it still reaches the most people wherever they may be online.  Deploying age old web design techniques is still the best way to code an email template so that it looks the same in most people’s email clients.