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:
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.
