Lotus Notes 8 screenshot

Results from our acid test.
Click for the full version.

Lotus Notes 8 acid test result thumbnail

Lotus Notes 8

Summary: Lotus Notes is widely used, but primarily by people who work in organizations that mandate its use. It's an application which has a lot to offer the business world, but when it comes to email rendering Lotus Notes falls behind. Lotus Notes supports a number of items from our list, but they matter little when the most important properties fail. And they can even be detrimental to readability as with its support of color while not supporting background-color (see specifics below).

It should be noted that while the application GUI of versions 6.5 and 8 differ significantly, the actual email-message windows and how they display content is virtually the same. In fact, while reviewing our acid test in Lotus Notes 8, we only noticed one improvement from 6.5: support for width. This is a step in the right direction, but we would like to see more attention from IBM on properly rendering emails as they develop version 9. It should also be noted that our tests were performed using Notes in POP/IMAP mode, not using Domino Server on the back-end.

Update: See our update post for how the Domino Server improves the ACID test results. Last updated: 29 November 2007

Full Support
  • Descendant-selectors
  • Font family/size/weight/style
  • Font-family names with quotes
  • Font inheritance
  • List-style-image
  • Varying link-colors
  • Width/height
Partial/No Support (High Priority):
Partial/No Support (Cosmetic):

Find out more about CSS support in this email client.

Recommendations for Improvement

High Priority Recommendations

We believe it is critical that IBM improves Lotus Notes 8 to support the following CSS properties:

Background-image One core method of delivering accessible content is to call graphical elements using CSS rather than calling them inline. Contextually-relevant images (such as people, products, etc.) are most often appropriately called inline. However, graphics which make up the visual-design environment are best called using CSS. This not only improves separation of content/design, but it also helps with filtering for devices which do not support CSS because images aren’t downloaded. The benefits include bandwidth reduction, improved performance and enhanced presentation for text-only and aural email clients. When the CSS property background-image is not supported, images must be displayed inline. View a sample of how inline images look in a client which does not support CSS.

Background-position When background images are supported, support for positioning of said images becomes vital for readability. Background images are often placed inside a block-level element which also contains HTML text. The CSS property background-position helps us position background images so that nearby text doesn’t become unreadable. When positioning is unavailable, accessibility becomes a potential issue with the prospect of unreadability. View a sample of how text can become muddied with an inappropriately positioned background image.

Color/background-color Probably the most fundamental part of visual design is color; it’s the foundation for design. But beyond support for foreground/background colors for the sake of visual design, inconsistent or partial support can cause accessibility problems. When a black background color is eradicated while white text thereon is properly rendered, the result is white text on a white matte. And with Lotus Notes this is exactly what happened because Lotus Notes supports color but not background-color. Moreover, because varying link-colors are supported our white link became invisible on a now white background.

Float/clear The CSS property float is vital to designing with standards-based markup. When tables are removed from the designer’s toolbox, float is the groundwork for layout. Without it, an entire design can collapse. And as elements are floated in a layout, the property clear is there to make things right for any following elements. Clear ensures floated elements do not cloak adjacent content, float and clear go hand-in-hand. View a sample of how a lack of support for float can completely dismantle a layout.

Margin With no support for margin, a design looks considerably broken. But destroying the aesthetics of an email is just the beginning. When elements are forced together without a buffer, the text therein most often becomes unreadable. View a sample of how text becomes unreadable without appropriate margins on their container elements.

Padding While a lack of support for padding has fewer ramifications than margin, it is important for similar reasons. Most importantly because of its use in combination with other elements such as background-color, list-style-image and border. When used in combination with said elements, the impact of its absence is multiplied. View a sample of how a lack of support for padding can directly impact other supported properties.

Width/height Use of width is more common than height, and the latter is often used solely for aesthetic balance (extending background colors, etc.). But both are vitally important to any design as a lack thereof either can cause unreadability and demolish a layout. Width is critically important because the functionality of properties such as float and text-align are dependent upon it. When width is not supported, float becomes irrelevant and right-aligned or centered elements are not positioned respectively because the default width of a block-level element is 100%. And beyond the negative impact on aesthetics, a lack of support for height can lead to problems with readability as floated elements therein aren’t cleared without additional markup. View a sample of how a layout crumbles without support for width and height.

Normal Priority recommendations

While not absolutely critical, we would like to see IBM improve Lotus Notes 8 to support the following CSS properties:

Background-position a:hover Using a:hover to change the position of a background image therein the a tag is a widely used technique for interactivity in standards-based design. It is most often used to change background colors/images for faux buttons and navigation elements, typically comprising HTML text. While not critical to an email design, it enhances an experience with visual cues for linked elements.

Border A design certainly isn’t going to fall apart when its borders are compromised. But when they are missing or improperly rendered, it’s obvious something isn’t right even if that something can’t be identified.

Line-height With a lack of support for line-height, a design hardly falters to a state of unreadability or inaccessibility. But this property allows a design to breathe and increases the efficiency at which someone reads. Thus it adds value when used properly.

List-style-image A design can be enhanced by dressing up bullets in a UL. The two most popular methods for making this happen are the default list-style-image and an alternate, more controllable method using background-image and padding. When list-style-image is defined and then not supported, the degradation is minor in that a default bullet is displayed. However, it’s a modest property which, when supported, can greatly enhance a visual design.

Version History

24 Dec 2007
Clarified that these results are for the IMAP configuration, and that Domino Server configuration performs much better
28 Nov 2007
Initial recommendations added

Noticed any differences?

If you've used Lotus Notes 8 recently and noticed any results that might differ from our findings, we'd .

Work for IBM?

We'd love to work with you in any capacity to help Lotus Notes 8 embrace these recommendations. and tell us how we can help.

" OR logged_in_group_id == "1"}

[edit this entry]