Are You Charging Enough?

Learn to charge what your worth, take our free course.

The Power of One Page Scrolling Websites

No matter what industry you’re in, Infinite Pages could be the design solution for you. You know, those “never ending pages” that keep users captivated to scroll by placing all the sections under each other? The very same is what gives the user a feeling that he’s in control and a sense of focus since there’s no need to click anywhere. All eyes are focused fully on your content.

Another great aspect of these types of pages is that they work great across platforms, such as mobile where scrolling is an easier and smoother gesture than clicking. Here’s what I consider to be seven excellent examples of Infinite Pages for a variety of web categories. Each showcases how having one long but well organized page can be beneficial to your product and services.

EDUCATION, THE MODERN WAY

Education Above All

Education Above All

We’ve all seen hundreds of educational and non-profit organization websites that are full of content, trying to explain every problem with tons of text. Well, this is a great example of how to pick the right content with just a few lines per section, letting the photos talk more. But what makes this website so great is how the sections are designed by principle. All sections have the same style of imagery, copy, etc., but each is made with a totally different type of grid. You can see the order of content while scrolling, making it easy to navigate. Now, that’s refreshing.

THE CONFERENCE MADE SMART

Ventcamp

Ventcamp

Each section is neatly placed and animated. Everything you need to know about conference is available on that one page. It’s obvious that the order was well thought out. The site opens up with some basic info, moves on to the schedule, speakers, and ends with the one thing you’re interested in knowing by the time you reach the end… when and where it’s all happening!

Unlike the previous example, these sections are not full screen. Navigating through the page is done through a fixed menu at the top with a contrast color for the active section.

PRODUCT FIRST

Tinke

This is my favorite example of using the product as the main element for the page. In this case, the Tinke never leaves your side, not unlike the product itself in real life. Even when it seems like it can be never ending, you always have a slide indication on the right to easily navigate you through the features.

Something interesting about this site is the fixed footer, which provides the user key destinations as well as share buttons that simply wouldn’t make sense at the top nav. Often it is a good idea to apply a fixed footer to your infinite scrolling when the information is functional to the interface.

THE STORY IS THE STAR

Quechua

Completely opposite from the last example, this Spring-Summer lookbook is all about emotions… or so it seems. Each product is neatly disguised in the collection of adventurous photos. The design may seem unconventional, with parallax photos and graphic elements appearing at random, but the end experience is so intricately designed that there’s just no other way to imagine this site.

Moral of the story? Don’t be afraid to try unconventional approaches to your website grid and interactions.

SCROLLING DOESN’T HAVE TO MEAN DOWN

World of SWISS

When even the sky’s ain’t the limit! In this web experience, scrolling down actually takes you up by the slide menu on the right. This is a brilliant example of Swiss Airlines thinking outside the box about scrolling, using it as a smart way to navigate through a design that fits the business and brand story like a glove.

IT MAY FEEL NEVER ENDING

Killing Kennedy

When you want to show an example of a truly (almost) never ending website, this is the one. That’s purely because of content, of course. But what key elements help to make this infinite story more tangible, and therefore less annoying to scroll?

  • An easy to find menu to control the navigation of the site.
  • Constantly visible scrollbar that acts as a timeline.
  • Animations and interactions that change all the time to keep your attention.

SIMPLICITY = EFFECTIVITY

Startups, This Is How Design Works

This one is a great example of a website where no fancy animations are needed to grab a user’s attention. Simplicity with a clear visual style can do the job so you won’t feel distracted by anything. Just like reading a short book without having to turn the pages.

OVERVIEW

With these seven different examples of Infinite Scrolling, you can easily see that the old-new trend may actually be more useful than you think. Just in case you decide to try this for yourself, keep in mind a few simple rules to keep you on course.

  • Pick the right content first: shorter paragraphs, catchy headlines… that’s what works.
  • Quick and comfortable navigation: fixed menu, slide bar on side, visible scroll bar.
  • Animations may help but are not necessary.
  • Keep things interesting: full screen images, background videos.
  • Separate sections so the user can easily see the difference.
  • Scrolling does not mean you need to go down! Think of ways to make it different.

Did you enjoy this post?

Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.

Powered by ConvertKit