Having a horizontal scroll bar on a web site is generally considered to be a major no-no. Usability expert Jacob Nielson had the following guidelines regarding scrollbars:
- Offer a scrollbar if an area has scrolling content. Don’t rely on auto-scrolling or on dragging, which people might not notice.
- Hide scrollbars if all content is visible. If people see a scrollbar, they assume there’s additional content and will be frustrated if they can’t scroll.
- Comply with GUI standards and use scrollbars that look like scrollbars.
- Avoid horizontal scrolling on Web pages and minimize it elsewhere.
- Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling.
“Avoid horizontal scrolling.” Yes, certainly it’s important that there is no accidental horizontal scrolling. That seems like an obvious one, but for some designers, the decision to use horizontal scrolling is as much a part of the design as choosing the colors. Looking at a web site with horizontal scrolling is a little like opening up a multi-fold brochure, in that it can provide little surprises are you drag that page along.
As you’ll see from the examples I’ve picked out below, many of these sites are for creative professions. Web and graphic designers, photographers and graffiti artists, and perhaps that’s where this style is most suitable? Here are fifteen web sites successfully using horizontal scrolling.
Eric Johannson has the appropriate tagline “This site is a drag.”
Stéphane Bucco’s portfolio
Front End Design Conference – The conference is over now, but the site has information and downloads on what took place and still uses horizontal scrolling.
Over on CSS Tricks, Chris Coyier has a nice tutorial explaining how to create a horizontal scrolling web site with CSS.
What do you think of horizontal scrolling? Is it best saved for creative sites, or will we be seeing more of this in mainstream sites?