TW Blog :: Archives for July 2003

Another Facelift, Forest Adventure

Relates to Web Standards and CSS Design

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+p with alternating h3 defined as members of the same class. 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 each h3 and p to 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 Thursday, Jul 03, 2003 at 23:54:20.