I finally got around to develop the scripts needed for the CSS toolshed. CSS what? Oh yeah, some may remember that I wanted to provide a means to simulate a CMS driven site to show that CSS can be used on an enterprise level, too.
Initially I meant to call that CSS factory but some people rightfully pointed out that factory has a negative connotation. Therefore I decided to go for CSS toolshed, to take the image of the Zen Garden a bit further.

In a nutshell, the CSS toolshed will be a site that:

• has three different templates (homepage, main section, detail section, meta page)
• has prepopulated navigation
• has a constantly changing content section – much like a CMS will have when the editors get their hand on it.

A sneak preview with my dummy stylesheet is now available and once I proved myself that the script works, I will need your contributions to make the thing work (clickthe link top right now that will show all the available styles). Have a click through the site to see the changes as they occur now, later on the content section will be populated with content filled building blocks showcased in this collection.

Don’t fret, there will be documentation as to how the page is built, and how to participate.

Update: judging by the comments below it seems it was not obvious that the JavaScipt is only needed to support MSIE. I added this even more obviously to the explanation text. Hopefully it is clearer now…

I was asked by a friend yesterday to review their company web site and was amazed to see table layouts with MM_ JavaScript rollover abominations still being paid good money for.

One of the arguments for the oldschool design was that they wanted “buttons” for navigation, and I promised to make a demo of a text/CSS navigation that does look like a nice graphical one and allow for font-resizing without breaking apart. It is nothing special, it has been done before but what the hey, have a look for yourself:

Proceed to the flexible navigation example

I am really looking forward to Wallace and Gromit and the Curse of the Were-Rabbit and wanted to book tickets for next week, as it’ll be too packed now. Well, I went to the Odeon web site to book tickets for my girlfriend, her sister and me, just to realise it does not work at all on Firefox. You seem to need MSIE to order a ticket, which makes the accessibility statement even more ludicrous. There have been some nasty incidents with that in the past, and it seems that Odeon haven’t learnt a bit.

Now, even with MSIE the site is ridiculously hard to use – 5 clicks where one could be enough, flashy navigation and re-invented scrollbars being in my way all over the place. I ordered tickets for Thursday and got a “thank you” page after entering my credit card details thanking me for my ticket order for Tuesday. There was no review option of my order before sending my payment off.

Not to worry, there is the phone. I called the number provided on the site and got to an automated voice recognition system that works quite well – provided you want to order tickets, not to ammend your order or complain about an issue. Ordering tickets and hearing what is on are the only options.

The contact us section of the page offers another telephone number which informs me that I have to pay extra to get this service! No thank you, I will not pay for your bad IT implementation.

Last option was the email provided: bookings@odeon.co.uk. This one came back a day later. with the following:

Your message Subject: Re: Odeon Booking Confirmation was not delivered to: Bookings@odeonuk.com because: Router: Unable to open mailbox file ODEOND4/SRV/ODEON mail.box: Server not responding

How is that for service?

Specificity is not only the aspect of CSS that will make any fluent presentation stop in its tracks (or am I the only one who has problems pronouncing it?), it is also a very important part of CSS design. Basically it allows to override settings defined earlier in a stylesheet by adding other element, class or ID names.

h1{color:#fff;background:#369;}
will not apply any longer when you add another id of an element the h1 resides in:
#home h1{color:#000;background:#f8f8f8;}

While it is easy to trial and error initially, the more you mix and match elements, IDs and classes the harder it can get to predict the outcome.

Andy couldn’t stop his nerdy alter ego and came up with a star wars based, wonderful cheatsheet on the subject which initially had some errors that Molly rectified.

Wonderful stuff and something to hang up in the office.

I’ve been too busy this week to actually read the new webdesign magazine released by the folks at particletree. The first issue of Treehouse can be downloaded for free and you have a special offer of the next few issues for 15 dollars.

From a first glance I like what I see, although I am not too good with reading PDFs on this work machine (Thinkpad T40). For some reason I’d prefer a one column version, which could also be great for handhelds.

The content is a good mix of coding tips, best of the web links and interviews with some faces of web design / development. I am not too much of a fan of interviews that are not related to a product release or change, but focused on the person itself. We are web developers, not pop stars or big brother participants. Bad enough that every news agent is stacked with celebrity magazines.

I will buy the issues and see how it goes. A general “thumbs up” to particletree for taking the leap into developing this – it is a lot more work than it looks.