Simon Willison’s Weblog

The new RNIB site in CSS

25th June 2003

Just to show it can be done, here’s the new RNIB site design (as mentioned earlier) re-done with a CSS layout. It’s something of a first draft—I’ve only tested it in IE6 and Firebird on Windows and it still has a few glitches here and there, but as a proof of concept it works pretty well. Here are a few notes on the implementation:

• The demo uses valid HTML 4.01 Strict and CSS 2.

• The demo uses 10 KB of HTML and 4 KB of CSS. Compare this to the 47 KB of HTML in the original page and the main advantage of CSS becomes readily apparent. The demo also uses a few less images as some of the image effects in the original were replaced with CSS borders.

• The demo actually works better in Mozilla than the real thing does—several gaps in the design are closed up giving a result that is visually closer to the original as displayed in IE.

• I was forced to use a single layout table for the three news items next to each other. I tried several ways of doing this part of the layout using CSS floats, but unfortunately each of them caused a different problem in IE6 thanks to bugs in its float implementation. It’s probably possible to do this with pure CSS and still have it work in IE6 but for the moment the table works fine and does nothing to detract from the overall accessibility of the site.

• The background colour in the left and right hand areas does not extend the full length of the document. One potential fix for this is to apply a tiled left background image of a coloured “stripe” to the document body for the right hand area, then apply the same kind of thing to a container div that wraps around the left hand area and the main content div.

• I chose to hide the CSS entirely from Netscape 4 using the @import method, as I don’t have that browser to hand for testing at the moment. A more comprehensive redesign could include simple style rules to make the site look vaguely interesting in Netscape 4 while more modern browsers got the full layout as the site is meant to look.

• While I’ve at least ensured that the demo uses labels in all the right places (unlike the real thing), there’s plenty of room for improvement on the accessibility front. Tab index and accesskey support would both be worthwhile additions.

All text and images in the demo belong to the RNIB. My markup and CSS are in the public domain. Should the RNIB ever decide to move to CSS in the future they are more than welcome to use some or all of my work as a starting point.