Responsive layout: best ways to keep a sidebar reachable

Go To StackoverFlow.com

0

I have a website with a two column layout, like there are dozens I guess. I am currently converting the website to having a responsive layout, and what I see most often is that the sidebar is just suppressed and only the main content is shown.

That looks good, but I would like to have some way to keep the sidebar reachable. I can think of a few alternatives:

  • just place the sidebar at the bottom of the content: easily done, but I find that a total pain. It is not clear the content is there, and you have to scroll all the way down to actually find that out
  • place some kind of fixed "Tab", which you can click, which will slide open the sidebar, which can be closed again. While this seems most useful, I have not seen any examples of this?

What is your approach to handle something like this?

2012-04-04 20:08
by nathanvda
Anyway to condense it down into a horizontal div? Position it to the top and have it follow the user down - MetalFrog 2012-04-04 20:10
That sounds good, but it is too big for that. The information does not need to be directly available, but I would like it to be still reachable somehow - nathanvda 2012-04-04 20:29


2

This article by Luke Wroblewski outlines some of the most common responsive layout patterns: http://www.lukew.com/ff/entry.asp?1514

The layout you're describing where the sidebar slides down below the primary content is certainly the most common approach. I hear what you're saying that it's not obvious that it's down there, but in my experience, users will scroll.

If you're concerned, Luke's article lists ways to reveal navigation and some alternate approaches as well. In particular you may be interested in the "off canvas" pattern he describes, which most people are familiar with from the Facebook app, where you click the nav link and it slides in from offscreen.

2012-06-28 18:17
by Scott Vandehey
Thank you for the link: indeed the "off canvas" stuff is what interests me the most - nathanvda 2012-06-29 09:27
Ads