To Tab, or Not to Tab? That is the Question.
I was recently working on a site rebuild for a client, and she wanted to rein in the number of pages on her old site. There were tons of drop down menus and the number of pages was starting to spiral out of control.
That made a ton of sense. If there is one thing you don’t want to do, it’s overwhelm your customers with too many pages and drop down menus in the navigation. I started her out using the Tabs shortcode feature on the Canvas theme by WooThemes. But I quickly ran into the limitations of tabs and chose to go a different route.
What Tabs Are Good For:
Tabs are terrific at taking a long web page with many sections and delivering the information in digestible chunks.
The readers can click on each new tab as they are ready to dive into the information pertaining that topic. But if the readers aren’t ready to move on to the next topic yet, they’re not visually overwhelmed with information.
Here the information is displayed in tabs.
Where Tabs Fall Short:
Tabs don’t allow a reader to bookmark or link to the information in any particular tab.
If most of the readers of a site are going to be wanting to share the page in general, this might not be a problem. But, that was not the case for this website.
What I tried to do originally was take old pages on similar topics and put them into different tabs in one large page. It looked fantastic! The tabs easily corralled the information and took away the feeling of overwhelm that was present in the old website.
The problem came when I wanted to link from a slider image to a specific tab. This is not a functionality that works out-of-the-box with Canvas. It was going to need some code changes to figure out a work around. While I was talking with my client about whether they wanted to invest in making those changes, it occurred to me that tabs might not be the solution after all. If I was having so much trouble linking to a specific tab, regular readers of the website wouldn’t be able to book mark the tabs either.
Getting the Best of Both Worlds:
Instead of using tabs, I realized that a better solution would be to use conditional secondary navigation menus.
This allows all the information that was previously on a separate tab to now be on separate pages. It also made linking to and bookmarking the specific information much easier. And, the navigational links to these pages will only appear on the pages of a similar topic. So it will still function (and somewhat look) like tabs.
Here the content is all on separate pages, but the secondary navigation menu still looks somewhat like tabs.
Admittedly, the way I did this, by editing the functions.php file, is not the most user friendly way. For people who want to add new “tabs” but are not comfortable changing the code, this could be overwhelming.
If you fall into the category of people who aren’t comfortable changing the code, I would recommend the Conditional Menus plugin by Themify. It allows you to choose which menu to display on which page. If you’re using Canvas, you’ll still need to add a secondary menu location by editing the functions.php file (or have someone do it for you). But that will only be a one-time edit, not something you’ll need to go back to frequently.
There is one caveat about using the Conditional Menus plugin approach. If you want the secondary navigation to only appear on the pages you specify, you’ll have to make an empty menu (one with no pages/links). This will be your default “all the time” menu. Doing this does cause a W3C validation error. (Here’s an explanation using a different conditional menu plugin, but the reasoning is the same.) It will look OK to people visiting your site, though.
So, if you’re really not comfortable editing the functions.php file, the plugin is probably the way to go.
What about you? Have you used tabs on your website? If so, how did it go?
Kelly you make good points. I’m also running into a similar scenario with the tabs v pages conundrum. Perhaps another caveat to tabs worth mentioning — and this is theme dependent of course — but some things (such as a jetpack tiled gallery or map plugin etc) that require a container width, won’t display properly in a non-initially loaded tab (the front tab – I’m no developer forgive my lack of term.).
Also, there could be SEO implications. Tab route as you mention loads all content on one page, where page route you’re breaking up content over several pages, which could influence page/keyword weights, similar pages competing for keywords and so on. This would be situation-specific, but nevertheless something to consider.
I would actually think the SEO implications would be better for separate pages because you could target your key word(s) to exactly what is on that page (or what would otherwise have been on that tab), instead of having to try and work your SEO to be appropriate for all the various topics in all the various tabs.