Tabs and Progressive Enhancement

[davidof]

I'm working on a website which displays information about mobile phones. It is actually for one of the big mobile phone manufacturers. The idea is that for each product a general description will be displayed then the detail will be in various tabs. The data for the tabs will be fetched using Ajax. This was all decided by the design agency and our development team who have now 90% completed the site.

Now I've been brought in for usability testing. First thing I pointed out was that the website doesn't work if Javascript is turned off. This has the senior management running round like headless chickens. I decided to look at unobtrusive javascript techniques to achieve what they want. That is, if Javascript is disabled the website will load the first tab, clicking on other tabs will load the whole page. However it doesn't seem that it is technically possible to have a Progressive Enhancement / Hijax solution with tab layouts.

The other choice would be detecting js on the server and serving different content depending on the browser capabilities.

I'm wondering if I've missed something with the PE solution?

[rocknbil]

Why can't you duplicate your output with whatever JS is doing? Generally I work the other way around, server-side first, then JS to enhance the experience. You just have to reverse engineer it.

[daveVk]

Consider having all tabs load with the page request, then use javascript to manipulate what is visible, no Ajax required. Better for search engine indexing as well.

[davidof]

> Consider having all tabs load with the page request, then use javascript to manipulate what is visible, no Ajax required. Better for search engine indexing as well.

That is a solution and given the tabs don't have a lot of information in them it seems sensible to me and will be one of the propositions. The Ajax stuff has been driven by the techies who want it on their CV (note to personnel: they are obviously planning on jumping ship soon :-).

I agree with Rocknbil's approach, get it working without JS/Ajax first. However it seems like tabs are a particular case where it is not easy to apply PE.

[daveVk]

However it seems like tabs are a particular case where it is not easy to apply PE

Yes, but not difficult either. There are many ways you could go, time evaluating the strength and weakness of each re requirements, performance, usability, SEO, accessibility would be well spent.

get it working without JS/Ajax first

Would you advocate "get it working without usability first", dont like leaving any aspect as after thought

[Fotiman]

Have you looked into any of the JavaScript frameworks? The Yahoo UI Library has a TabView component which can create your tabs from existing markup. Thus, if the user doesn't have JavaScript enabled, the contents are still displayed on the page and the "tabs" are simply links to anchors on the page where the content is located.