Blog = weB log

This is how the word blog came into existence.

Scrolling can be a powerful thing and here is why.

Long Scrolls

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:

  • Advances of HTML5 / CSS / Javascript which enables more freedom for developers to design and develop their web and sites like Facebook and Twitter made a huge breakthrough with these.

  • 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

  • Promotes interaction

  • 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

  • Parallax 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

    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

Share Us