I used to think the sidebar on a website was absolutely necessary–it was a place to hold navigation links, affiliates, site introduction, and all sorts of cool tidbits that I wanted to display on each page.

This was all well and good when we all browsed the Internet using large desktop and laptop screens. But now that many of our visitors could be using tablets and smartphones to view our pages, we need another strategy…because a sidebar on a smartphone screen means lots of zooming in, and the sidebar content just gets ignored anyway.

One reason I haven’t yet posted my blog’s new design is because I’ve been struggling with this issue: how do I make my page look interesting enough on a large screen, without making it almost impossible to view normally on a small screen? Thus, I set out to answer this question for the ages–and I discovered that some fairly simple solutions existed!

Solution #1: Cut Out an Unnecessary Sidebar

If your sidebar only includes a couple of introductory blurbs about your site and yourself, you could potentially get rid of the sidebar entirely on both desktop and mobile views.

These days, many designs feature a single-column layout with navigation across the top of the page in a horizontal bar, which scales down nicely to mobile screens. (Don’t despair, though–you can condense your introductory blurb down into a neat little slogan and still use that above your navigation!)

Solution #2: Move Sidebar Content Around for Mobile

If you’re like me and include blogrolls, affiliates, ads, and other such sitely things in your sidebar, you definitely want to make sure those stay on every page in desktop view. But for mobile, remember that most mobile users are mainly coming to view your content, so you want to make sure nothing else steals the content’s thunder.

Thus, you could dispense with the sidebar and move its content to somewhere else on the page, or on a separate page entirely for mobile users. A fixed bar across the bottom of the page could work for site ads, while a mobile-only page could work for blogrolls and affiliates, and so on.

Solution #3: Make the Sidebar Disappear on Mobile Browsers

Now we come to the solution which involves the most code–but it’s actually really simple once you think about it. If the sidebar is an issue for mobile browsers, why bother having the mobile browser load a sidebar at all?

This is achieved through the wonder of @media queries, which help you target CSS styles and rules for specific media types (like printing versus viewing on a screen) and specific screen sizes (like handheld devices). Here’s how it would work for hiding a sidebar from mobile viewers:

#sidebar {
width: 200px;
float: right;
padding: 5px;
background-color: #222222;
color: #FFFFFF;
}

@media handheld {
#sidebar {display: none;}
}

Here, the @media query encapsulates another #sidebar rule. Make sure you have your outside curly braces in place around the #sidebar display: none rule, otherwise this code will go completely bonkers! (Learn from my fail!)

IMPORTANT!

There’s a slight catch to this method, however–iPhones and iPads don’t recognize “@media handheld” in CSS. So, here’s the workaround:

@media screen and (max-width: 480px) {
#sidebar {display: none;}
}
(This particular @media query can also be structured as “@media(max-width: 480px)”, according to some sources)

Placing This in Your CSS

Make sure to put these mobile-only styles at the bottom of your stylesheet, so that they are the last things to load and won’t confuse the desktop browsers.

Summary

Sidebars need not be a responsive layout deal-breaker! You can make them behave or change them around as you need to–their content and placement are not set in stone. These 3 tips should help you (and me) get our websites mobile-ready with as little hassle as possible.

Further Reading/Credits

ArtOfBlog: Print and Mobile CSS (VERY helpful for newbs like me)
StackOverflow: Hiding WordPress Widgets on a Mobile Device
WeaverTheme: How to Have Alternative Page Display on Mobile
KyleSchaeffer.com: Responsive Layouts Using CSS Media Queries (read the comments on this article for even more insight!)
CSS-Tricks: Detect Mobile and Redirect (not EXACTLY about this issue, but tackles some of the same responsive design issues that crop up. VERY technical discussion, but informative!)