Life @ High Road Communications

Yesterday, I had the “pleasure” of working on a HTML email template that was going to be sent from a Lotus Notes client to Lotus Notes clients. If you have had any experience with this dreaded beast, than you know what a troublesome task it was going to be.

The way I see it, trying to create an HTML email template that works in Lotus Notes is like dressing a pig up in a tuxedo and expecting it to act like a gentleman – it simply isn’t going to work!

So, how to make it work? First, I had to travel the road of denial which involved convincing myself that I could create a decent layout with all the images properly tagged with good ALT text (it was a very graphic-heavy design). Oh how wrong I was. The result was brutal.

Next step? A completely table and image-based layout. Absolutely ugly, of course, but certainly this will work. Plus, the images were still properly tagged so even if the user had images turned off or disabled, they’d still get a fairly accessible version.  The result was better – and if you like having massive white gaps between all your images, then I’d say it was perfect.

Try as I might, I could not get rid of all the white gaps between the images. I was able to remove the vertical ones by forcing each table cell to be the exact width as the image it contained, but could not find a solution for removing the horizontal gaps that were being created by each table row.

Safe to say, I had reached the end of Denial Road…

The only solution I could think of, and which ultimately worked, and I use that word very loosely, was to use one image. Yup, that’s right, the email was now down to the point of it being basically a screen shot. There were a couple of items within the email that required links, so to solve this I had to use a client-side image map, which is actually supported by Lotus Notes.

The “funny” thing was, that even this didn’t work perfectly. Although I had disabled the borders, Lotus Notes insisted on placing one around a link (just one of them, for some reason or another) I had defined in the image map. Could not find a solution for removing this and so it was left like that.

Oh, and the coordinates for the image map are completely off. For example a coordinate of “10px 10px 10px 10px” (x1, y1, x2, y2) in a typical browser results in being something totally different in the email client.

The lesson? NEVER should you consider using an HTML-based design for an email if your target audience is going to be using Lotus Notes. The product simply doesn’t have enough support to make this a possibility. Another lesson? Lets keep email to a format that it is designed for – PLAIN TEXT!