The Art of Scrolling

The recent development of web technologies and increased bandwidth speeds have spurred the proliferation of new page designs. Most significant of these is the rise of single-page websites. Rather than visiting separate pages for each section of the site, the user scrolls down to access all content on one long page. Vertical scrolling was previously perceived as a barrier for users. However, it seems the diversion of screen formats, particularly the revolution of touch-screen hardware, has challenged this notion. Scrolling has become second nature to users – an intuitive action that can be further strengthened by page design and content.

For digital designers this development has added an extra dimension to our canvas. Rather than pixel pinching layouts to fit into a constrained vertical space, we can introduce space between on-screen elements and experiment with text and imagery scale – something previously reserved for print design.

Early examples still got it

Some early sites that adopted this approach were 'Orange Unlimited' launched by Poke in 2007 (although this was created in Flash, it behaves like a conventional page) and 'Experience the Rainbow' launched by Big Spaceship in 2010. Interestingly, both sites still feel fresh and up-to-date, quite an accomplishment in web design terms given the former is six years old.

Adding dimension

Subsequent years have seen continual experimentation, playing with scrolling elements like speeds, scaling and video.

'Nike Better World' (archived site) launched by Wieden + Kennedy in 2011 is an early example of the introduction of parallax effects being added to these layouts. Here, the elements of the page are set to scroll at different rates giving the impression of depth.

'Adidas Snowboarding' by Juice Design in 2012 uses this technique but also scales the size of elements creating a filmic quality.

'New Zealand 100%' launched by Shift and Assembly in 2012 brought the techniques and production values of a scrolling page design to a whole new level. As users scrolled they played through a sequence of stills in a video. This is no longer live, but this video shows the effect and Smashing Magazine have a great behind-the-scenes case study on this unique project.

Scrolling meets 3D

Using scrolling to trigger a sequence of images has led to the creation of 3D interactive objects. These have been featured in numerous iPad apps, such as 'The Elements' by Touch Press. The resulting effect is as close as it gets to interacting with the objects in real-life.

All of these techniques are now being adopted for individual pages within websites rather than solely for single-page sites. As such, the applications are diversifying, from editorial articles such as 'NY Times Snowfall' to product pages such as Apple's Mac-Pro.

For me, many of the examples above are digital design masterpieces brought about by the normalisation of scrolling - just one recent evolution that illustrates the Internet’s creative potential.