Lotus Notes – how to build the perfect email

Lately work we have had to build numerous email newsletters (e-zines, and sometimes even “eFlyers”?!) with a huge amount of content and very image heavy. The number and frequency of these emails mean a challenging turnaround time and the use of templates of previous email wherever possible.

However the client dropped a massive bomb shell when it was revealed that they (as a large corporate company) use Lotus Notes 5 as their primary email client. This is bad.

Not only does this mean we have to output a huge amount of work but it also means that this work must be absolutely indestructible, unbreakable code.

If you look at the following examples of emails displayed between Lotus Notes and Microsoft Outlook, you can see how perfectly valid and working emails can be slaughtered left, right and center by the Lotus Notes HTML rendering engine.

Sony emails.

Sony email which uses styles quite heavily. While this means that the email will not display as designed in email clients that do not support CSS (Gmail, Notes amongst others) at least it will degrade gracefully.

Hugo Boss emails.

This Hugo Boss email doesn’t use any style for any layout or formatting byut still breaks quite badly.

My preferred method would be that of Sony, or even plain text emails – which a recent .net podcast (episode 19) said most people surveyed would prefer to receive. Unfortunately the limited technical experience of marketing staff that have to sign off these emails mean that we have to make the emails work in Notes if possible, even if the actual recipients receiving the email in Notes is minimal.

There are a number of methods that can be used to make sure you emails display as planned in Lotus Notes and hopefully the trials and tribulations I have endured for the past year can be kept to a minimum for others by following these rules.

  1. NO BACKGROUND IMAGES

    They just don’t work. This doesn’t just apply to Notes, but also includes other well know email clients. This should be a general rule for all HTML email builds.

  2. ALWAYS SET OUT TABLE COLUMNS FIRST

    No matter whether widths are set on the

    tags themselves, it has always helped me to have an empty row right at the start of every single table, with 1px in height spacer images defining the table cell widths.

  3. NEVER EVER USE ROWSPAN

    Now I don’t know why this doesn’t work, but it proved to be a thorn in my design for a long time. I find that the only way to guarantee the reliable display or a table exactly as it should be is to ignore that rowspan even exists and insert tds in every row wherever required.

  4. DON’T SPLIT IMAGES HORIZONTALLY

    If you have a wide image, don’t split it across a row. This often results in extra space for no apparent reason, stretching the table row containing the images. Even if you have distinctly separate images, if you can get away with just using one full row width image then do it. And fight to keep it that way.

    If you absolutely have to split images horizontally, each must be in its own table cell, because even with absolutely no whitespace in the code, Lotus adds a single character space between each image.

  5. USE NO STYLES

    In my emails, I usually set text size at 11px or 12px using a style in my font tags to get around a link and copy size bug in hotmail. However Lotus Notes ignores this, and ALL other styles. So use no margins, padding font declarations, in fact use no styles at all. Go back to the early 90s, when CSS didn’t even exist!

    Since I still like to make sure the link and surrounding copy are the same size in hotmail, I still define font size, however use 13px with a size="2" back up in the font tag (or 10px and size="1").

  6. DO NOT USE P TAGS

    Lotus Notes doesn’t recognise the margins that should apply between p tags, so I find that declaring a font tag then using spacers to separate copy blocks, as follows:

    <font face="arial, verdana, sans-serif" size="2" color="#333333" style="font-size: 13px;">
    Copy paragraph 1.
    <br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />
    Copy paragraph 2, and so on throughout.
    <br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />
    </font>

I’m sure there are more techniques and ways to make HTML emails work in all email clients, but I find that the above guidelines help me work more efficiently by decreasing the time spent on fixing Lotus Notes issues (especially when Notes development is a requirement), in fact most are so reliable that I have also started using the above rules in all emails. You never know, they might help when it comes to developing emails for Microsoft Outlook 2007, when Word is used for parsing HTML emails.

7 thoughts on “Lotus Notes – how to build the perfect email”

  1. Wow! It’s almost as though insisting on HTML-only email has taken web standards back ten years!

    It must be about 6 or 7 years since I’ve used font tags within an HTML page.

    I always insist on text-only emails — and actually force Outlook 2003 to display all emails in so-called “plain text”.

    But well done on getting a fix that works — and for sharing it. Incidentally, do you have to specify a DOCTYPE for this code, and if so which do you use?

    G

  2. I actually use HTML 4.01 Transitional DOCTYPE for my emails, however I have been told that using < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> is the most reliable for emails. There’s only so far I’ll bend though!

    Anyway the head element is stripped in the majority of web email clients and even in some desktop email clients.

  3. Recently I also found that when an image is in a table cell and is exactly the same width as a table cell, a mysterious character space appears on the end, which then wraps to the next line – leaving a gap between any images supposed to join bottom to top.

    Therefore always try to leave a little space in a table cell after an image.

    I also still hate Lotus Notes.

  4. Apparently the last issue can be solved using display:block on the image. Thankfully I don’t have many emails to build anymore.

  5. Lotus Notes is the worst ever email software I ever used in my entire life.

    Why, oh WHY company buy this crap. What are they thinking about…?

    Thank you for your tip, I will use them.

Leave a Reply

Your email address will not be published. Required fields are marked *