I have an ASP.NET website (c# as code behind) in which one of my pages has tabbed content. I have done it in two different ways, and now I am deciding which one is the way to go. One way, I have done it with javascript. Simply making swapping divs depending on which one is clicked, and this is working great (other than some minor flickering issues…). The other way, I have used the Ajax Control Toolkit and the Tabs control. I was looking up the benefits of Ajax, but also saw these downsides of using a tabbed interface with Ajax…
- Search engines don’t see the data that isn’t in the first tab, because they can’t access the Ajax.
- The tabs cannot be bookmarked. So customers can’t save the information they want.
- Ajax is not accessible, so the content in the other tabs would not be visible to anyone using a screen reader, or even older browsers that don’t have good JavaScript support.
- If one of the tabs had a lot of information, it could take a long time to load on a slow connection. And because Ajax doesn’t indicate anything is happening it looks like the page is broken.
Are all of these correct? I’m not so concerned about information not being found via search engine because only users of the site can see the content anyways.
So the main question is, what pros and cons to each method of implementation? Ajax definitely looks cleaner, but how does performance stack up?
In answer to your points above:
Search engines index what they find on the page. If the data isn’t there, they won’t load it. However, if the URL that is used to retrieve the AJAX result is linked to as a separate page via a normal
<a>tag, it is possible to index this.This is true, even if you use the non-AJAX solution. To bookmark a tab, you have to effectively bookmark the page in a certain ‘state’. Using hash fragments is a good way to achieve this.
As with any content loaded via a script, if the user has scripts disabled, they don’t get the content. As for browser support, jQuery and many other libraries abstract the browser differences away to support anything you could reasonably wish to support.
Incorrect. The more data to load, the longer it will take to complete the HTTP request, yes. But “AJAX doesn’t indicate anything is happening” is not true – it doesn’t even make sense. AJAX is a transport mechanism. The responsibility for showing the user that “something is happening” is up to you, and can be easily achieved with spinning placeholders or suchlike.
Basically, AJAX keeps your initial page-load time to a minimum by only requesting the data needed for the initial UI state. Subsequent requests, as with any HTTP request (including page load), will take time, but the user experience gains are, in my opinion, vastly superior.