HTML & CSS
Article
By Jennifer Farley

Fifteen Web Sites Using Horizontal Scrolling

By Jennifer Farley
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

    --ADVERTISEMENT--

    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?

    Login or Create Account to Comment
    Login Create Account
    Recommended
    Sponsors
    Get the latest in Front-end, once a week, for free.