TW Blog :: Archives for July 2003

Conforming WWT To Web Standards

Relates to Web Standards and Accessibility, CSS Design

I recently came across the Wildfowl and Wetlands Trust website. An excellent cause, and close to the heart, with a local centre not far from me in Slimbridge. The website is full of content, but alas, like so many, the markup of the site heralds back to the old days of extensive table nesting, deprecated font tags and shim graphics. With extensive content, I would like to have been able to view the site through my Lynx browser, for quick access and navigation, but the markup simply doesn't make this feasible.

There still seem to be so many websites in the UK being built with bad practices and lack of conformance for Web Standards and Accessibility. It is a real shame! And perhaps potential clients need to better informed of the cost-benefits, potential visitor revenue, indiscrimination, and search engine optimisation that can all be acheived by a confirming website. Anyway, I decided to have a quick stab at cleaning up the home page of the WWT, using CSS 2 and XHTML 1.0 Strict.

The first draft (well actually it is the second, since the first pass with absolute positioning seemed to create some rendering issues across browsers) seemed to fit together quite nicely. It carries well across all the major Windows Browsers ( IE, Netscape 7, Mozilla and Opera 7) however I haven't had a chance to test it on other platforms yet.

The draft is still fairly rough, but the XHTML validates as does the CSS, and although I have not fully optimised the MarkUp to meet the most stringent of Accesibility Guidelines, I have added appropriate markup to allow the to page meet the requirements for Level A Conformance.

The benefits are immediately obvious.

• Excluding images, the file size has been more than halved from 29.4 KB to 13.6 KB for both the XHTML document and supporting style sheet. If just 0.1% of the WWT members visit that single page per day, the bandwidth savings will be in excess of 45MB per month! Hypothetically, if the server is on metered bandwidth, that could translate to a major cost saving if the total number of visitors and page views per month are put into the equation. Bandwidth usage could actually be reduced by another 8KB (per visitor per page) if the graphical navigation system were removed in favour of CSS.
• The page is now portable across a wide spectrum of User Agents, including PDA's, WebTV, Braille and Screen Readers. Not only does this avoid discrimination, it equates to potential for a higher turnover of visitors. (Actually the ugliest display may come out in IE5.x, since I have not incorporated the Box Model Hack into the current stylesheet yet).
• The separation of content and design allows much better management of the site copy, optimisation of search engine key terms, and cleaner markup for navigation and spidering by WebBots and the like.

When I get some time I hope to improve on the current version and see how low I can actually get the bandwidth usage. I will also raise a few of the issues that I have encountered.

Posted on Tuesday, Jul 01, 2003 at 23:36:48.