This article is in response to a question on Quora:
What is the best layout technique for a horizontally scrolling site?
Step #1: Read this useful article:
i.e. Define your context and how you intend to deal with the needs of different environments:
- Mobile (swipe-friendly)
- Desktop (more/next = vertical scroll)
Part of this is an issue of
In practical terms, the swipe-centric norm of the mobile platform dominates. And that trend is increasing.
It’d be nice if people go along with the desktop norm of scrolling down, but our design technique norm has gone from ‘mobile friendly’ to ‘mobile first!” pretty quickly.
I agree that ‘just-go-vertical-all-the-time’ is a straightforward design solution, but we also live in a world where the audience is increasingly ‘mobile-only’. How many people from the mobile-only audience go to a (desktop format) website and get a little confused by the inconsistent/conflicting behavioral norms?
- “ , 55 percent of Americans said they’d used a mobile device to access the internet in 2012. A surprisingly large number — 31 percent — of these mobile internet users say that’s the primary way they access the web.” — and that was in 2013
- Useful Context:
Gotta admit, I’m old school-ish in my fondness for the interactive richness afforded by desktop layout. Flat design is – in so many ways – shallow.
But that’s another rant.
On the one hand, I agree that a horizontally-scrolling design ‘doesn’t work’ on a desktop site. However, “swipe = next” is a norm for mobile interfaces.
Behavioral consistency is the point, but…
For a growing majority of new interactive users, mobile behavior is theNewNormal. These folks are gonna be flustered by the seemingly inconsistent behavior when the same site is presented on a desktop.
Disclaimer: I agree that horizontal scrolling should not be implemented on a desktop site. But I also don’t see a solution for the behavioral inconsistency between desktop and mobile.
Perhaps there’ll be some usability research numbers on this.
In the meantime: Response-Ability
© The Communication Studio LLC