We all want to design unique and memorable websites; it’s a worthy aspiration for any web developer/designer. But you don’t need to stoop to horizontal page scrolling to make your website stand out from the rest. In fact, it’s much better for your visitors if you stay as far away from horizontal scrolling as possible!

Horizontal Scrolling, Defined

When the scrollbar that should be on the right side of the browser window appears at the bottom of the window instead, that is horizontal scrolling. The content expands out to the right or left instead of flowing down the page like most webpages do today. See the following examples I made:

Looks like a normal webpage…except that the scrollbar is below the content!

The content scrolls to the right, rather awkwardly; it’s almost like the site didn’t display correctly. Very confusing for information reading, too!

Why This is So Annoying to Users

The reason horizontal scrolling is a designing no-no: it’s not how most websites operate. Most content runs vertically down the page. Thus, your users are momentarily confused about how to navigate your site, and if they get fed up enough, they’ll most likely leave. It’s simply not worth it, from a user’s standpoint, to try navigating around a weird site that doesn’t even have its scrollbar in the “right” place.

This is Tempting, but Don’t Do It

I know we all want our content to be easily seen “above the fold,” where the user doesn’t have to scroll at all. But trust me, having a little vertical scrolling is infinitely better than trying to implement strange horizontal scrolling. Not only does it look weird, it’s more work for the designer to code, and it’s more confusion for the user to try to adapt their browsing style.

Bottom line: We as designers should not force the user to work harder just because we want to be “different” and “trendy!”

Try This Instead: Content Modules

Instead of having your content stretch horizontally forever and ever, try a 2- or 3-column content design with several boxes of content arranged in a grid pattern, like the following samples:

This is an example of a two-column grid layout…

…and this is an example of a three-column grid layout.

You don’t have to go completely Pinterest-esque, but at least this would get more of your content up above the “fold.” Just make sure to keep that page free of horizontal scrollbars!