Fifteen Web Sites Using Horizontal Scrolling

horizontal 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.”

    EricJohansson

    Stéphane Bucco’s portfolio

    sockho

    Blue Vertigo – Web Resources

    blue-vertigo

    Banksy

    banksy

    Ricardo Arce

    RicardoOarce

    Beca Voices

    BecaVoices

    Dean Oakley

    DeanOakley

    Frank Giacobbe

    FrankGiacobbe

    Box Doodle

    BoxDoodle

    Wallswaps

    wallswaps

    Pixel Lounge

    PixelLounge

    Paolo Boccardi

    Paoloa Boccardi

    Swear Words

    SwearWords

    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.

    FrontEndDesign

    Peter Pearson

    PeterPearson

    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?

    Free book: Jump Start HTML5 Basics

    Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

    • http://www.mjswebsolutions.com type0

      Not a big fan, especially since my scroll wheel is vertical.

    • http://www.cemerson.co.uk Stormrider

      Yeh, and a lot of them rely on the screen being a certain width. When you have 1680 pixels, most of them show you bits of the next ‘screenfull’ to the right while you are viewing one.

    • The Rapper

      My Website is like this is well and I think it allows for more for the senses, to be able to get a full depth of the possibilities, if you will

      http://www.wix.com/belltech/gucciselection

      MIC LOWREY

    • Charlie

      My website use horizontal scrolling too, but no so nice design. http://synntech.net

    • anneanderson

      I think horizontal scrolling can be interesting and involving if used correctly, headache-inducing and confusing if not.

      Horizontally scrolling through sites like Stéphane Bucco’s Paolo Boccardi’s gives me a headache, my eye/brain connection trying to focus on and make sense of what is whizzing past. On the other hand, the images on Banksey and Box Doodle are small enough that scrolling by them is somehow visually manageable.

      Pixel Lounge and Front End Design Conference have clear navigation tools so you can scroll through if you like or click the arrows if you prefer that. And each click takes you directly to the next thing. On the sites mentioned above you can still click on the scroll bar but you most often land with some of the images partially obscured, requiring scrolling to re-center.

      Wall Swaps, allowing scrolling to all directions, is fun after you get use to it. They earn extra points for providing an additional form of point-and-click navigation–always best to give your users options.

      Dean Oakley’s site is amusing but he looses points because the Big Red Arrow masquerading as a navigational tool doesn’t actually do anything.

      Frank Giacobbe has not only a uselessBig Red Arrow but he even feels the need to explain how to use his site (i.e. by definition not user friendly)

      Sites like SwearWords looses points on two counts, very small, light grey text (I’ve been staring at large monitors and physical designs all day, my eyes are tired, PLEASE give me a break!) and too much text for horizontal scrolling. I can scroll down a site and read text as it appears, line by line, but I cannot read a block of text scrolling horizontally, until the entire block appear so my eyes and brain are busy scrambling to make sense, leaving me slightly nauseous and with a bit of a headache.

    • Chris

      Great list..

      Another amazing use of this is: http://www.nicolasalary-photography.com

    • http://www.optimalworks.net/ Craig Buckler

      I think they’re interesting from a design point of view, but not for general websites. Several have messages asking the user to scroll or drag — any control that needs explanation isn’t simple or intuitive enough.

    • http://www.webdesign-gm.co.uk/cheltenham-web-design.php TomBradshaw

      I really like the horizontal scroll look and these are all really cool, I’m actually doing my own portfolio site at the minute and that’s going to have a horizontal scroll too, plus some other things too!

    • http://www.clearwind.nl peach

      I think most of these sites are examples of unsuccesful and harmful usage of horizontal scrolling.

      As you might guess, I’m not a big fan. Many of these sites also share a common bug… on my screen you see part of the next page on the right side of the screen, because my screen resolution (1920×1200) exceeds what the designer has planned for.

    • http://www.jasonbatten.com NetNerd85

      Very interesting.

    • mathieuf

      I dislike horizontal scrolling because it is a user inconvenience. (These examples use it well.) Note that the default pages I have seen from Sharepoint are all 10% wider than the display page. Microsoft always used to have pages just a bit wider than common display widths, as did/do many other sites. I prefer to design using percentage widths, and let the user determine how they want to size the browser. Fixed width sites are great on paper, but we are not on paper!

    • Aidy

      Love the photography on this one http://www.jansochor.com/..

    • Stevie D

      Nope, I still can’t stand horizontal scrolling. I can see why, in a minute number of arty sites, it might be an appropriate choice, but no more than that.

      It is still replete with problems.

      As type0 said, the browsing context is built around vertical scrolling. Mouse scrollwheels run vertically, pressing ‘space’ or page down works vertically. Few if any browsers scroll sideways instead.

      The unpredictability of screen size is a major problem. As soon as you try to chunk the content into ‘pages’, you will fall down when the user’s window size is different to yours – which will be a large proportion of the time. And if their window is shorter than yours, you will invoke scrolling in 2-dimensions, which is an absolute no-no.

      Any kind of textual content that forms columns will be slow to read, and potentially confusing.

      There is a good reason why almost every website ever written is designed around a vertical scroll … horizontal scrolling is a PITA and should not be used other than in a tiny number of specific situations.

    • nickjackson

      Hi.

      IMO nobody would have a problem with this if “they” made computer mice with trackballs (like in a blackberry) instead of scroll-wheels. In fact, thinking about it now, it’s kind of short-sighted that they don’t. Could help in gaming too.

      Another cool horizontal page I’ve seen was @dcurtis’s About page. http://dustincurtis.com/about.html

    • J Dan

      Definitely some nice outside-the-box design work, however unpractical.

    • Don

      Here is another one http://www.latenttalent.nu/