TW Blog :: Entries for CSS Design
Over himself, over his own body and mind, the individual is sovereignJohn Stuart Mill
Another Facelift, Forest Adventure
Also relates to Web Standards
The Forest Adventure website is a project I worked on early in 2002. At the time my construction focus was on keeping a design to the client's requirements, while ensuring the document validated. This site was built with HTML 4 Transitional, since the layout was reasonably demanding and tables still dominated. I decided to go back over this site this afternoon, in an attempt to build it more inline with Web Standards using more advanced CSS and XHTML 1.0 Strict. The home page is very image intensive, and there is a third level of navigation that is really redundant, but the layout evolved from the client's own wishes, so I have kept to the same structure.
The first draft was not difficult, and the new markup and style sheet took about 3 hours to put together. I also reworked the images, reducing their file sizes using alpha transparencies in Fireworks (many of them sit on the speckled green background of the page).
The total file size of the new version was just over 100KB, reduced from 140KB, with the actual page and style sheet coming in around 10KB (excluding some metadata). Some interesting points
- It was necessary to fold the horizontal list menus to prevent unwanted gaps appearing. In fact there is still a persistant gap on Mozilla browsers, which I have not been able to cull yet. Folding does make the code somewhat illegible to read, but the structure is perfectly legal.
- The biggest challenge came in the best way to interpret the central menu with short description summaries to some of the major pages.
I decided not to use another list, but present each option as a header with corresponding paragraph. This led to the further challenge of how to present
this structure duplicating the way it looked in the original page. The obvious choice was to use the direct descendant selector
h3+pwith alternatingh3defined as members of the sameclass. The result of this worked great in Opera and Mozilla, but of course, IE does not understand the direct descendant selector. So instead the first draft falls foul to classitis a bit and associates eachh3andpto an alternating class. The effect on bandwidth is not significant, but the former approach is so much cleaner.
I am quite pleased with the outcome of this draft, since at first glance it looked like a quagmire of tabular code that just wouldn't fit into the scheme of Web Standards markup. The new version is perfectly accessible in text based browsers, and much more portable. And it passed validation at first run, where normally there is an error to clean up somewhere, so something is going right!?
Posted on Jul 03, 2003 at 22:54:20. [Comments for Another Facelift, Forest Adventure- 0]
Conforming WWT To Web Standards
Also relates to Web Standards and Accessibility
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 Jul 01, 2003 at 22:36:48. [Comments for Conforming WWT To Web Standards- 0]
