TW Blog :: Archives for July 2003
There are no facts, only interpretationsFriedrich Nietzsche
Gecko Gaps
Relates to CSS Design and Browsers
Following a quick browse of the Bible this evening (in the absence of Big Brother Eviction's - supper viewing only, honestly!) I resolved the gap issue in the Mozilla browsers with the Forest Adventure web site rebuild. It all boils down to the way Gecko (in true Standards Mode) interprets the position of inline images in relation to the baseline. That is they sit on the baseline allowing a gap for the descending curve of certain lowercase letters (eg g, y).
That is all fine and dandy, and JZ gives an obvious quick fix - to declare images as block level elements - img {display:block;}
However, while this works in the scenario of a Transitional page with navigation images still nested in tabular cells, it will not work in a Strict environment with a horizontal nav bar composed of images nested in inline list
elements. The fix was no more strenuous all the same. Since the gap is based on the defined font size for the element regardless of the existence of text, simply down sizing the size of the font resolves the gap - ul {font-size: 1px;}
Zero is not an acceptable value, but a font size of 1px clearly does the job. Of course as a user increases the default screen font size (in Mozilla or Opera) there comes a point when the gap will reappear, but by this time, the font is so large on rest of the page, it has become pretty illegible and ugly anyway!
Posted on Jul 05, 2003 at 01:23:21. [Comments for Gecko Gaps- 0]
RNIB Free For All
Relates to Web Standards and Accessibility, CSS Design
The new RNIB website has really kicked up a fuss in recent weeks. Afterall, the facelift is 100% a disaster! Here are three admirable rebuilds done so far…
- Simon Willison's Rebuild - The one that got it all going!
- Tom Gilder's Rebuild
- Isolani's Rebuild
Let us hope RNIB start to take note…
Posted on Jul 03, 2003 at 23:30:51. [Comments for RNIB Free For All- 0]
Accessibility For Google
Relates to Accessibility and SEO
Scribbling.net offers an interesting article on optimising content for Googlebot (the Google Search Engine indexing software). It demonstrates the similar thinking that goes into SEO and building for accessibility. Search engine software is really the ultimate disabled user, limited by it's specific algorithms.
The point regarding the relationship between an anchor and anchor text is of obvious significance here. I had already become aware this could create problems when I first ran these pages through Bobby. It automatically picks up on repetitive anchor content (eg the use of permalink). I can see the point - a visually impaired user listening to their speech browser could get quite confused with the same anchor name repeated over and over. Noted for change.
Posted on Jul 03, 2003 at 23:30:14. [Comments for Accessibility For Google- 0]
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+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
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 Jul 01, 2003 at 22:36:48. [Comments for Conforming WWT To Web Standards- 0]
