Inspired by Wired

Wired News launched a new site design today that is a revelation in its use of XHTML and CSS. Although Loosely Coupled has standardized on XHTML-compliant markup tags, and uses cascading style sheets (CSS) for formatting, I've avoided using CSS to control page layout because I believed that doing so would break compatibility with older browsers. Wired's new layout demonstrates conclusively that that's a complete fallacy.

While it's true that older browsers don't render the layout correctly, the content and navigation is still perfectly visible and coherent in Netscape Navigator 4.7, for example (which out of a combination of nostalgia and masochism I've kept installed on my PC, even though I always work in IE5). Wired's layout is so immaculately uncluttered that I can well believe their claim that it's equally accessible in older versions too, which when all is said and done is the only thing that really matters to their users.

Inspired by Wired's example, I've determined to move to a similar implementation of CSS-driven XHTML for Loosely Coupled at the earliest possible opportunity. I have even more of an incentive to do so than Wired, who say that up to 14 percent of their visitors use browser versions that can't interpret CSS. According to my HitBox Professional stats for the past 30 days, an incredible 99 percent of Loosely Coupled's visitors use CSS-compliant browsers (what an up-to-date lot you are!).

It will take a few weeks before you'll see the results of that effort, but there are some things that Wired has done that I'd like to implement straight away. When I viewed the page source for their new layout I noticed two very powerful features.

The first is the inclusion of an invisible "skiplinks" stylesheet class, used to provide stepping stones for visually impaired users so that they can jump straight to search, navigation or content. Personally, I'd fondly imagined that Loosely Coupled was a model of accessibility until I read the item on Skipping Over Navigation Links in Mark Pilgrim's marvelous tutorial, Dive Into Accessibility. Now I know that it's far from ideal, I'm eager to emulate Wired's superb implementation. I'll be rolling out their method across the site within the next day or two.

The second feature is the use of "id" tags to label every component of the page. This is a concept that Loosely Coupled already uses to identify different elements of each weblog item, which can then be parsed into RSS using programs like Pro2rss. A useful side-effect of marking up content like this is that it becomes a lot easier to then parse the content and transform it into different formats simply by reading the XHTML source. Although at first sight this looks suspiciously like good old-fashioned screen scraping, it's actually more sophisticated than that, because it's reading tag attributes that are invisible to users and which are there for the specific purpose of structuring the content.

In other words, using XHTML tags to parse content in this way is a great example of a loosely coupled approach to exchanging and aggregating data. There are some repercussions for publications like Wired that earn revenues from advertising, since it makes it easier to access their content without actually viewing their pages (and thus the ads embedded in those pages), but on the other hand it's a great boost for people who believe in nurturing the consequences (often unintended but nevertheless frequently welcome) of syndication.

Talking of which, I've held off longer than I originally meant to from returning to the subject of RSS 2.0. In the meantime quite a bit of interesting and constructive progress has been made by others, which encourages me to return to the topic. I hope to converge my new-found excitement over Wired's new page structure with some interesting illustrations of how it relates to RSS — just give me a few days to hack some code together, and I think you'll find the results quite intriguing.