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.
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:
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
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
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 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 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!