BizzyBee’s BizzyThoughts

Zebra striped views in the Lotus Notes Client - a different approach

Again 2 pictures, a side-by-side comparison. Snapshot of a view. Find the 3 differences!

Maybe you don’t see any difference, except for the refresh twistie (that’s the 3rd, and in fact, meaningless difference :-)). Maybe you do, but you don’t think it’s important enough. Maybe you do, but you like the image on the left more. It doesn’t really matter to explain my point.

What did I do?

I used background images for the action bar and view, instead of standard coloring and applying alternate row colors.

How did I do it?

1. I made a screenshot of the normal view (as the one in the left image)
2. The screenshot served as underlying image to create the gradients. This way I can respect the original dimensions of the data.
3. The gradients use the original color in the bottom area and evolve to just a bit darker variant of the color.
4. In the view area, I also added a gradient for the white rows to give it a little shadow.
5. The exported images (the jpg’s) are 1px wide and just high enough to be usable as an image that can be tiled. If you want to see the images, take a look at the jpg’s in the example background images.
6. Then I imported them in my image resources, set the action bar images (tiled) and removed the original alternate row formatting.

Advantages?

• The main advantage: if you want to change the look of your views afterwards, just replace the background images et voilà, a new view is born! Even if you don’t like the gradients, you can also apply this with non-gradient backgrounds, because it’s easier to maintain. Or maybe you don’t care about that, because you have that amazing open source tool Viewnify ;-).
• You get some new design possibilities, you’re a bit less restricted by what the Notes client can do.

Gotcha’s?

• Categories and plain view data must have the same fontsize and fonttype. If you don’t respect this, background and data will get out-of-sync, like in this image.
  
• Using shrink-to-fit for the rows will also cause an out-of-sync.
• As with the default view coloring options, don’t make it too much (heavy gradients, terrible colors,…)

(2 votes, average: 3 out of 5)

 Loading ...

8 Responses to “Zebra striped views in the Lotus Notes Client - a different approach”

1. Rob Goudvis says:
   November 9th, 2007 at 10:38 am

   Nice idea, but you may run into trouble when users have a different screen size and use different default fonts.

2. martin.vereecken says:
   November 9th, 2007 at 10:47 am

   Hi Rob, thanks for your comment.

   I don’t agree:

   • Screen size doesn’t matter, because the images are tiled, so usable up to size 1.000.000px by 1.000.000px and beyond
   • I set the fonts myself in the view properties, here I used a Tahoma 8pt. I agree that if the users work with Notes client on Mac ànd Windows ànd Linux, you would have to test in all these environments and look for a “common font”. In my experience, this is a rare situation in companies.
3. Andre Guirard says:
   November 9th, 2007 at 4:04 pm

   You might specify 8-pt font, but that’s not going to be the same number of pixels on everybody’s screen, since you have users who can’t read small text and set their computer to size things upwards.

   Also, you lose the ability to display multiple lines of text per row, shrink to fit.

   Maintenance is a bit of a hassle too, should you ever decide the text needs to be bigger.

   I agree it has a nicer look; it’s just the area of application is somewhat limited.

4. martin.vereecken says:
   November 9th, 2007 at 4:10 pm

   Hi Andre,

   Some interesting remarks you add here. I’ll add them to the gotcha’s section of the article, if that’s ok for you.

   Thanks!

5. martin.vereecken says:
   November 9th, 2007 at 5:55 pm

   Andre,

   I tested by using a larger font in my windows control panel, but the views don’t seem to suffer from this (Domino keeps the same size), so I didn’t add this one as an argument against.

   Also, after giving it a second thought, even if you change the font size it are really just 2 images you need to change - only takes a couple of minutes.

   Greetings,
   Martin

6. Daniel says:
   November 19th, 2007 at 4:07 pm

   I couldn’t understand some parts of this article Zebra striped views in the Lotus Notes Client - a different approach, but I guess I just need to check some more resources regarding this, because it sounds interesting.

7. Thomas Bahn says:
   December 29th, 2007 at 12:02 pm

   Hi Martin,

   try to change the DPI from normal 96 to - say - 120 in the first tab (Common?) of the screen properties. Any changes? And by the way, Macs usually have another DPI then Windows machines (AFAIK).

   Thomas

8. Martin Vereecken says:
   December 29th, 2007 at 5:20 pm

   Thomas,

   I agree, in those cases this technique would loose its value…

Leave a Reply