Using Tabs To Settle The Content vs Little Screen Conundrum

One of the toughest problems we face as web designers these days is creating content suitable for the abundance of screen sizes out there. Sure, we can design responsive websites that adapt to displays and you can explore other avenues like separate mobile sites or native applications. But the issue keeps cropping up – what do you do with all that content?

The mobile-first approach is currently our most versatile option, as we welcome Apple’s smartwatch to a wearable market dominated by tiny displays. But this doesn’t help you much if you have a ton of content to start with. Which means we’re often left with the question of how to fit chunks of content onto little screens – and there is no easy answer. But today we’re looking at one very simple option you don’t want to overlook.

Organise Content With Tabs

You will have seen tabs in a number of places before – even if you haven’t paid a lot of attention to them. They’re extremely common on eCommerce sites where pages need to display product descriptions, specifications and other bits of information.

sony-tabs-2

Here we have a product page from Sony where you can see tabs displaying an overview, specifications, reviews and accessories – all very standard stuff. Now they’re not always the prettiest of solutions (no offence Sony) but they do give you one option to consider when space is tight.

Tabs can work when it comes to mobile-first and responsive design too – which makes them a genuine contender for solving your content issues. Pixel Palace has worked this responsive tab solution into the Coffee Beans Delivered site, which stacks vertically for smaller screen sizes:

cbd-tabs2

It’s a simple implementation and it won’t be the most exciting feature of your designs, but it gets the job done with an intuitive way to deliver more content on smaller screens.

You don’t have to limit tabs to product pages or eCommerce sites either. Dress them up a little and there’s no reason you can’t use tabs on service pages for business websites or other content heavy parts of your designs.

Why Tabs Suit The Responsive Web

Obviously there is nothing new about tabs and you have pobably been using them for years. You may have even stopped using them in search of something more exciting – and I don’t blame you for a second. I’m not going to pretend I was ever too excited about tabs either, but I think they have a genuine place in design for the mobile web.

Long scrolling and parallax effects may be the in thing, but users never know what content is coming next. Take the tab option and you give users a clear insight into what kind of content is available and an intuitive way to navigate it on smaller screens. All this without needing to leave the page. And unless there is any dynamic loading going on, all the content in your tab section is accessible to search engines.

The Downside Of Tabs

The major downside to using tabs for content is that you need to use some JavaScript, jQuery or another library to make the magic happen. Naturally, this is no different to parallax scrolling, media queries or the majority of other features you see in modern web design. Although it does mean you need a graceful solution that works for devices with JavaScript disabled – which brings you back to square one on the conflict between content and small screens.

It won’t take more than a quick Google search to come across Chris Coyier’s solution to CSS3-only tabs at CSS Tricks, however I suspect his article aims to explore some CSS3 capabilities, rather than a genuine solution without JavaScript. Sadly, the end result of his CSS3 tabs comes with some hefty UX issues that rule it out as a real solution for developers.

Tabs For WordPress

If you or your client needs a tab solution for WordPress you have plenty of options available and you will find many theme providers like Elegant Themes include a tabs option in their packages. Or you can find a number of specific themes that come with tab functionality over at ThemeForest and our other recommended theme suppliers.

The other option of course is plugins and – as you might expect – there are plenty for you to choose from. The best plugin for the job depends on the specific needs of your project so it’s worth taking a good look at various options before you choose. That said, there are a few tab plugins worth mentioning – which you can get your hands on for free – and the following are a good place to start.

Easy Responsive Tabs

easy-responsive-tabs

 

The Easy Responsive Tabs plugin does exactly what it says and makes responsive tabs super easy. All you need to do is click the icon in the text editor to insert responsive tabs directly into your posts or pages.

Tabby Responsive Tabs

tabby

Tabby Responsive Tabs automatically turns horizontal tabs into a vertical accordion stack for smaller screen devices. The plugin is free, although you can sign up for more features with the add-on that starts from $25 for a single licence.

WordPress Post Tabs

wordpress-post-tabs

WordPress Post Tabs is another free option that comes with three different styles and a bunch of customisation options or twelve styles and added functionality for the premium plugin that starts at $9 for a single licence.

The Mission Continues

We’re not done with our mission to crack the code for content on smaller screens and I’ll be back with more ideas, suggestions and questions in the future. If you have any thoughts you want to add to the conversation, drop us a comment below and let’s see what we can come up with!