|
Lotus
Notes & HTML Email Newsletters
Lotus
Notes seems to be a source of frustration for
many designers, marketing "folks" and
other people who generally have a "tizzy"
each and every time their email or marketing message
comes across looking less than perfect.
As
evidenced by this email message we received recently
from one reader:
Tom,
Lotus
Notes [DELETED] won't display [DELETED] properly.
I'm ready to [DELETED] throw the [CENSORED,
DELETED, ETC] using a hockey puck.
-Ted
We
feel your pain Ted, we really do.
Lotus
Notes can be a tough Email client to test your
HTML
Email & newsletters against. There is
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
due to the fact that they believe that the majority
of recipients using Notes is considered 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 were Lotus Notes
clients. This was due to the fact that their mailing
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 when you mail, 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 more common
concerns we get 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 your
more common Exchange & Oracle systems, you'll
need to consult some of the resource links &
forums we've collected below for additional help.
However, with the little bit we are going to arm
you with, you'll be able to fake it just fine.
Little
Red Boxes around Images in Lotus Notes Email
"Dear
Template Kit,
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?"
-Judy
Usually,
this is caused by the absence of an absolute url (such
as http://www.templatekit.com/img/spacer.gif,)
for that particular image resource. We say "usually"
because at times perfectly formatted and linked up images
produce this same effect for no real explanation other
than 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 like so: [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 which
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 & "not
supposed to be there's"
in Lotus Notes
Ok,
this one is somewhat easy to fix, and when I tell
you what is causing this you'll slap your head
with a huge "Ohhhh" and we'll be done.
99%
of the time you are using a GIF file that has
a matte or background that is showing through
as an extra border. Either you should:
1)
Remove the matte or change the matte to match
your background color.
Above: GIF Graphic
with a Black Matte Bleeding through
in Lotus
Below: Same Graphic with the Matte set
to white or removed completely.
|
|
2)
Switch to JPEG
One
of these things..looks not like the other
If
you are a current user of Lotus Notes, whether
R5.07 - R5.10 or even the new R6 release, you've
no doubt heard much of the following:
"We
opened an HTML Email which looked fine in Outlook,
but expanded to fill the entire page in Lotus,
distorting the intended design, what happened?"
We've
documented numerous accounts where Lotus Notes
has completely ignored some HTML coding during
rendering, while displaying other HTML coding
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.
Example:
<TABLE>
<TR>
<TD>
Foo on you! </TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD> Foo
on you too! </TD>
</TR>
</TABLE>
One
of the "Best Practices" we've established
in consulting for clients is using one master
table to constrain your entire email. Often, clients
will be taking bits and pieces of code from various
projects, emails, websites, 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 wreck havoc on how your HTML Email is
rendered by the viewer's browser.
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 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 TemplateKit.com
newsletter uses cell padding of "12 -
18". While you do not have to be as zealous
as we may be in this regard, it is better to be
safe than sorry.
Lotus
"Punts" our Stylesheet!
HAH!
The most common complaint we get around the office.
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 14pt, Helvetica with slight shades
on the sidebar tables can completely come undone. Almost
exactly like we've displayed to the left. 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 designed, it shifted things around pretty
quickly. Our design could survive that, so it wants
that big of a deal. 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 applications
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) who
want to avoid any style sheet conflicts between their
own and yours.
If
you are going to send HTML Email to a Lotus recipient,
and your design is fairly dependant on that style
sheet to keep the continuity of your design in
place, then you can count on problems. Except,
if you do the following:
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 your style sheets, 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, ruining your email.
However, if you were to comment out each line
of the one by one, then your style sheet is suddenly
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>
Viola!
It's that easy!
Well,
granted, that can take a while if you are using
25 different styles in your simple little HTML
Email
Your
Website may use 25 - 40 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 define all 25+ styles in your email if you
are only going to use maybe 3-4 of them. Seriously,
we once received a 5 page document detailing all
the various styles a particular company used in
their corporate communication, the style sheet
in the <HEAD> was as long as the content
in the HTML Email.
If
you are going to use style sheets in your HTML
Email then please remember two things:
1)
Test your HTML Email message without your style
sheet to see if it could service suddenly not
having the style sheet render for you. A prime
example to watch for is whether suddenly having
your 10pt text suddenly expanding to the users
12 pt Arial default. In many cases you have a
lot more text start wrapping and pushing all of
those carefully arranged elements around your
Email Message.
Example
1 & 2:
Proposal
Kit Newsletter as seen in Lotus Notes with &
without stylesheet
As
you can see, the titles have all reverted to their
default state, essentially ruining the headings
and the sidebar of the newsletter.
2)
Code some backup HTML attributes to help the above
problem in case of style sheet failure. Relying
on the User's default settings can be disastrous.
Examples of good backup coding would be;
<font
class="style" size="2" family="Arial,
verdana, sans serif">
Example
2: Viola!
The stylesheet is still being blocked, but now
there is formatting being applied to the newsletter
and the day is saved!
Named
Anchors do not usually work in Lotus Notes
No.
they do not. Next question?
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 win Table of Contents,
Menus and other navigation pieces.
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.
Final
"Notes"
While
the above article is by no means a definitive
guide to Lotus Notes, it should help you troubleshoot
some common Lotus Notes Email Marketing issues.
As people finally get around to upgrading their
version of the Notes client, you will start to
see many of these issues simply go away. However,
as most of you are more likely to be the sender
rather than the receiver, you pretty much have
zero control over this. Learn to live with it.
Learn to love it. Pray to the upgrade gods often.
Feel
free to contact us if you have a specific Lotus
Notes HTML Email issue. (See below).
Additional
Resources
Lotus
Notes Discussion Forums - Developer Domain
NotesTips.com
- Tagline: "Think Lotus Notes and Domino"
Frank
Cseh's Lotus Notes Page
SearchDomino.com
- Their editors scour the Web daily and summarize
articles and resources!
Comments
or Feedback? Tips and Tricks? Need Help? Email
tom@templatekit.com
or visit Tom's Website, TemplateKit.com
------------------------------------------------------------------------------------------------------
This
article may be reprented freely, email tom@templatekit.com
for an HTML or MS Word Version. Article may not
be edited or altered in any way.
|
