Archive for January, 2008

Last week Belle, owner of BeansBox, invited me to join their team in the WIF 2008 contest. After reading up on what WIF is actually about I was thrilled to take up the 24 hour challenge!

This years theme was "Water Is Life" with the following selection criteria:

• ergonomics
• accessibility
• interactivity
• rich media
• drafting
• homogeneity
• interaction
• emotion
• originality

Notice Accessibility is part of the selection criteria. This is a new criteria introduced this year. It just goes to show that in todays web, Accessibility is a necessity and not an optional after thought. I'm sure Accessibility will become one of the hottest topics of 2008.

After some brain storming with Den and Belle we found ourselves at the same level. We wanted to tell a story, educate and engage the user. What better way to engage than a Quiz, we thought? So that's what we did! And this is our WIF 2008 pre-selection masterpiece.

Each page of the site is sectioned into two parts. First the Quiz then the main site content. It's structured like a charity/promotional site to raise awareness of the water crisis we face in the world today.

Admittedly the site is not without it's flaws; namely JavaScript, CSS and images are not optimised, the Quiz is shown at the top of every page which is quite annoying; our plan was to add a cookie to remember the status of the Quiz (i.e. hide or show and current question) but time just ran out. Also the Quiz does not work in IE6 but I'm not too concerned with that one, especially as this is a contest to demonstrate what web designers can produce with current browsers.

I'm proud of what we've achieved in the short space of 24 hours, at the same time trying to stay awake and not blow our brains out. Win or lose it's an achievement in itself!

Thank you BeansBox.

July last year I wrote a small tutorial on how to build an Unobrustive, Accessible and Standards Compliant Numeric Stepper. As of today it remains the most high traffic page on my site. I can see there is interest out there in a HTML and JavaScript based Numeric Stepper since the most searched for terms are:

1. javascript numeric stepper
2. html numeric stepper
3. numericstepper javascript

So with some downtime on my hands I did some code refactoring and added a few Accessibility improvements: Now, when the Textbox has focus pressing the up or down arrow cursor keys will increment or decrement the numeric value respectively. Also with the cursor keys you can now navigate between the Textbox and plus and minus buttons without resorting to the Mouse pointer.

Test the new cursor key feature with this example

As an aside, the Dojo Toolkit has a Numeric Stepper as part of Dijit, the Dojo Widgit Library. They call it a NumericSpinner. It's pretty powerful though looks bad with CSS switched off. Additionally, the Dojo Toolkit tends to add proprietary attributes to your HTML, hence breaking validation.

Get latest version (NumericStepper v0.1.2)