Not long ago, the rhetoric was spread that scrolling is a terrible web design concept. Don’t suggest it. Don’t implement it. Don’t even think about it.
My, how times have changed. More recently, the concept of scrolling and related mechanics has seen a significant resurgence. The popularity is not unwarranted either — it turns out scrolling does have its place in an efficient, innovative design.
In fact, scrolling has shed the chains of its aging stigmas to become a core interactive and necessary design element. Provided you deploy it appropriately, and follow the new rules established during the rebirth, everything should be on the up and up.
The Rebirth of Scrolling
Why is scrolling seeing a rebirth, and what are the new rules?
The simple answer is the adoption and adaptation of mobile platforms. These devices — including tablets — have smaller screens than conventional computers. That cuts down on the active elements you can display on-screen and increases the length of scrolling needed to view a full page.
Most designs just don’t convert well from a large desktop version to a parsed mobile form — especially if you’re trying to fit everything on the screen at once. Text has to shrink. Navigation elements and buttons have to shrink. Images have to scale appropriately. The entire layout and design need to shift to accommodate the smaller screen sizes, shape and resolutions. Most desktop monitors are 16:9, for example, while smartphones and tablets are often used to view content in portrait mode — which is a longer, candy bar shape.
You can’t just ignore mobile users — they now make up most of the traffic your site and brand will see. That means you can’t avoid scrolling. Plus, it turns out people don’t mind scrolling like we once thought.
As for rules, what you’ll want to keep in mind for guidelines is quite straightforward. Don’t make ugly, unresponsive scrolling elements. Make sure they translate well between platforms, especially mobile. Finally, offer gesture and touch support where applicable. The latter rule is crucial if you want to make things more convenient for your mobile visitors.
Why Designers Should Use Interactive Scrolling
That’s a lot of information to take in, but most of it’s generic. Why, specifically, should developers be concerned with including interactive scrolling attributes and elements in their modern designs?
We’re going to discuss the top five reasons designers should consider using scrolling.
1. You Have to Anyway
Okay, we’ll be the first to admit, this reason is on the nose. But that doesn’t make it any less valid or relevant. Even if you hate scrolling, implementing it in your designs and adapting the attributes to meet your theme and style, you’ll have to do it in the end, anyway. Why? Because mobile support is necessary in today’s world, and it just so happens that scrolling is a necessity for mobile designs.
In 2016, mobile internet usage and browsing surpassed desktop browsing for the first time in history. Mobile usage stats now sit at a whopping 60% of all users, versus 40% for desktop.
Worse yet, 40% of visitors will completely abandon a site or portal that takes an excess of three seconds to load. Without scrolling attributes implemented in your design to segment offscreen elements, websites are going to perform much worse, especially on mobile.
2. Scrolling Is Responsive
Responsive design is the new norm. In the past, brands would create multiple versions of a website depending on the platforms their users where browsing from. So, if you visited a site from a desktop, you’d get the full experience. If you visited from a mobile, however, you’d be served a mobile-friendly experience on a separate but connected domain.
Now, responsive design allows developers to adapt a layout and attributes to match the screen resolution for the device the user is on. It’s the same website and domain no matter how you visit. It’s simply readjusted on-the-fly to accommodate varying screen resolutions.
Scrolling is, and always will be, more responsive than the alternative, which calls for processing an entire site, in full, on one screen. On the Pennex Aluminum website, you can see the top navigation bar shift according to the resolution of the device you’re using. It’s responsive, and it compliments modern scrolling techniques well.
3. It Translates Well to Mobile Navigation
Marsha, Marsha, Marsha. Mobile, mobile, mobile. Yeah, we know it’s probably annoying, but you’ll have to move past that. Mobile should be your top focus if it isn’t already.
Scrolling translates well on mobile platforms where touch and gesture controls are used to move around a page or app. You’ll want to honor industry standards like quick scrolling, pinch-to-zoom support, resized elements, status and scroll indicators and more.
Moving up and down a page is just so much more natural for navigation on mobile devices, especially when you’re trying to consume large pieces of content or media.
Infographics are usually just a long, flat image. Check out how Atlassian used scrolling and parallax design to improve their “wasted time at work” infographic.
4. It Requires Less of an Investment for Users
Have you ever been to a website that converted or displayed poorly on a mobile device? The result is a frustrating, tedious experience that requires you to click, tap, scroll and constantly interact to view a site. It’s annoying because in a way it’s a needy, needy portal — like an ex-lover.
You want to make the experience as convenient and comfortable as possible for your users, no matter what platform they’re browsing on. That includes trimming down the amount of total investment someone needs to have on a brand site or portal. If you have to continuously baby zoom, pan and scroll to use the website, you’re going to give up sooner rather than later. It makes perfect sense, right?
Scrolling, by nature, requires less from your users while they browse and view your site. That alone makes it an ideal element to use. It works so well that it can even be used to explain the plot of Inception, for those who are still confused.
5. Infinite and Innovative Scrolling Techniques Are Awesome
Finally, scrolling — at least in its modern form — doesn’t have to be ugly, clunky or superficial. You can get insanely creative with your design and attributes. On the Nasa Prospect site, the background music changes depending on where you’ve scrolled to on the page. Or, take the concept of infinite scrolling as a solid example.
Many sites that use infinite scrolling allow users to do exactly what you think, continue scrolling down — or back up — with seemingly no end. They usually don’t employ conventional scrollbar elements and designs. In fact, infinite scroll sites don’t even display scrollbars a lot of times, and it’s all seamless. You scroll down, the new content loads, and you keep going.
Use status or progress bars instead of bland scrollbars. Deliver personalized content based on where a reader or visitor is on the page. Don’t be afraid to think outside the scroll bar, so to speak.