I bounced the following idea off some people at @media (Douglas Bowman, Molly and a lot of others) and I am ready to go along with it. It’d be good to hear some thoughts though:

We all know and love CSSZengarden. It showed the design community what can be achieved with CSS and how easy it is to redesign a web page completely, simply by applying another style sheet.

However, for our day to day web development life, the garden has become a bit of a problem, mainly because:

• The designs have become an image replacement competition instead of testing what CSS can do
• It is too easy to style only one document that has been marked up with loads of IDs and classes – in the real business world we’ll have CMS defining the content markup and we don’t have that option
• The focus seems to have shifted from style and functionality to style/brand on its own.

My idea now is to start a CSSFactory. The idea is the same as CSSZengarden, the difference though is:

• The Markup will be a 5 page web site with different layouts and content for each page
• The Markup might have variable content order on reload to simulate a CMS that allows editors to rearrange them
• The content will be available in English, German and maybe French (I’d need help with the French – Stephane?)

That way we can prove that it is possible to create bullet-proof CSS that can be applied to real life web sites, and maybe get a bit more buy-in from project management and managements when we try to advocate standards.

Comments?

14.07 Changes

Ok, I realise that some of the bits mentioned here confused people, so here are some extra explanations:

• The JavaScript is only an idea to simulate how a real backend would allow editors to change the content. I intend to use it to avoid the need to reload the pages from the server each time. Saves me server traffic and you time during development. I develop and write most of my hobby works (like this idea or the unobtrusive JavaScript course) on the tube whilst commuting every day, I thought it’d be handy to show how flexible CSS is without the need to run a localhost with PHP.
• The random order of course will only apply to the content slot of the template. Much like we do for most clients. One of the basic princibles of accessible and usable sites is that we keep the navigation on the same spot throughout the site, moving it would be counterproductive.
• I started on some of the markup, but want to get an offline version of the course and the linkrot prevention idea out of the way first. I also wonder if I should get a dedicated server and domain or use this one instead.

I must have been kissed by a Muse at @media, because I had another idea, that I’d like to get help with.

The problem

• There are far too many outdated, obtrusive and plainly badly written tutorials and scripts out there
• As they have been around for a long long time, they are ranked very high in search engines, and new, interested developers will find them instead of The Good Stuff™.

The dilemma

As the developer or writer of these scripts and articles, you do have the choice of the rock and the hard place:

• You hardly have the time or the inclination to rewrite the articles, sometimes they have been published by a third party and you cannot do that.
• You don’t want to delete them, as you do get visitors, and they might be persuaded to explore your publications more and find The Good Stuff™.

One solution

What I thought about, and many people at @media agreed is that there should be an option to keep these scripts and tutorials for achived reasons and tell the visitor about The Good Stuff™
The idea is to set up a service, which I intend to call Obsoletely Famous (yes, I miss Futurama), which is basically a RSS feed listing good, modern articles and resources for the topic at hand.

(Basically a pre-filtered del.icio.us, as many people linking to it sadly enough does not necessarily mean it is a good quality resource, it is simply popular, probably by oversimplifying the issue at hand. A good example of that are a lot of ALA articles, where the real good information ended up in the comments, but not many users go there)

As the developer / maintainer of the script you can set up a bridge page (or a custom error page) that tells the visitor that the above was fun while it lasted, but the list here actually shows better ones.

The benefits

• We re-use the high google ranking to promote The Good Stuff™
• We help writers and scripters / developers to back off things they are not proud of any longer without giving the visitors alternatives
• We ensure that newer users find The Good Stuff™
• New writers of The Good Stuff™ can easily reach more people

The plan of action

Give me the bricks, and I’ll build the house

Basically, we need to identify our areas of expertise and define The Good Stuff™ links. Then I can set up the RSS feed and create some example bridge pages. In the long run, I might persuade my evolt colleagues to host it.

Areas covered:

• JavaScript
• DOM JavaScript
• CSS
• HTML
• Visual Design
• Usability
• Accessibility

We can start by listing some here in the comments.

Check your own stuff

• Let’s all go through what we have online and see what is a possible candidate for becoming obsoletely famous (I know for a fact that 75% of my onlinetools.org is). Squint your eyes and look at it in a menacing way – make it aware that its days are numbered^*
• Scan your bookmarks for good, modern tutorials and name them here.

^* optional

The @media conference is over and taught us mainly that there was a misconception of what the audience would be. The first day was a bit of preaching to the converted, whereas the second one seemed to realise that and start an expert discussion instead.

This afternoon, the JavaScript / DOM think tank will meet in the pub to discuss things further, mainly discussing the impact of DOM changes and screen readers.

Derek Featherstone of WATS fame uttered a quite interesting remark during his testing for accessibility presentation:

We advise screen reader users to turn JavaScript off. This is to avoid nasty surprises and because most JavaScript enhancements are visual only.

Excellent point, IMHO. We use object detection to check if the browser supports certain scripts, and punish Opera 6 by cheekily testing for createTextNode and getElementById.

This is a much cleaner way than browser sniffing and easy to check. However, when it comes to screen readers, a lot of our testing really is assuming what they should do or not. Especially new DOM developers assume that a screen reader works like a text browser, which is not true, as modern screen readers do detect and speak out DOM changes.

More over a pint later.

From Thursday on, I will attend the @media conference in London. In case anyone wants to have a chat there, I am rather easy to find:

Just came back home from a Tori Amos gig in Hammersmith. If you don’t know Tori Amos, go to the nearest independent record shop (don’t support the big ones) and buy one of her CDs, read the lyrics while listening to it and be amazed.
It was a very good gig, she is some wonder (playing a piano and an organ at the same time and singing does require some skill). Although, some things I have to remark:

• Ticketmaster are a bunch of c very greedy people indeed and when you buy a ticket that states “standing place only”, bring a spyglass, as you will be at the very end of the room far far away from the stage perched like tube commuters, and that for 28 pound!
• Our society consists to 10% of weak bladdered freaks who cannot stand a 100 minutes performance without two loobreaks. Please stop downing 5 pints before you go to a concert
• George Michael has lyrics! When Tori covered “Father figure” I realised that.
• There are not enough red haired stars on this planet