Editing, condensing, updating, and adding more pictures–always a good thing for an old blog post! My informational post on multiple sidebars is now light-years better.
Tag Archives: sidebars
Making a Sidebar Mobile-Friendly: 3 Solutions
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!)
Multiple Sidebars: Useful Design or Info Overload?
One trend in web designs to have not just one vertical sidebar, but two–or even three or four if page space allows. This columnar design hearkens back to the days of “table” site designs, where all the pieces of the layout as well as the content were aligned in table cells rather than CSS-styled divided layers. (Even though tabular web design has been pooh-poohed since the advent of CSS-only designs, we as web designers apparently haven’t traveled too far from our roots, especially when you look at dedicated news pages full of content “above the fold.”)
Some Examples
Note: I’ve highlighted the left sidebar in red, the content block in yellow, and the right sidebar in blue in all these screenshots.
(click for larger image in new window) This example, from CNN.com, shows lots of content crammed into a small space, and yet it still manages to be readable because of a good bit of white space around each element, as well as clear labeling.
(click for larger image in new window) From Kiss 95.1‘s website, you can see lots of pictures and links on the sidebar, and the content space is almost the same size as the sidebars. But it still manages to keep it organized with white space and iconic navigation.
>
(click for larger image in new window) On Ordinary Miracles (a favorite blog of mine to visit), the designer has incorporated two sidebars, but they don’t feel terribly clogged with information. Again, white space is the key.
Trying My Hand at It
I created a very simple (color blocks and dummy text) multiple sidebar layout for my own knowledge–available for viewing here. In my design, the two sidebars are placed next to each other rather than each beside the content block, but you still achieve the look, seen below:
(click for larger image in new window) Using color-blocking to show where each column begins and ends, you can see how the layout is divided up into five sections, 3 of them occurring side-by-side.
Pros
Multiple sidebars can give maximum content display space. Very little space is wasted, with links and excerpts everywhere, an images and clickable video starters sprinkled between blocks of content. It’s all very efficient, and users don’t have to scroll too much to find what kind of content they are searching for.
Two or more sidebars can also make ads, blogrolls, and linkrolls more plausible for a site that already has an overcrowded single sidebar. With another sidebar, you can put important content back up toward the top of the page where users can see it.
A layout with more sidebars also makes use of more screen space. With more and more users viewing sites with widescreen monitors, that’s a LOT of web design real estate you can play with. A wider site can mean bigger pictures and font, more eye-catching content, and generally a better user experience.
Cons
Multiple sidebars can make pages look overcrowded with information. Sure, the only consequence for a user is to lose a few seconds clicking the Back button if he or she hits the wrong link, but what about the frustration index? The first rule of web design I learned is that when a page is too difficult to navigate, the user will leave and won’t come back. All this information clustered right near the top of the page might be easy to see, but it also runs the risk of being overwhelming and confusing.
Two or more sidebars can also be hard to code effectively. In my example, I had to use a containing divided layer, floated to the right, to hold the two sidebars, and floated them left and right inside it. I’m honestly not sure how browser-compatible that is, but aside from using the much-maligned table, that seemed to be the only way I could do it.
What I Typically Use
I find myself favoring one sidebar for most web designs, either for small blocks of content or for the site’s main navigation. Sometimes, if I need more space for more generic navigation (Home, Guestbook, or Updates, for instance), or for external links (such as social networking site links), I’ll create a small bar of text or icon links across the top of the page (usually under the header image and above the main content block and sidebar). I find that this maintains the necessary white space that a typical user’s eye needs for easy information processing (especially if you’re like me and tend to write a lot on a page!).
However, I could see the possibility for using a second sidebar on my page, especially if I put ads on my page. Affiliates and other link exchanges could also benefit from a second sidebar, should I ever choose to do so.
Summary
Multiple sidebar layouts are plausible and doable in modern webdesign, but that doesn’t mean they are suitable for every page. Think about what your site really needs before designing a multi-sidebar look–do you really need all that content space right near the top of the page, or could you get away with just one sidebar instead?
I hope this article has given you a bit to chew on concerning multiple sidebars as part of the user experience!