A Designer's Guide to HTML Email

The header banner was the major consideration for us. The simplest approach is always to put your title and branding into one large banner image and embed the whole thing.

Of course on the down side, this leaves your email faceless and unbranded if images are blocked (often the default situation now).

We decided to have an each way bet with our banners. The “SitePoint Design View” text is actually real text, colored and positioned with inline CSS; this means the newsletter will at least clearly identify itself, even if images are blocked. Likewise, the default positioning doesn’t look so terrible if CSS positioning isn’t supported.

We’ve included the graphical part of the logo (the “brackety” part) in the background image of the banner, working on the assumption that if background images are supported, then so should the CSS positioning required to align it with the text.

Some might say this is a risky assumption, but so far it’s yet to prove wildly incorrect. Of course, there’s always next week. We don’t claim this blending of real text and background images is the only way to tackle the issue—or even the best way for that matter—but we’re sticking with it for now.

Part II—The Initial Testing Phase

So, let’s assume you’ve started with a template and come up with a HTML design you’re happy with. You’re going to need to start preliminary testing.

Although there are plenty of alternatives for sending your test emails, I found Thunderbird the easiest.

Once you have Thunderbird set up:

1. Select and copy your HTML template to your clipboard.


2. Create a new email in Thunderbird, then select and delete any signatures automatically included.


3. Click inside the text area and go to Insert > HTML—a text box will pop up, allowing you to paste your HTML in.


4. Hit “Insert” and you’ll be ready to send.

However you may not currently use Thunderbird as your default mail client, and indeed, may not wish to. If this is the case, consider creating a new Gmail account and using Gmail’s SMTP/POP server settings to send your test mail from Thunderbird. This will keep your everyday email clean and separate from your testing mail.

You can also set up groups in Thunderbird (referred to as “Mailing Lists”) that enable you to send to a number of different addresses (and clients) from one address. For my own early testing stage, my group included:

• my default Thunderbird account
• a Gmail account
• a Yahoo mail account
• an MS Outlook 2007 account

These certainly aren’t the only clients you might consider for early testing, but they gave us a reasonable snapshot of where we were at throughout the process.

Getting the Outlook 2007 test bed running was the most troublesome. I originally tried downloading the trial from Microsoft. Unfortunately, the installer then informed me it was happy to install Word, Access, PowerPoint, and every other app. EXCEPT Outlook 2007—which for unknown reasons was grayed out. Oh joy!

Eventually I tracked down and installed the full version. Again, to keep things clean, I set up a brand-spanking new Gmail account, solely dedicated to receiving mail for Outlook 2007.

While it might be tempting to consider using a service such as Campaign Monitor to allow you to generate Outlook 2007 screenshots, the practicalities of tuning your HTML via an online service are questionable—you’ll need to do lots of tweaking and this will be slow and expensive.

The one really useful thing we (well, Brothercake) did discover during this phase is that, like IE, Outlook DOES support conditional comments. While in many ways this is cold comfort, it at least allows you to remove items that have no chance of working in Outlook 2007 (such as forms and complex positioning CSS).

However, beware. This is dark magic, so use it with care—and not at all if you can help it.