Continuous scrolling

The user wants a central place to view and interact with most or all content so they don’t have to waste time navigating between pages.

Problem

The user wants a central place to view and interact with most or all content so they don’t have to waste time navigating between pages.

Solution

With the evolution of technology and the wide adaptation of asynchronous data loading and rendering, most users have the desire to consume content at their own pace in the volume they require rather than rely on constant navigation between pages with clicks or taps. Content presented at one moment is a subset of a much larger seemingly endless set.

Major services and applications that we use today on a daily basis rely on this technology to server the information in the user’s pace.

Start out with a reasonable amount of data (depending on the user’s need) and load additional content on demand. This not only speeds up the initial load but also gives quick access to additional content as required.

Consider managing the loaded data in the background by removing rows that are not shown. When scrolling through and loading a lot of data the page rendering engine can get overwhelmed which reduces scrolling performance. Depending on the environment and processing power this varies, however it is something to consider.

Additional data can be served on the fly while scrolling or can be requested with a “Load more” button.

When serving data on the fly, content that is rendered below the list will not be accessible.

  • Infinite scroll
  • Load more
Showing 2 live examples
Infinite scroll
    Infinite scroll
    Load more
      • Tweets
      • Brian Rinaldi @remotesynth - 0m
        In ES6, the name property of a function becomes standard and is often filled automatically. @rauschma shows how. http://t.co/80OmlCkkQV
      • Brian Rinaldi @remotesynth - 2m
        Learn how ES6 Arrow Functions let you manage JavaScripts this more logically from @derickbailey http://t.co/EsGiQlTGsV
      • Maximiliano Firtman @firt - 3m
        iPad Pro for Responsive Web Design: Wider viewport of 1024px against 768px of all current iPads; Pixel Ratio: 2.
      • Brian Rinaldi @remotesynth - 5m
        RT @MobileWebDaily: Mobile Apps Have a Short Half Life; Use Falls Sharply After First Six Months: http://t.co/k6EAaXCRkb
      • Brian Rinaldi @remotesynth - 7m
        Lovefield is an open-source relational database written in JavaScript and can run within browsers. http://t.co/dy2G1vAL9U
      • Maximiliano Firtman @firt - 8m
        You have the SDK for the new 3D Touch (better than Force Touch) but don’t have devices or simulators for testing it http://t.co/zC7Q8vnFtf
      • Brian Rinaldi @remotesynth - 1h
        Why NativeScript may appeal to developers from the .Net ecosystem for building native mobile apps by @samidip http://t.co/5Buka8XYDj
      • Maximiliano Firtman @firt - 1h
        RT @xeenon: @grigs @firt UIWebView is not available on tvOS. Check the headers.
      • Maximiliano Firtman @firt - 1h
        tvOS for the new TV supports: 1) native apps Swift/ObjC2) “web” apps using JavaScript, DOM & TVML pages** No HTML or WebView support **
      • Maximiliano Firtman @firt - 2h
        Really? Again Apple? The new Apple TV is just the new Apple TV http://t.co/1cjaOhfIEM
      Load more

      Problem

      The user wants a central place to view and interact with most or all content so they don’t have to waste time navigating between pages.

      Solution

      With the evolution of technology and the wide adaptation of asynchronous data loading and rendering, most users have the desire to consume content at their own pace in the volume they require rather than rely on constant navigation between pages with clicks or taps. Content presented at one moment is a subset of a much larger seemingly endless set.

      Major services and applications that we use today on a daily basis rely on this technology to server the information in the user’s pace.

      Start out with a reasonable amount of data (depending on the user’s need) and load additional content on demand. This not only speeds up the initial load but also gives quick access to additional content as required.

      Consider managing the loaded data in the background by removing rows that are not shown. When scrolling through and loading a lot of data the page rendering engine can get overwhelmed which reduces scrolling performance. Depending on the environment and processing power this varies, however it is something to consider.

      Additional data can be served on the fly while scrolling or can be requested with a “Load more” button.

      When serving data on the fly, content that is rendered below the list will not be accessible.

      Share in SMS
      • SMS