Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

The new RNIB site in CSS

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.

Posted 25th June 2003 at 11:33 pm

This is The new RNIB site in CSS by Simon Willison, posted on 25th June 2003.

View blog reactions

Next: Off to Glastonbury

Previous: More caching

5 comments

  1. Nice job...looks good in NS 7 for Mac, even at 200% zoom...almost no text overflow, and nothing that affects usability. But the default font size seems a bit on the small side (again, viewing on a Mac), especially for a website that might expect to attract a lot of vision-impaired (in addition to blind) visitors. Perhaps you're just trying to duplicate the look of the current site...?

    Eric - 26th June 2003 03:45 - #

  2. We just tried it on our test machines here. There are a few problems in IE 5.5 - some of the content appears a lot further down the page than it should, and there are horizontal scrollbars (although none of the content is displayed off to the right, just a big space). Looks great in Safari. But as you say, your demo proves it can be done, and I'm sure these problems could be worked out.

    I just had a look at "our new site" article on the proper RNIB website, and none of the accessibility type links at the bottom work. They appear to be using some sort of clickthrough counter script which is broken, but the links themselves contain backslashes which I believe will only work in IE (?).

    Pity really. I think we could really do with an organisation such as the RNIB to show why accessibility is important and lead by example.

    Tim - 26th June 2003 10:07 - #

  3. Well done, Simon. I was thinking of doing exactly the same thing - no better way of proving that it's possible than just getting on and doing it. I'm glad I didn't now, though - no point duplicating effort! Like you say, it looks much better in Mozilla.

    I did some screen shots in Pocket PC IE of the live RNIB site (completely unusable) - it would be interesting to see how well your mockup HTML4/CSS version behaves now under the same test. A whole lot more usable, I'd wager.

    Ian Lloyd - 26th June 2003 11:36 - #

  4. CSS version renders a hell-of-a-lot more smoothly in Opera 7.11 than the original HTML version.

    Wesley Mason - 26th June 2003 12:27 - #

  5. (apologies for cross posting to you tres hombres working on this noble effort) I'm just getting started out on CSS so probably have no room to talk here. I agree with your sentiment that the RNIB shouldve and couldve used CSS for layout. What surprises me though is that the 3 examples I have seen from you, the Isolani person and Tom and none of them work as well as the RNIB site. I'm not blind but a blind friend told me recently that only 20% of people registered blind cannot see at all. The other 80% have severe visual impairment but many of these do LOOK at the screen (up close). One thing they do is ramp up the font sizes on their browsers. In all the re-designs I've seen, using a 36pt font gets the text overlapping apart from on the RNIB site. If we are to propose CSS is better and more appropriate for accessibility, I still think there is some proving to do. Fixing pixel widths on side panels doenst help - isnt there another way? As I say, I'm only learning myself but they say the proof of the pudding is in the eating. The CSS redesigns I have seen do not tolerate a large font size as well as the current table-based RNIB site. I'm looking to learn here rather than criticize!

    Litsl - 9th August 2003 01:01 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/06/25/RNIBinCSS

A django site