11 Comments

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:

LNUold

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:

LNUnew

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:

linktextNote 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).

11 comments on “Designing an HTML newsletter in Outlook 2003

  1. Thanks for sharing this, really interesting post and given me something to think about. I’ve been wondering about e-mail newletters and why we don’t use them much here (we tend to attach Word or PDF documents as newsletters). Definitely something to think about for future.

    • Glad to hear someone found it useful! One thing I should point out is that I think I avoided a lot of the common problems by the fact that we don’t send out the bulletin to any external email addresses. A point that I kept coming across on the forums was that if you’re sending a newsletter to external domains, writing it in HTML can mean it getting blocked as spam. You also have the added issue of not knowing what email services your readers are using, so you have to test for everything (and they all have their own quirks!). I’m sure there’s ways around those kinds of problems, but they’re a little out of my field of experience! Good luck with it if you do decide to do something jazzy with your newsletters though – I’d be interested to hear how you get on.

  2. Definitely useful… thanks! We are stuck between a rock and a hard place here with a pretty dire template, created as a stop-gap 12 months ago, with any improvements on hold. Might have to take matters into my own hands.

  3. Update 17/9/09: Just had a look at my stats for today, and one of the searches that brought people to my blog was “what does “outbind” on links in outlook mean”. I might have helped someone!! :-D

  4. [...] legislation, Parliamentary bills or news that needs to be passed on. I put everything into an email template, sorted by practice area, then send it out. I got the LNU sent out by midday today – [...]

  5. I came accross your site while trying to researching how to insert html newsletter ito email.

    I’ve created a newsletter, but for the life of me cant find how to instert it into email!

    I’ve looked through websites but havnt found a solution.

    I am using Outlook 2003.

    Any help woud be greatly appreciated.

    If you could email me – that would be great!

    Many thankS!

    Angela

    • I’ve emailed Angela in response to her question, but I thought I’d post my response here too, in case anyone else has the same problem (this post is one of my most frequently accessed – most of the searches that lead people to my site seem to be along the lines of “problems with creating HTML newsletter in Outlook”!)

      If you’ve created your newsletter as an HTML document, then this is how you insert it into an email:
      - In Outlook, open a new, blank email
      - Go to Insert (at the top of the screen), then click File
      - In the browser box that pops up, click one on the .htm file you want to insert
      - There should be a down arrow on the “Insert” button. Click this and select “insert as text”
      - Done!

  6. Thank you for the solution to the outbind garbage courtesy of Outlook 2003!

  7. [...] as email templating in Outlook was something I had to wrestle with for work last September, and my post on the subject still gets visited regularly. In fact, it’s the second most accessed of any [...]

  8. [...] Got asked to help create an email template for the PSL in the Madrid office to use for a Spanish current awareness bulletin, following the work I did last year on our current awareness template [...]

  9. Thanks for this post. I’d written an HTML newsletter and couldn’t work out how to email it through outlook.

    Really appreciate you taking the time to write this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,502 other followers

%d bloggers like this: