It is amazing how the same idea seems to grip multiple developers at the same time. While the heydays of yet another image replacement technique seems to be over, flexible multicolumn CSS frameworks are the new sliced bread.

Thierry of TJK Design shows his One clean HTML markup, many layouts, Mike Stenhouse offers a CSS framework and Dirk Jesse brings Yet another multicolumn layout (in German).

If that is not enough, Alex Robinson gave me his impressive monster of an article + generator “one true layout” (to be released on P.I.E. soon) for review.

Update Stop the Press: The article is now live and can be read and enjoyed: In search of the One True Layout

A lot to read and skim through, and very great ideas, too. My concern is that it seems that everything generic tends to become a bit bloated and cryptic over time (DHTML libraries anyone?) and we’ll need to see how we can chop the ideas down into digestible chunks.

A lot of extra code has to be added to support outdated browsers, for example, and it would be cool to have these extras in an extra style sheet, for those who want to say “to hell with bad browsers” instead and keep their sheets clean and maintainable.

Sorry if that is already the case in some of those, I am also busy reviewing the AJAX/XML chapters for the upcoming JavaScript Reference for O’Reilly and prepare my webcast for the world usability day.

Read the linked bits now, you know it is good for you!

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.