1

How We Scroll

Here at With, we like to chat about and tinker with the fundamentals of the web. One of these fundamentals, scrolling, may seem like an instinctive way of browsing, but it’s constantly being transformed alongside the web and the hardware that’s used to explore it.

Click the numbers above for a few of our observations.

2

Vertical Scrolling

Figure 1 - Vertical Scrolling

Top to bottom scrolling is what we’re most familiar with and has long been the standard way of navigating a webpage.

However, it wasn’t long ago that scrolling of any kind was considered to be unfriendly and tedious to the user. It was preferred that the content of a webpage all be contained within the width and height of the users monitor. This all changed with the wide acceptance of the scroll wheel which finally allowed user to sit back and navigate down a page with ease.

Touch screens may be challenging the notion that vertical scrolling is the only ideal way to consume content but as shown in the links below, the most flawless way of reading a content heavy page is to simply scrolling down. Nearly every big content site on the web still uses vertical scrolling and, as connection speeds increase, pages become ever longer and richer in media.

The Great Discontent / Trent Walton / The Big Picture

3

Horizontal Scrolling

Figure 2 - Horizontal Scrolling

New devices that include touch-screens and multi-touch means that we are no longer limited to the bi-directional track wheel. The site for designer Ryan Todd displays lovely work and has a seamless left to right experience on tablets. For those who still prefer using their vertical scroll wheel, pentagram.com was designed so that an up and down motion resulted in the site moving left to right.

In many ways, the ability to scroll horizontally has become easier. Despite that, it does have its issues. One problem that emerged is that Macs reserve the left to right swiping motions for going backwards or forward through your browsing history. This can create a frustrating experience if all you’re trying to do is scroll a bit to the left of a page.

4

Experimental Scrolling

Figure 3 - Experimental Scrolling

Recently, there has been a surge in sites challenging the fundamentals of how we navigate a web page. Many of these sites use the familiar up and down scrolling motions, but with unexpected results. Scrolling The Art of Flight sends you along a canvas in every-which-direction. New Zealand’s tourism site is a modern day flip-book. The site shows a sequence by quickly flicking through frames controlled by the users scroll. The end results can be really interesting but will require significant time to implement and browser test.

Some of these experiences don’t work as smoothly on mobile or tablet-based browsers.

Back to Projects Search #alfiegram on Instagram