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.
Add a comment