Radio on the TV

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


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 :-)

# Posted by Kraig on Monday, May 12th, 2008 at 7:23am

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.

# Posted by yourpaw on Wednesday, May 14th, 2008 at 2:50pm

I like simplicity! This is great! Thanks for giving us the heads up on this one!

# Posted by Pebbles on Thursday, May 15th, 2008 at 3:05pm

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.

# Posted by Jim G on Friday, May 16th, 2008 at 8:44pm

Great, I like it. Thanks for article.

# Posted by greg on Sunday, May 18th, 2008 at 6:19pm

I will think how it can be enhanced?

# Posted by Antony on Monday, May 19th, 2008 at 5:38am

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

Great, I like it a lot.

# Posted by Sharp on Wednesday, May 28th, 2008 at 12:19pm

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.

# Posted by Janet on Thursday, May 29th, 2008 at 7:27am

I agree, Yahoo is on a good way, but its still not the perfect search engine as google is.

# Posted by Andre on Thursday, June 5th, 2008 at 6:10am

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

Simplicity is the key. Looks neat to me.

# Posted by Nata on Sunday, June 22nd, 2008 at 11:01am

I agree with Andrew. Competition will produce a great progress, it always does. Cheers.

# Posted by Sandra on Monday, June 23rd, 2008 at 9:44am

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.

# Posted by Noel on Monday, June 23rd, 2008 at 9:56pm

I like it a lot. Thanks for bringing it to our attention! Jerry

# Posted by Jerry on Friday, July 4th, 2008 at 4:56pm

Finally, something simple that even I can understand!!! Thanks!!!!

# Posted by KeeKee on Saturday, July 5th, 2008 at 9:51pm

Sorry. Comments are closed.

May 2008

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.