Schedule a Consultation

Everything You Need to Know About Scrolling Web Pages

Aug 10, 2017

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.

What happened?

Why Has Scrolling Returned?

Scrolling returned to web design for one simple reason — one you might be looking at right now.

Mobile devices.

mobile-1.jpgWeb 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

post-its.jpg

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.

Long scrolling pages are just one tool in our mobile-first design toolbox.
Learn more about mobile-first design here.

Tyler Bales

Written by Tyler Bales

Tyler can design like nobody's business. Scratch that. Actually, he can design like everyone's business. Tyler is one talented guy who always delivers a beautiful product. He is also the nicest human on planet Earth. We really enjoy this combination of traits and we think you will too.

Recent Posts