Owls Count

Earlier this week saw the launch of a new website for British Orienteering. For reasons concerned with membership renewal the site has gone live before it is finished, which means that some features are missing or not fully working. First comment is that this is a big improvement on the old site - it looks much nicer and clearly a great deal of thought has gone into the new site. However, I have some concerns/problems and these will be mentioned in this post with suggestions on how the problems could be fixed. I am posting this here as it gives me the easiest way to include screen shots [1] to illustrate my points.

Homepage

Welcome to Orienteering
Problem: This box only displays correctly with a small font. Testing on all graphical web browsers on my machine [2] I see something similarl to the screen shot. I.e. the text spills into the dark blue bottom border of the box and, often, beyond.
Solution: Split the box so that there is a top, side, and bottom. Then the bottom can be put only when all the text has finished. This will require a graphical change to how the picture of Jamie is displayed, since it would no longer nicely be bordered by the top/bottom of the box, but would solve the text spill over problem.

Contact Us
Problem: This is an image, which means that copying the address or e-mail is not possible.
Solution: Convert this to text.

Main Menu
Problem: This is in Flash only. If the user does not have Flash installed then there is no way to navigation. This will have particular implications for accessibility.
Solution: Add a text based menu alternative.
Extra Solution: On the homepage implement the main menu on the left hand side as a text menu. There is plenty of space for it between the ‘Search’ and ‘Contact Us’ boxes.

Font Size
Problem: The default font size is small.
Solution: Increase the font size.

Side Menus

Side Menu
Problem: The side menu is in Flash, it has no text alternative, and the font used is small and difficult to read on the background.
Solution: Ditch the use of Flash - it is simply unneeded here. Convert it to a text based menu and all the mentioned problems are solved. The same effects can be created using a suitable combination of CSS, images, and JavaScript.

Login, Join Now, Site Search
Problem: All these are images, which is simply unnecessary.
Solution: Convert to text, with suitable CSS and, possibly, background images will create the same effect, but make it more user friendly. Also, for consistency, the ‘Login’ and ‘Join Now’ should not be in all capital letters.

White Space

White Space
Problem: Too little of the screen space is used for main content. On the screen shot to the left, at a screen resolution of 1400×1050, less than a third of the screen space is used for the main content. At 1024×800 it is less than half. This leaves a lot of white space, which looks visually poor.
Solution: I am not sure there is an easy solution to this that would maintain the visual design while using more of the screen. However, it is something that should be looked at - especially since screen sizes are becoming larger and widescreens in particular becoming more common.

Overall

As I said at the beginning, I am happy with the new site. It is a great improvement on the old site, and when finished it promises to be a site offering many useful features to British orienteers. The look is clean and simple, with the colour scheme being used effectively throughout the site.

Footnotes
1. For some reason the left side bar to the page is not displaying. I am not sure where the problem lies and I have manually added this side bar to the third screen shot.
2. I use Kubuntu and tested on Firefox 2.0.0.7, Firefox 3.0a9pre, Konqueror 3.5.6, IE5, IE5.5, and IE6 (the last three through IEs 4 Linux.