jQuery Tabs vs separate pages

Question

I'm beginning to design a website that will have quite a few features and things to click on, etc. This whole website isn't really spec'ed out in terms of layout, so I am designing it as I go. Here is a sample design to give you an idea:

http://farm6.static.flickr.com/5176/5510107585_a9a15d680a.jpg

Currently, I am using jQuery tabs for tab1, tab2, etc. However, a lot of content is going to fill up each of these tabs. For example, a google map in one, a jQuery FullCalendar in another, a jqPlot in another, etc.

At first glance with mostly empty content, it all seems to load quickly, but perhaps there may be some performance issues as more stuff is implemented. Already, the javascript files I'm making are becoming large.

With all that in mind, I'm wondering if this design would be better served with multiple pages instead of multiple jQuery tabs both in terms of user experience and programming effort.

Answer 1

jQuery tabs definitely work better than individual pages. However, I understand your dilemma. I think that you should consider making each of the content within the page a separate file. Then, you can use the jQuery tabs with AJAX.

This will have the same effect as tabs (maybe a little longer to load), but it shouldn't be laggy or anything like that.

Here is the jQuery UI demonstration, in case you have trouble finding it:

http://jqueryui.com/demos/tabs/#ajax