How scrolling actions can add the modern touch to your website
When the iPad was launched in 2010, it introduced the concept of browsing web pages with swipes of the finger rather than clicking or dragging with a mouse or pressing keys. This graceful motion had the effect of making regular scrolling actions seem jerky and clumsy – even using a mouse wheel started to feel unwieldy (‘unwheeldy’?).
Worst of all was the use of anchor tags. These are the handy indexing links that jump you to a certain point on the page (the references on Wikipedia, for example). These links – the kind that add a # to the URL – may get you to the content you need, but they are also abrupt and disorientating. Following an anchor link on a long page can leave you feeling bewildered – how did I get here? Have I gone up or down? Is this even the same page? Do people laugh at me behind my back? Is the government spying on me? (The last two may be slight exaggerations.)
Leaps and bounds
The touchscreen revolution pushed web designers towards smoother navigation. Unfortunately, while mobile app developers can add elegant transitions between their screens, on the web we’re mostly limited to clicking from one page to another – a quantum leap that it is up to the browser to handle.
In the quest for offering users smoother websites, this had led to a revival of the long page. If all your content is one page, rather than split between many, you have more control over how visitors traverse it, and can include navigational elements that recreate the tablet experience for traditional desktop users.
The Fifteen 10th anniversary minisite is a great example of this (I didn’t build it so I’m technically impartial in the matter). Each full-screen section of the page has a handy arrow that whisks you smoothly to the next section, recreating the response a downward swipe would bring on a touch screen (if you are browsing on a tablet, you’ll notice there is some clever code that frames each ‘splash’ neatly on the screen after detecting a swipe).
A different dynamic
We did a similar thing for our award-winning Imran Khan Cancer Appeal site, combining vertical movements with horizontal sliders to create an engaging interface (engagement, after all, is what gets you conversions).
The Stirland Paterson website we built last year adds another aspect by tying dynamic content to the scrolling action. As certain key figures come into view, the numbers start increasing before your eyes – who wouldn’t keep scrolling down to see the final total?
These are subtle techniques for improving the way your website ‘feels’ and adding a more modern flavour. A word of warning, though – smooth scrolling should only be used when the user wants to scroll, i.e. if they click or swipe. Automatically scrolling or otherwise meddling with the traditional movement actions will make users think their computer is possessed!