Tag Archives: Sticky Navigation One

Exploring the Long Scrolling Web Design Trend

web-trends-long-scrolling-thumb-300x200The smaller the screen, the longer the scroll.

That truism explains the rise of the long scrolling: with mobile browsing overtaking desktop browsing in 2014, 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.

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.

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.

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.

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.

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.

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.

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.