Should Your Sidebar Show on Mobile?

On mobile, chances are that your sidebar shows at the very bottom of your page, all the way after your probably-quite-long content but before your footer. Given the choice, would you keep this functionality, or would you change it?

Ask yourself the following questions:

What’s in your sidbar?

Do you have a terribly long sidebar? Would scrolling past it on a mobile device take longer than half a second, or would it a user have to repeatedly swipe just to see the bottom of your page?

Looking at the body of your post and the sidebar, are there repetitive components? Are you using both an author box below your post and a bio widget at the top of your sidebar? What about your opt-in widgets or related posts?

If your sidebar is long and repetitive, you should remove it on mobile. If you have a short sidebar (or the thought of removing your sidebar gives you hives), you can keep it!

Are you using your footer effectively?

When a user gets to the bottom of your site, are you congratulating them and asking them to take further action or are you letting them fall off of your plate? Do you share more posts or invite them buy in or subscribe?

Now comparing your content, sidebar, and footer, are you seeing more overlap? In an attempt to capture a desktop user’s attention, did you include the same bio, social follow buttons, or opt-in box once more?

If your footer is full of rich content, you should remove your sidebar on mobile. If your footer isn’t doing you any favors, keeping your sidebar is probably for the better, after all.

Ditch the clunky sidebar on mobile

If you have the time, the resources, and the will, you should probably be hiding – or better yet, completely removing – your sidebar on mobile. Why? Well…

Sidebars weren’t designed for mobile

What do you use your sidebar for? To introduce yourself? To help users navigate your site? To display related posts? This information was intended to be presented alongside your primary content. It’s supplemental, but not necessarily secondary. So why, on mobile, are you showing it second? Well, we can’t exactly show it first, either, can we? Readers would have to scroll through a ton of non-relevant content to find the body of what they’re looking for. Given the two options, a sidebar at the bottom of the content is definitely better than a sidebar above the content.

SIDEBARS ARE CRAMPING YOUR MOBILE FOOTER’S STYLE

Site footers, in my mind, are these wonderful, under-utilized resources. They arguably have terrible visibility rates, as a reader has to get all the way to the bottom of your site to see it, but that also gives them a competitive advantage. Precisely because your footer is less visible to your readers, we can make an assumption about readers who make see it: they are looking for more. So, if you’ve using your footer to convert visitors, why, on mobile, are you hiding it below a bunch of “noise” that’s not optimized with the same goal? Convenience, probably, and I agree that this is much easier.

Managing a sidebar-free mobile site’s widgets

So you’ve decided removing your sidebar might make more sense on mobile. What are our options?

Well, let’s be honest. We can just ignore this dilemma, recognizing that our site could be optimized but, well, it’s working and that’s what really matters.

On the other hand, let’s imagine that you’re able to take the same content that was previously in your sidebar and disperse it to a variety of new locations that are better suited for mobile. What? That’s possible?! Yes, and it’s done by using:

Something called “Mobile-First” design

Mobile-first design is the idea of creating a site with mobile users in mind as your primary audience, then adding content in for users who are on tablet or desktop devices. (Traditionally, this has be done the opposite way around.) Users on mobile are delighted and users on desktop are none-the-wiser.

The custom themes I create are designed for mobile and developed for mobile. Even if you’re using a pre-made theme, you can do something similar by working with your existing widget areas and re-thinking them from a mobile-perspective.

Try this: Temporarily remove every widget from your sidebar then visit your mobile site and browse around. What’s missing? Can you add that content into widget areas other than your sidebar? If you’re willing to keep that content in the new location on desktop, too, you’re all set! Add your sidebar widgets back and then contact your developer and ask them to hide your sidebar on mobile devices.

Black Magic (just kidding, It’s PHP!)

If you tried the above experiment and found that you either (a) couldn’t find a natural replacement location for the content now missing without your sidebar and/or (b) didn’t want it to be visible in that location on desktop, there’s a solution for you! It’s possible to detect which device a reader is using and then show unique widget areas to them based on that information. This solution isn’t for the faint of heart, but it’s powerful and wildly under-used.

Bonus points: removing (vs. hiding) your sidebar

If you want to be really hard-core, choose the “black magic” (see section above) route. Not only does this method allow you to swap content based on device, it allows you to completely remove the sidebar, rather than hiding it. When we hide (i.e. display: none) content, it still exists and is still loaded… but nobody sees it! By removing the sidebar completely, we don’t even bother to load it – or any of its widgets – if it wouldn’t be visible to the user anyway. Fancy, amirite?