Scrolling can be a powerful thing and here is why.
Long scrolling used to be a no when it comes to designing websites because older websites are mostly text, not interactive which provides and environment not suitable for scrolling. The factors below will explain to you why is long scrolling becoming a trend nowadays:
Popularity of mobile phones or small screen devices own by the population which made long scrolling really popular because developers would choose to make the pages to be “long scroll” instead of shrinking the details into tiny bits to be displayed on the screen.
Ability to do storytelling with long scrolling. Web designers make use of this to design storytelling page by page that offers user interactive fun to discover what lies ahead after scrolling instead of direct to the point.
Advantages and Disadvantages of Long Scrolls
Allows creative storytelling and visuals
Aids simple navigation
Infinite scrolling entices users to stay longer
Works well with touch controls
Opens the door for more app or game-like experiences
There will always be people who simply refuse to scroll
Negative effect on SEO
Can be confusing and disorienting to people who prefer traditional navigation
Difficulty in returning to previous “page” (a persistent top navigation bar circumvents this)
May slow site speed, especially with video content or parallax effects
As a summary to these boon and banes, long scrolling are more suitable when the website:
Anticipate a lot of mobile users
Frequently update content
Carry a heavy amount of inalienable content
Do not have heavy media like videos that will slow the site down
Methods to Implement Long Scrolling
This methods is to create a background and foreground (or differing layers of the background) moving at different speeds which creates a 3D effect to enhance otherwise stagnant 2D graphics.
Screens as Pages
Each new screen can be sectioned off with a different background, style, typography, etc., to properly divide one page into several. For example, using a white background as the first section and followed by a black background when moving on to the next section.
Image 1: Two Sections to represent new screen
Animations brings life to the page and make the users feel more connected and fun when they are scrolling along the pages. A story can be told by using animations to guide the users in your website. For instance, guide them about what does your products do or steps in using your products.
Best Practices to Apply in Long Scrolling
Differentiate the scrolling navigation controls from other calls-toactions and links
If you’re not designing a single-page site, the home or landing page should be in a long-scrolling format, with splinter pages in a shorter format
Sticky navigation, can be stick to the top which will help in navigation during long scrolling
Include visual cues to orient users in the scroll “like a “Scroll down” note at the top of the page, and a dotted path to show their position in the scroll. This can be apply when they are scrolling through several sections in a single page.
Conduct usability testing and behavior analysis
Don’t overdo it with too many screens. Even infinite-scrolling pages shouldn’t go on infinitely.
That is all for “Long Scrolls”, now you can apply these techniques to develop your website.
Source: Web Design Book of Trends 2015-2016, by UXPin
Thumbnail: Designed by Creativeart / Freepik