Exploring the Long Scrolling Web Design Trend

The smaller the screen, the longer the scroll.

That truism explains the rise of the long scrolling: with mobile browsing overtaking desktop browsing, the popularity of small screens has urged designers to rethink their outdated “above the fold” mentality.

Long-scrolling creates plenty of new opportunities for storytelling, navigation, creative visuals, and a more immersive overall experience. As a result, we find several common techniques and strategies start to emerge:

  • Parallax Graphics – Borrowed from the video game industry, this strategy of moving the backgrounds at different speeds creates a 3D effect and stimulating visuals that are more enjoyable to interact with.
  • Screens as Pages – An important way to organize information on a single page, differentiating concepts into screen-sized sections, usually by changing the background, makes sites more cohesive.
  • Sticky Navigation – One of the biggest drawbacks of long scrolling is disorienting the user, so having a navigation system that always stays in the same place on the screen gives users control and security to prevent getting lost.
  • Animated Interactivity – Scroll-triggered animations add a fun level of interactivity that engages the user to a point where they enjoy scrolling regardless of content.
  • Atypical Direction – Due to the recent trendiness of long scrolling, sites can set themselves apart by scrolling left, right, or upwards.
  • Indicators – Some users will not think to scroll on their own, so quick instructions like “scroll down” or another indicator avoids confusions – just be sure to distinguish these from other links or calls-to-action.

As described in Web Design Trends 2015 & 2016, these are the techniques that made the sites below among the best examples of long-scrolling sites.

Twitter

One of the pioneers responsible for breaking the page-by-page mold, Twitter remains among the best and most-recognized long-scrolling sites today. This format allows the tweets to be arranged chronologically while still seeming new and fresh.

twitter long-scrolling site

For social media sites and others with user-generated content, long scrolling is not just a trendy choice but a practical one. The neverending loading of new content from infinite scrolling allows otherwise chaotic content to be organized.

twitter neverending loading of new content

Heart Kids NW

The New Zealand charity Heart Kids pulls out all the stops. The long-scrolling site combines animations (some scroll-activated), stunning color usage, poignant imagery, and cursor interactivity to promote its life-saving message.

Notice the unobtrusive “Scroll” icon and instruction on the landing screen, and the sticky call-to-action that always remains at the top.

Heart Kids long-scrolling site combines animations

The Boat

One of the most creative uses of long scrolling is SBS’s The Boat, something like an interactive novel. The continual animations and clever use of motion and angles when new content appears draws the user/reader into an immersive experience that traditional, stagnant scrolling sites can’t match.

The Boat something like an interactive novel

MCA Leicester: The Seven Types of Motorcycle Rider

This offshoot site for MCA Leicester demonstrates a smooth method to indicate scrolling without actually scrolling. The grayed out helmets on the left side, stacked vertically, indicate (along with the title) that the user has only to scroll down to see more content.

smooth method to indicate scrolling

An additional tactic is the clever animation that presents each new screen, making the site somewhat of a long-scrolling/page-by-page navigation hybrid.

smooth method to indicate scrolling

Thirteen Reasons Why Your Brain Craves Infographics

The natural style of long scrolling, where different sections and concepts are intrinsically united in a continual stream, makes them great for infographics.

As Thirteen Reasons Why Your Brain Craves Infographics shows, the single page format allows designers to fluidly present heavy doses of information in smaller, digestible bits.

Thirteen Reasons Why Your Brain Craves Infographics single page format

Moreover, scroll-activated animations, such as the eye that moves with the scroll as well as background animations, negate the sometimes boring aspects of learning information.

Thirteen Reasons Why Your Brain Craves Infographics

Junko’s Story: Surviving Hiroshima

Another SBS site, Junko’s Story mixes the storytelling and infographic properties of long scrolling to tell survivor’s chilling story of surviving the Hiroshima blast.

Due to the solemn nature, the site keeps a traditional format with plain text interspersed with graphics. However, the site retains a fresh and modern feel with scroll-activated images, such as the metal helmet above, that fade into view in the margins.

Junkos Story mixes storytelling infographic properties long scrolling

These display telling artifacts and factual infographics about Hiroshima – such as a map of the blast radius – which can be clicked for further details.

Beagle

The site for Podio’s Beagle tool sets a page-by-page navigation to the long-scrolling format.

Beagle page-by-page navigation long-scrolling format

Each point in its value proposition has its own screen/page, however all are accessible through a linear scroll and are united by animations that carry user attention from one screen to the next, such as the piece of paper moving from the screen to screen above.

Beagle

Bowhead (Tails and Whales)

Like Beagle above, Bowhead takes advantage of long scrolling to display its value proposition point-by-point – though for a single product. The site uses animations like fades and slides to keep the content engaging.

Bowhead long scrolling to display its value proposition point-by-point

The Kings Arms

Not all long scrolling sites have to be flashy. The London pub The Kings Arms uses simple background divisions with no fancy animation transitions between screens.

However, a parallax motion on the background phones and additional cursor animations (not to mention an aesthetic layout) keep the site from appearing dull.

The Kings Arms uses simple background divisions with no fancy animation transitions

Wall’s Ice Cream & Airpure Car Fresheners

By contrast, the promotional site for the Wall’s Ice Cream and Airpure Car Fresheners collaboration is very flashy. Little more than images of the iconic popsicles, the long-scrolling site features entertaining animations between screens that make it worth browsing.

Notice sticky navigation on the left site and the progress bar at the bottom (which changes colors).

Beatrate Band

The long-scrolling site for the band Beatrate features a couple of experimental features for long scrolling, including autoplaying video and a horizontal image carousel.

long-scrolling site for the band Beatrate

Space Needle

The Seattle Space Needle site is a perfect example of atypical scrolling direction. Under the pretense of traveling up the space needle (and beyond), it makes sense that users scroll up instead of down.

atypical scrolling direction Seattle Space Needle site

Additional Sites

Keep

The Reveal (Lexus)

One John St

One to See, One to Kill

Cameo by Vimeo

Squarespace

Yep App

Beoplay

Inbox by Google

Be Human by Reebok

Conclusion

As the sites above prove, the most successful application of long scrolling is for its practical benefits, not to appear part of a trend.

There are many useful advantages of long scrolling: unifying disorganized information, interactivity, navigational liberties, stunning visuals, displaying extensive content (infinite scroll), linear storytelling, etc. However, given the drawbacks like disorientation and occasionally loading times, you shouldn’t recklessly switch over. Understand the best techniques to make the most out of it.

For more web design advice, check out the free ebook Web Design Trends 2015-2016. The guide explains more techniques for long scrolling, as well as 9 other current trends. The chapters are supported with analysis of 166 hand-picked examples from companies like Adidas, Intercom, Apple, Google, Versace, and others. To help speed up the design process, there’s also a curated list of 100 free resources.

Comments