In the early days of web design, pages that scroll endlessly were a big no-no. But scrolling has come back, and in a big way.
Why Has Scrolling Returned?
Scrolling returned to web design for one simple reason — one you might be looking at right now.
Web designers used to try to fit all of your website’s important information “above the fold” on the homepage screen, so desktop users wouldn’t have to search for the next action to take. But according to ComScore, mobile internet usage overtook desktop usage in 2014, and that trend has showed no sign of slowing.
Now that the majority of users are online via their smart devices, cramming all of that information onto one (much smaller) screen is counterproductive for designers.
In other words, the days of carefully crafting six slides for your homepage header are gone.
Combined with the rise of social media apps that encourage endless scrolling, users have become conditioned to thumb past the content at the top of the page to look for whatever fits their specific interests.
These trends aren’t just educated guesses, either — UXMyths cites numerous studies that users don’t mind scrolling, especially if the action takes them closer to what they’re looking for.
The Benefits (and Risks) of Scrolling Websites
Since scrolling is so hot right now, we thought we should cover a few of the benefits of scrolling, and a few of the disadvantages too.
According to Designmodo, scrolling through sites is faster than clicking through navigation menus, and does a better job of keeping the user engaged. Similarly, the ease of use created by gesture controls and well-used parallax scrolling leads users to stay on your site longer and interact more deeply with your content.
It’s not all sunshine and rainbows for scrolling sites, of course. If your designer includes a lot of large images and custom animation throughout a long page, it could affect your site’s load time. Similarly, users can get “lost” on a long scrolling page and get frustrated trying to return to a section they just scrolled past.
Our 3 Best Practices for Scrolling Pages
1. Sticky Navigation
Our first best practice for scrolling pages solves the last problem mentioned above — users who get lost on a long page.
When we create a long-scrolling page for our clients, we’ll add a “subnavigation” menu that only appears on that page. This “subnav” links to specific sections on the page, and “sticks” to the top of the page just below the main site navigation.
Adding this navigation menu also makes it easy for users to skip around to sections on the page that are relevant to them.
2. Use Strategic Calls-to-Action
Long pages with multiple sections are a great way to engage your users, but the page itself should still serve its purpose — to move your visitors along in their buyer’s journey.
To that end, when we create scrollable pages, we’ll insert a Call to Action (CTA) between every section or two that encourages the visitor to do something — learn more about a product, sign up for a newsletter, request a quote, etc.
Instead of putting the CTA at the end of the page, where users might not get to it, we use multiple CTAs dynamically throughout the page to entice visitors into the next step.
3. Don’t Use Scrolling For Scrolling’s Sake
Maybe you’ve read through this little guide and you can’t wait to start on your new long-scrolling website. If that’s you, great! But pump the brakes for a second.
When our website development team pitches a client on a scrolling page, they aren’t just doing it for fun. Scrolling is only useful when serves a client’s message, design guidelines, or audience.
For example, if you have 50 products and each has its own description, technical specs, and instructional video, an endlessly scrolling page probably won’t be the best solution for your new site.
However, if you have a dozen pages on your existing site with a paragraph or two about each of your services, we might recommend a long-scrolling “Services” page with a subnavigation menu linking to each one. That will save your audience from multiple clicks and create a more coherent user experience on your website.