Lotus Notes and HTML Newsletters
By Tom Granger
Dateline: June 24, 2004
Volume 1, Number 3
Earlier columns
Post comments in the forum
Lotus Notes can be a tough email client to test your HTML email and newsletters against, as a result of a general lack of information on how the Lotus Notes client renders and displays HTML for the end user. Many designers and firms tend to skip over the whole Lotus Notes compatibility issue, believing that the majority of recipients using Notes is small.
The problem is that there can be a tremendous amount of corporate Lotus Notes users on any given mailing list. One client of ours found out after a brief survey (and all of the negative feedback from their mailings to users who received a hodgepodge of mismatched code from them) that nearly 40% of their entire mailing list was using Lotus Notes. This was due to the fact that their list was made up of larger corporate clients who account for a signifficant portion of Notes usage.
So, whether you realize it or not, Lotus Notes may play a very significant role in your email marketing. Unlike AOL recipients, who you can easily filter and send alternate content to, Lotus Notes users look and act just like the rest of us. According to IBM, 95 million people currently use Lotus Notes. Scary.
That being said, let's dive into some of the concerns we encounter on an almost daily basis. The following is a guide that you may find helpful in diagnosing and trouble shooting common Lotus email marketing issues. Due to the wide variety of settings, open source tweaks and other variables that separate the Lotus environment from the more common Exchange and Oracle systems, you'll need to consult some of the resource links at the end of this article for additional help. However, with the little bit we are going to arm you with here, you'll be able to fake it just fine.
Little Red Boxes Around Images in Lotus Notes Email
Problem: A handful of employees that receive different emails in HTML format cannot seem to be able to view the pictures or images in Lotus Notes. The text seems to retain its HTML formatting, but the images appear as a box with a red "x" in them. What is going on? Usually this is caused by the absence of an absolute URL (such as http://www.graphics.com/images/spacer.gif) for that particular image resource. We say "usually" because at times perfectly formatted and linked images produce this same effect for no good reason, other than that Lotus Notes has converted the image to Notes Rich Text and it isn't present in the Notes database. Depending on your version of Lotus Notes, you may see a text representation of that image link: [Image]. The best thing to do in this case is look at your HTML reference to that image character by character. Load your code into a text editor such as TextPad, and turn on the "visible spaces" feature. This will allow you to see every space, carriage return (<CR>) or other character representation that could be fouling the interpretation of your HTML in the Lotus Notes environment. Even a single space or carriage return can trigger this conversion, which of course brings us to:
Other Strange Boxes, Lines, Distortions and "Not Supposed to Be Theres"
This one is fairly easy to fix, and when I tell you what is causing it you'll slap your head with a huge "Ohhhh" and we'll be done. To trigger these kinds of glitches, 99% of the time you are using a GIF file that has a matte or background that is showing through as an extra border. You should remove the matte by making the background transparent or changing it to match the background color of your document. Or use JPEG images, instead of GIF.
Turning the Tables on Notes
If you are a current user of Lotus Notes, whether R5.07 to R5.10 or even the new R6 release, the following should sound familiar: "We opened an HTML email which looked fine in Outlook, but expanded to fill the entire page in Lotus, distorting the intended design." We've documented numerous accounts in which Notes has completely ignored some HTML coding during rendering, while displaying other HTML just fine. This is especially true when it comes to width parameters for Table tags, nested Table tags and finally, Table tags that are not constrained within another table.
One of the standard practices we've established in consulting for clients is using one master table to constrain the entire email. Often, clients will be taking bits and pieces of code from various projects, emails, Web sites, catalogs, etc and placing them into their HTML email marketing. All of the various parameters can easily conflict with one another when rendered. By "wrapping" your HTML email in one master table, you help reign in all of those various width=% and other "ambiguous" attributes and parameters which can wreak havoc on how your HTML email is rendered by the viewer's client.
Wrapping your HTML email message in a master table and then setting the Table Padding to equal at least 5 is also a good way to thwart certain Web-based mail systems that only render your code after what comes after the Body tag. What often happens is that your HTML email message gets smashed up next to the Web-based console (Compose, Inbox, etc). By comparison, our own corporate newsletter uses cell padding of 12 to 18. While you do not have to be as zealous as us in this regard, it is better to be safe than sorry.
Vanished Styles
The most common complaint we hear is about disappearing style sheets when rendered in Lotus Notes. You send an email to a Lotus client and suddenly the text appears incredibly huge or really small. Your beautifully designed masterpiece, lovingly handcrafted in 14pt Helvetica with slight shades on the sidebar tables has completely come undone, not unlike the illustration at right. The nice-looking table below the picture was originally supposed to be a nice-looking table on the left of the picture. Since the design was dependent on having text size and attributes exactly as specified, this shifted things around pretty quickly. Our design could survive that. Could yours?
If you are going to be relying on style sheets to format your HTML email, then you must be aware that Lotus just doesn't like them. Most common style sheet elements are ignored by Lotus Notes nearly each and every time you try to use one. The same is often true for many Web-based email systems (Hotmail, AOL, Yahoo, etc) that want to avoid any style sheet conflicts between their own and yours.
Sending HTML email to a Lotus recipient using a design that is fairly dependant on its style sheet to keep the continuity of the layout in place is bound to cause problems, unless you use the following technique.
A normal entry in the <HEAD> section of your HTML document looks like this:
<style type="text/css">
<!--
.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; color: #FF0000}
.sidebar1 { font-family: Arial, Helvetica, sans-serif; font-size: 9px}
.text { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
-->
</style>
Even if you link to an external style sheet you are still using the above format, which is called into your document when rendered by the email client. The above style sheet will immediately be ignored by most Lotus Notes clients, thereby ruining your email. However, if you were to comment out each line of the styles one by one, then your style sheet would suddenly by recognized by the Lotus environment, like so:
<style type="text/css">
<!--.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; color: #FF0000}-->
<!--.sidebar1 { font-family: Arial, Helvetica, sans-serif; font-size: 9px}-->
<!--.text { font-family: Arial, Helvetica, sans-serif; font-size: 12px}-->
</style>
It's that easy! Granted, that can take a while if you are using 25 different styles in your simple little HTML email. Your Web site may use dozens of different styles and define all of them in the <HEAD> of your Web page. This may be the decree, edict and final word from Marketing that these are the official styles for all corporate communications, but you do not need to include all these styles in your email if you are only going to use a few of them. We once received a five-page document detailing all the various styles a particular company used in their corporate communication, with the style sheet in the <HEAD> being as long as the content in the HTML email!
If you are going to use style sheets in your HTML email then remember two things. First, test your HTML email message without your style sheet to see if it could handle suddenly not having the style sheet render for you. A prime example to watch for is whether suddenly having your 10pt text expanding to the users' 12pt Arial default makes a mess of the layout. In many such cases you have a lot more text, wrapping and pushing all of those carefully arranged elements around your email message.
Second, code some backup HTML attributes to help the above problem, in case of style sheet failure. Relying on the users' default settings can be disastrous. Examples of good backup coding would be:
<font class="style" size="2" family="Arial, verdana, sans serif">
Named Anchors Don't Usually Work in Lotus Notes
When you click on a named anchor in a "normal" browser, such as Internet Explorer or Netscape, it will jump you to a predefined point in the document. This is often used within tables of contents, menus and other navigation elements. When Lotus Notes encounters a named anchor, such as <A href="#2">, it tries to open a new window and display what it perceives as a new document, in this case http://www.<your domain>/#2 document, which of course does not exist.
Well, that's the basics of creating HTML email for Lotus Notes users. The resources below will provide further information.
Tom Granger is the owner of TemplateKit.com
— a one-stop shop for open source, templates, HTML email information and
more. He can be reached by email at: tom@florentinedesign.com.
He also co-author's Proposal
Kit Pro — a low-cost, turn-key solution for developers & designers
who want to more accurately estimate, bid, propose, and contract projects. |
