I was in the illustrious surroundings of Rissington last week to deliver a DOM Scripting workshop. My good friend Ann was in attendance. During the latter part of the workshop — which was deliberately more loosely structured than the rest of the day — she pointed me to a really lovely bit of JavaScript form enhancement.
Take a look at the UK and Ireland TV and radio listings on Yahoo. See that search form in the upper right corner? It’s using the standard design pattern of allowing you to specify exactly where you’re searching. But unlike most implementations, this one is built on a rock-solid foundation of semantic markup.
Steve Marshall has the lowdown. Under the hood the form is using radio buttons for choosing where to search. Then, using a combination of JavaScript and CSS, this default representation is augmented to look and behave as desired. Switch off JavaScript and you can still use the search form perfectly well.
What impresses me about this isn’t so much the code (although I’m sure it’s top-notch), it’s the thinking behind the implementation: start with solid semantic markup with good ol’ fashioned form elements for interaction; then think about how it can be enhanced. Nice one, Steve.
Posted by Jeremy on Sunday, May 11th, 2008 at 3:06pm
Comments
It will be great if all developers will use this approach.. While designing websites, I used the similar approach 10 years ago. The access to the internet was expensive that time. So the percent of users who turned off the graphics in browsers was appreciable. First, I made a site for such users and then I covered it with images. As a result the websites had no any content displacements :-)
Great find. I like to call this technique HTML Transformation,: writing clean, semantic, appropriate HTML and then using Javascript and CSS to make it work the way the client/designer/project manager envisioned. They don’t need to know that it has an accessible fallback and/or is search engine friendly. That can be our little secret. :-)
# Posted by Scott Nelle on Monday, May 12th, 2008 at 11:58pm
Wow that is clean and clever indeed. It looks like some clever little technique you get to read on A List Apart. It’s one of those completely obvious things once you read about it :P.
# Posted by Kit Sunde on Tuesday, May 13th, 2008 at 12:28am
Looks very interesting. Thanks for sharing.
# Posted by anarsist on Wednesday, May 14th, 2008 at 11:28am
I like it… Simple to do, yet elegant enough to please the marketing folks. A great way of thinking.
I like simplicity! This is great! Thanks for giving us the heads up on this one!
One negative on this — if your page loads slowly, you can see the radio buttons before they’re replaced with the CSS/JS overlay. The flickering/changing UI element isn’t a great user experience.
The yahoo listings form caught my eye some time ago for the same reason. I must admit that simplicity and elegance of such approach is something that should definitely be adopted by other web designers. It is such patterns that make the web a better looking place.
# Posted by Greg Hardy on Tuesday, May 20th, 2008 at 10:40am
Yahoo has done some really great stuff lately and this new feature is no doubt one of the great one, Yahoos launch cast radio also has alot of great scripting done with the same great ideas behind its placement.
I agree, Yahoo is on a good way, but it´s still not the perfect search engine as google is.
Google is still far from being a perfect search engine and seeing Yahoo’s development in quality of their services we can hope for some healthy competition to arise and contribute to further progress in this area.
# Posted by Andrew Kovalsky on Sunday, June 8th, 2008 at 11:39am
I agree with Andrew. Competition will produce a great progress, it always does. Cheers.
Puts me in mind of a great saying I keep hearing almost everywhere I go "use the KISS (Keep It Simple Stupid) method." Simple is good.
I like it a lot. Thanks for bringing it to our attention! Jerry
Sorry. Comments are closed.