Everything you need to know about the long-scrolling trend

Default avatar.
July 08, 2015
Everything you need to know about the long-scrolling trend.
Long-scrolling pages are at the heart of the above the fold vs. there is no fold debate. For a while, designers and marketers thought that your most important content (calls to action, contact info, etc.) should be above the fold because barely anyone scrolled below the fold. Of course, this has been proven absolutely false, as lots of research proves that people today will gladly scroll below the fold and still gobble up your content (provided it’s relevant and high-quality). Back in the mid-90s it was atypical to scroll, but things have changed…a whole lot in 20 years! That brings us right to the present moment, when long-scrolling pages are increasingly popular and downright cool-looking, in addition to being functional.

Memorable visual design

If there’s one thing that these long-scrolling pages are getting a reputation for, it’s featuring a memorable, visual design. Hey, you have to when you show site visitors a long page…that has to keep their interest and motivate them to scroll down for more content, after all! One of the best examples of a long-scrolling page that does this is Bounty Beverages’ site. With a striking background, attractive images, and easy-to-read headlines and subheadings, intelligent section spacing to guide the eyes, and chunked copy to facilitate scanning, this page illustrates how effective and appealing these types of pages can be if done right. bounty Of course, the entire point of a long-scrolling page is getting the visitor to take some form of action via the call to action buttons. Bounty Beverages’ page is replete with them. Above the fold, you see a helpful directional cue pointing up to where visitors should click to learn more about its beers. At the bottom of the page, you also see calls to action prompting visitors to leave feedback and spread the brand’s message on social media. Having a superbly designed page leads to the main benefit of long-scrolling pages, which your clients can’t get enough of, namely…

An increase in conversions

When the way the page has been conceived and executed is strong, visitors will enjoy spending more time on it, and when your bounce rates drop, your conversions increase, as research shows time and again. It just stands to reason: the longer visitors stay on a site, the more chance they’ll be persuaded to respond to your calls to action. Your visitors spend more time on a site if they are fully engaged engaged with it. This is the key aspect of capitalizing on a great long-scrolling design. That begs the question, how can designers increase the user engagement level in the first place? There are numerous factors that measure a user’s engagement level. They include:
  • page views per session;
  • time spent on a site;
  • frequency of site visits;
  • interactions with on-screen elements;
  • bounce rate;
  • conversion rate;
  • abandonment rate.
The beauty of long-scrolling pages is that they can include enough content to entice visitors to spend a longer time on the site than usual—which they can help along with strategic storytelling. In fact, over the past couple of years storytelling has been increasingly used in web design. Make sure to use storytelling in your long-scrolling pages to keep your visitors’ interest and get them excited about converting at the bottom of your page. After all, we human beings are simply suckers for a good story. Okay, so now it’s more than clear that long-scrolling pages are good for business, the only thing left is deciding how to lay out your awesome, long-scrolling page.

Laying out long-scrolling pages

Nailing the placement of specific elements on the page is key to its success. The order really matters because, as we explained, long-scrolling pages tend to tell brand stories, so the elements have to unfold logically. If there’s a common bond among all long-scrolling pages regarding what first catches your eye, it’s the presence of mega images that are in the header. Sometimes these mega images are part of an automatic carousel or stretch across the entire width of the page. Together with these images, you’ll usually see the name of the company in the header, along with a value proposition for whatever’s being sold. All this is above the fold. When you start to scroll, though, that’s when things get all the more interesting! nest See, that’s when the storytelling begins in earnest, as in the case of Nest, the control-it-from-anywhere thermostat. When you begin to scroll, you get invited to take a tour of the product and how your life can change because of it. In fact, each time you scroll, you see another short section that invites you to explore Nest from a unique angle. Other long-scrolling pages, like The Beetle’s, feature videos, so that visitors can see the car in action. Besides this, there’s a collection spotlight that invites visitors to take a glance at all the cars in the Beetle collection. It’s a slightly different approach, but, again, the gist is the same: it’s still about storytelling to introduce the product to visitors and get them excited about it. beetle Sometimes, a long-scrolling page can be the ideal place to showcase a restaurant’s menu items, as is the case with Whitmans’ restaurant in New York City: its long-scrolling page is basically an excuse for customers and those thinking about going to Whitmans for the first time to preview what they can order. whitmans Storytelling can also be a vehicle for efficiently moving visitors through the many services and features of a company, such as with Squarespace’s page. This content-management system that lets people create websites and blogs needed a page to show off its many services. When you scroll down, you see everything from the various types of sites you can create to the different things you can do on Squarespace. squarespace

Why long-scrolling?

Long-scrolling is a trend that’s only going to get bigger, especially with many big brands using it for their prominent products and services. If you like this new design approach, you can thank mobile for bringing this more to the mainstream. With more and more users depending on mobile, designers had to find a way to efficiently and neatly display content on a smaller and narrower screen. Just think of how you scroll down with your thumb when you’re looking at a site on your mobile device. The good thing about these pages is that they work equally well on desktop as they do on mobile. You can expect to see designers continue to embrace this trend as we move forward.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…