Sidebars vs. No Sidebars: Pros & Cons of Different Layouts

What are the pros and cons of a sidebar?

Pros

Running ads
Increase email sign-ups
Promote related products
Organization (especially for ecommerce)

Cons

Visually unappealing UX
Not compatible with mobile
Cluttered and clunky information
Unnecessary for many businesses and portfolios

Websites have featured sidebars dating back to the mid ’90s. Early websites were primitive but usable, and here we are over two decades later with many tremendous advancements in web design.

Yet sidebars are still a common staple on every site, from blogs to small businesses and ecommerce shops.

But with the growth of responsive design, it’s worth questioning if sidebars serve a purpose anymore. In this post, I’ll share some ideas and examples to consider whether or not your next website really needs a sidebar section.

To Sidebar or Not To Sidebar?

That is the question. And it seems to be asked more and more with each passing year.

There’s a large movement of designers that feel the sidebar is useless. With more users on mobile devices, the sidebar often goes unseen dropping beneath the content. And with desktop resolutions growing wider, there’s no room to keep expanding webpages. They need to have some type of width limit.

I’m looking at this from a website-first approach. I am not considering sidebars for webapps or single-page applications (SPAs), because these are different beasts altogether.

For example, I like Gmail’s interface with the sidebar, and I’d prefer it stay that way.

But many simple websites can do better without a sidebar. How many portfolio websites need a sidebar? What about blogs or business websites?

Most business sites actually work better with no sidebar. A business doesn’t need ads, nor does it need the sidebar as a resource for extra links/buttons.

Check out Wacom’s homepage to see what I mean. Their layout is large, but it flows in a single column. They list content in a single stream with graphics and chunks of content to fill out the page.

You’ll also see this on Adobe’s website, which is surprising, since they have a massive library of products and a lot of content to go with it.

Blog designs can go either way, and it comes down to the topic, design style, and necessity of sidebar content.

Every blog can benefit from a sidebar if the goal is to run ads, increase e-mail signups, or to promote related products.

But smaller blogs that only run minimal ads can work with a single-column layout. This also improves the user experience, so if possible, it’s generally better to go simple.

Sidebars can be all but abolished on blogs if alternative revenue streams become available.

The rise of adblock coupled with prevalent banner blindness also seems to support the sidebar-less blog design.

Nobody says that sidebars can’t have valuable content. But with more people on mobile and most sidebars just duplicating information, it seems less and less useful to design with a sidebar in 2017 (and beyond).

The Minimalist Approach

A simpler website is often easier to browse, easier to use, and offers a more comfortable reading experience. Removing the sidebar is the quickest way to simplify a layout.

But this won’t be right for every website. Sometimes extravagant designs are the answer.

I usually find that blogs are easier to read with a complete no-sidebar minimalist approach. However, they have less space for opt-in fields, related post widgets, category lists, and those lovable sidebar ad banners.

The tradeoffs depend on the type of blog and your monetization strategy.

Ramsay’s Blog Tyrant is a great example of a simple blog design that works. Content gets all the attention and most visitors aren’t missing the sidebar.

This is also true of portfolio websites where the focus needs to be on the work.

Designers, photographers, artists, and writers can all benefit from a sidebar-less portfolio.

Rad Sechrist’s art site doesn’t bother with any sidebar or multi-column approach. Content just flows down the page, and it’s a lot easier to consume this way.

But one of the most divisive areas is ecommerce design.

On the one hand, minimalism usually improves usability keeping potential customers on the page for longer.

But ecommerce sites have a lot of features, and those buttons/links have to go somewhere.

The majority of ecommerce websites benefit from a sidebar. But I think the sidebar contents should be kept to a minimum.

The UX of Barbell Apparel would be totally different on mobile but it’d still be usable. It follows a minimalist approach to design but still uses the sidebar for product sorting links.

How you handle minimalism will vary for each project. But it seems like the no sidebar approach is gaining traction.

Responsive Design For Mobile

The Internet of the future is fast, reliable, and full of responsive websites.

More and more people browse the Internet on mobile devices. In fact, 2016 was the first time that mobile Internet usage surpassed desktop, and I don’t expect that trend to decrease.

Responsive design usually moves or hides the sidebar, since there’s no room on smaller screens. How you approach this will differ based on the site.

The first and best choice is to remove the sidebar on mobile devices.

Another strategy is to drop the sidebar underneath the main content. You can see this in the TutsPlus layout.

And of course, the final and most notable choice is to forget the sidebar altogether. This way you’re not moving extra content around for mobile users. The site’s width can shrink without a sidebar and it’ll be easier to rearrange the layout.

Without a sidebar, your page will also load quicker. But the site may not have much of an extravagant design on desktop.

It all comes down to what you keep in the sidebar and the value of that content.

Mashable’s homepage spans up to 1440px wide with some pages having 3-4 columns of content. But their mobile site looks great too.

Different options for different users.

It’s not fair to remove the sidebar for every site just to appease mobile users. Instead try to strike a balance.

If a website benefits from having a sidebar, then keep it for desktop users and move/hide it for mobile.

The question isn’t, “should I use a sidebar?” The question should be, “is a sidebar valuable on this website?”

When Are Sidebars Valuable?

Ten years ago, sidebars would’ve been considered “the norm” on every website.

But nowadays, I think designers need to justify their choice to use a sidebar. If you can’t think of a good reason to have a sidebar, then why add one?

Just because sidebars have always been around doesn’t mean they should stay. The web wasn’t always built for mobile, but that changed quick. CSS didn’t always support animations either.

The one constant with technology is this; things change, and designers need to change too.

Take a look at a typical post layout on TechCrunch. The mobile design looks sleek and minimalist, while the desktop design has two sidebars with the main content sandwiched inbetween.

But I actually like the desktop design. It offers a lot of related features in the sidebar areas. If a monitor is wide enough, then why not expand the layout?

There’s nothing inherently wrong with adding a sidebar. It’ll just be most useful to desktop & laptop users. And if it doesn’t add much value, then it may be worth removing it entirely.

I find that smaller blogs and simple business websites work best without sidebars. Tradesman websites, creative portfolios, and restaurant sites all work better without sidebars. But blogs and ecommerce shops can gain a lot from two or even three sidebars in a layout.

Don’t let one choice become a hard & fast rule for your work. Design is always malleable, and each situation is different.

But it does seem like we’re moving into a mobile-first world, so the reign of the sidebar may eventually be usurped by a more usable solution.