Designing an HTML newsletter in Outlook 2003

For the last month or so at work, we’ve been doing an information audit – basically gathering together key people from each of the firm’s practice areas and asking them, in a roundabout way, if we’re meeting their information needs. One of the more surprising comments to come out of it so far concerned the design of our daily current awareness bulletin, the Legal News Updater (LNU).

We’d been asking everyone what they thought of the content of the LNU, and the response had been overwhelmingly positive (happily for me – I took over putting it together about a month ago, so good to know I’m apparently doing it right!) until one person just casually mentioned: “Yeah, the content’s great… it looks a bit crap though”. When we asked her to elaborate, she said it was “boring” and “dated”. I have to say I could not agree more – I’d thought as soon as I started that the layout could do with jazzing up; but with a million and one things to do in the library every day, the aesthetics of the current awareness email takes a back seat! For reference, this is the layout she was commenting on:

Exciting, no?

So, having been given an official excuse for spending my time playing around with HTML, I set out to give the LNU a much-needed facelift.

Our critical friend had mentioned the Legal Week email alerts as a good example of newsletter design, so I had a look at that to begin with. It’s a really simple design – just a table, with a few pictures thrown in and some nice colours. One thing that struck me was how closely they’d modelled it on the design of their website, so I aimed to do the same with the LNU – it makes sense to be using the corporate colours/fonts in our bulletin, which is after all the only communication from the information centre that everyone in the firm sees. This also meant that I could steal the colour codes and fonts from the source code of the firm’s website, thus saving me a considerable amount of time… But that benefit was, of course, very far from my mind!

This is what I ended up with:

Ok, it probably still isn’t going to win any design awards, but I think it’s an improvement on what we had!

I learned quite a lot in the process, which is mainly why I wanted to write this blog post (yeah, you could have skipped through all the rambling above. Sorry). Designing a simple HTML template is easy enough; making it work in Outlook is surprisingly difficult (I should note that I am only referring to Outlook 2003 – apparently things are different again with Outlook 2007, as with the myriad web-based email services your audience may be using. As no one here uses anything other than Outlook 2003 I didn’t have to worry about testing the display in different email systems – I just had to make sure it displays on a Blackberry as well as it does on a desktop PC).

For example, Outlook doesn’t like CSS at all, so the template had to be in pure HTML. This meant looking up some deprecated HTML to stand in for the things I only knew how to do with CSS – and ignoring the warnings on all the websites I used to look up the old code, which all insisted that you never actually use this old code, it’s so much better to use the equivalent CSS instead, and you will look like an amateur if you insist on using this antiquated crap. Ah well. I don’t think it looks too bad.

The other major problem I ran into was trying to make the anchor tags for the TOC work. For some reason, once you paste the code into an email, Outlook reads all of the anchor tags as external links, and tries to open them in your internet browser. I spent many frustrating hours re-doing the links, searching the web for solutions from other people who’d had the same problem, and trying the occasional solution suggested (none of which worked). Interestingly, most of the forums I found where people were discussing this problem ended with someone popping up on the board saying something along the lines of “the only solution to this problem is don’t use anchor tags in your newsletter. They just don’t work in Outlook and there’s no way to make them work”. Which would have been fine, I would have accepted that answer and stopped trying, but I know they can be made to work because the old LNU template used them!

For anyone else struggling with the same problem, the solution I eventually found was ludicrously simple. Once you’ve inserted your HTML into a new email, before you save it as a template, do the following. Right click on each of the links in turn and select “properties” (or highlight the link and go to insert -> hyperlink). This should bring up a box that looks like this:

Note the garbage Outlook has helpfully added in – there should be nothing before the # symbol. I have no idea why Outlook does this, I don’t know what that extra code means, but if you delete it then the link works fine. So, just delete the “outbind://64/”, OK it, repeat for every other relative link, then save your template. Once you’ve done this, you shouldn’t have any more problems with your links.

So those were my main issues – other than that there were just lots of little niggly things that made what should have been a quick job into a needlessly time-consuming one. But hey – we have our slightly prettier LNU now, and we’ve had some positive feedback on it. One of our lawyers even said it was “sexy” – whatever floats your boat I guess!

Postscript: here’s a couple of resources I found useful:

This book, which is a really handy quick-reference guide to HTML and CSS. Some deprecated HTML tags are also provided in an appendix, and chapters from previous editions dealing with deprecated code are included on the author’s website (accessible via a password printed in the book).

This article – handy step-by-step guide to creating a newsletter template in Outlook, although a few of their tips didn’t work for me (I’m not sure why they insist that you should save your template as a signature, it worked fine for me just inserting the HTML into a blank email and saving that).