The Pros and Cons of Long-Scrolling in Web Design

Long-scrolling, one-page websites are becoming commonplace. The above-the-fold versus the no fold debate appears to be tilting in favor of the latter approach. It has for a long time been taken for granted that a website’s most important content should be above the fold. The argument being that most users are reluctant to scroll down a page if they haven’t already found what they are looking for.

This argument does not hold water any more, however. As long as the content of a homepage or landing page holds promise of good things to come, users will gladly keep scrolling as long as the content is relevant to their needs.

Long-scrolling and infinite-scrolling sites are sometimes portrayed as a new and modern web design trend. These scrolling techniques have actually been in use for many years. They have recently become more and more popular, which gives them the appearance of being new and innovative techniques.

Long scrolling is here to stay, and for a good reason: users clearly like it.

Long Scroll, Smart Navigation, Clever Special Effects

The increased use of mobile screens has definitely played a key role in the widespread acceptance of this technique. Attempting to navigate with the use of buttons on a small screen can be cumbersome, and even more so as screens get smaller and smaller.

Long Scroll, Smart Navigation, Clever Special Effects

Long or infinite scrolling gets around this since both approaches lend themselves nicely to touch gestures. The advantages of long scrolling, in combination with advances in CSS and JavaScript, have also created better options for web designers. Why is long scrolling here to stay, and why is “above the fold” no longer relevant in many websites?

How It All Works

Long-scrolling sites tend to work in one of two ways. Either the site has a larger homepage with links to other pages, or the site consists of a single, long page. Either setup creates a wealth of possibilities for a web designer, including the use of storytelling techniques.

Storytelling can often be made more effective by incorporating subtle special effects, such as parallax scrolling, Ajax/jQuery, or scroll-triggered animations.

Long Scrolling Used Primarily for Storytelling

A Smooth Platform

Page-by-page navigation and storytelling do not always make a good match. This type of navigation tends to be herky-jerky at best, whereas long scrolling provides a much smoother storytelling platform. Long scrolling also gives the user greater control over pacing, while its continual immersion capabilities avoids the lags between pages that can be detrimental in keeping a user focused and fully engaged.

A Smooth Platform

Giving the User Control

Long scrolling also allows creative special effects to be used more effectively. Parallax scrolling and scroll-activated animations are controlled, at least to some extent, by the user, giving the website an almost game-like feel; and definitely a friendlier one.

Giving the User Control

Why Most People Like Long-Scrolling

Making the Most of a Memorable Design

You could easily get the impression that long-scrolling pages opened the door to the use of highly innovative, memorable, visual designs. In truth, it’s the other way around. These cool design types have long been with us.

Making the Most of a Memorable Design

To put it simply, if you want your site’s visitors to keep scrolling down a long page for more content, you have to keep them interested. A memorable design will do that!

Increasing Conversions

Long Scroll, Animation, and Hover = A Potent Combo

Getting back to the original debate; a long scrolling website will not turn users off, increase your bounce rate, or drop your conversions – but only if its design is solid, and has been carefully executed. When that’s the case, bounce rates drop, and conversion rates go up.

Long Scroll Animation Hover potent Combo

Long scrolling offers plenty of opportunities to discover ways to keep users fully engaged. The longer they stay on your site, the more likely they are to respond to your calls for action.

Managing Lengthy Content

One major challenge is to determine the right amount of content to be placed on a page. Too little, and it becomes harder to engage a user, while too much can overwhelm a user, cause a cluttered effect, and be detrimental to the user’s experience.

Managing Lengthy Content

Long scrolling offers a simple solution. Content can be spread out, and thereby allowing a user to assimilate it at his or her own pace – and without disruptive page-navigation interruptions. This technique is ideal for storytelling, and also for disseminating information that cannot be neatly confined to a conventional web page.

Long-Scrolling Storytelling

Effectively Using Horizontal Nav Bars

Horizontal navigation bars tend to fit nicely onto most page types, but there is a limit as to how many internal pages they can accommodate. Drop down menus are one solution, but they have their own their disadvantages as well.

Effectively Using Horizontal Nav Bars

Long scrolling can significantly reduce the need to accommodate multiple internal pages. Instead, the nav bars can be used to guide a user to the main portions of a site’s main page story.

Creating Engaging Websites

Cool Uses of Metaphors

Metaphors are not often thought of as web design elements, but they can provide a great way of keeping a user engaged throughout a lengthy story or explanation. Humans are not comfortable when faced with uncertainty, and this especially applies to website visitors.

Cool Uses of Metaphors

Weave a few simple metaphors into your long pages to counteract any feelings of uncertainty. This will by prepare your visitors for what they may encounter as they proceed.

Practical Uses of Interactivity

Another design technique users appreciate is to strategically place interactive elements throughout your site’s pages. These interactivities serve to give your users a mental break, while at the same time maintaining their interest and keeping them focused and engaged.

Practical Uses of Interactivity

This approach is somewhat akin to giving people a chance to get out and stretch their legs during a long road trip. It’s refreshing.

Why Some Users Don’t Like Long-Scrolling

Many users, and especially mobile device users, like long scrolling offers. Some users, however, don’t particularly care for, or don’t like it at all. What you need to bear in mind as a designer, is that long scrolling can be ideal for some types of websites, and ill-suited for others.

Don’t just incorporate this capability because it is trendy; consider the objectives of your site, its limitations, and its overall structure – and then decide.

What’s Next?

Smaller Screens – Longer Scrolling

Small screens and long scrolling go hand in hand. Unless small screens suddenly go out of fashion, which is highly unlikely, long scrolling is probably here to stay.

Smaller Screens – Longer Scrolling

It is quite likely that, as mobile devices evolve, and their functionally improves, long scrolling techniques and functionalities will also evolve and improve – so stay tuned.

Small Screen Parallax Possibilities

Parallax is primarily a desktop effect at present, and it is not yet as mobile-friendly as designers and users would like it to be. Thanks to improvements in Ajax and other auto-loading strategies, this situation is bound to improve.

Small Screen Parallax Possibilities

Parallax is more than an entertaining special effect. When properly used, it can provide the kind of smooth visual narrative that will keep a user engaged.

Long Scrolling & Minimalism – An Outstanding Combination

Long scrolling can be expected to incorporate or act in concert with other trends as it increases in popularity. Take for example the trend toward minimalism. While minimalism and long scrolling do not appear to be particularly related, give a minimalistic site a long-scrolling capability, and you can realize some amazing results.

Long Scrolling and Minimalism – An Outstanding Combination

All of the examples above have been designed with mobile devices in mind. But they work equally well on desktops. Long scrolling techniques really do shine when touch gestures are used, but you can expect designers to find better ways to use these techniques with non-touchscreen applications.


  • Martin Toye

    Great Article. I think long scrolling will become more and more popular due to the use of mobiles. Look at most newspapers are moving online so everyone it getting used to getting their information from scrolling down articles.

  • Azriel Omega

    How about SEO ?

  • Jason Lancaster

    So, not for nothing, but where’s the data supporting the assertion that long scrolling doesn’t hurt or help conversion rates, bounce rates, time on site, etc.? It’s easy to say “when you do it right, it works great!”, but that doesn’t really help me determine when long scrolling is detrimental and when it isn’t.

    In my own work, I’ve found that scrolling is just fine when the user is looking for general information and/or details, and bad when the user is “on a mission” to find a specific bit of info. “Good design” would therefore include the essentials above the fold, and details/general info down below, at least in my experience.

    But that’s not what we see on a lot of websites with long scrolling. Is this because these designs are “bad”? Or maybe because my experience isn’t correct? Maybe there’s some data and testing available to help us decide when to do what?

    Here’s my point: Designers need to stop talking in generalities and start talking in specifics. User testing is cheaper and easier than ever, and a lot of tools make it easy to compare different layouts on live sites quickly. If a designer says “long scrolling is good, and we know that because we analyzed…”, I can believe that.

    But if designers keep going back to the old “It works great when you do it right” trope, I don’t see the point.

  • Tarian

    “As long as the content of a homepage or landing page holds promise of
    good things to come, users will gladly keep scrolling as long as the
    content is relevant to their needs.”

    Two things:
    i) “gladly” scroll. Not convinced. Scrolling represents “work” and absent a good pay-off is annoying.
    Moreover, looooong pages rarely have reference points – so re-finding that slightly interesting items somewhere back up the page can be needle-in-a-haystack.
    Give me page numbers (or titles) any day !

    ii) ” ….homepage … holds promise ..”.
    Theoretically true ….
    …. but why do so many re-designs start with a pointless screen-filling picture ?
    That picture may look “pretty” – but almost never outweighs the Contents list or text intro that has been removed !

    Long pages now seem an excuse for lazy page designing. No more having to spend time managing layout and maximise Content per view – just string it all out ….

    In summary, long pages may be “tolerated” – but only by:
    – removing space-wasting, over-large pictures (click a thumbnail instead

    – stop promoting empty “white space”
    – limiting page length and/or
    – providing clear staging points (or map-style grid in the margin)

  • Rebecca Docimo

    Back in the day “above the fold” was the golden rule to live by. I understand how this new style came to be with the evolution of browsing platforms, and I think whenever capabilities evolve designers like to throw off their shackles and get a little carried away. It reminds me of when animated gifs became possible- because they were possible everyone wanted to use them and then overuse them. Then designers came back to their senses and (the good ones at least) started using them WHEN and IF they made sense, not just because. I think the same thing needs to happen here.

    I think this trend could be good IF it’s properly applied in the right situation and as long as the designer isn’t slapping 30 pieces of unrelated information one after the other onto one mongo page. The idea of long pages for storytelling is intriguing and probably lends itself to some industries but not all and only makes sense if each chunk of information hangs together. Personally, when I go to many sites I’m looking for very specific information- if I have to hunt for it I get irritated. If I go to a restaurant site (an industry I design for), I better be able to find your hours and phone number right off the bat and not have to scroll down 6 screen lengths to get it. Honestly the feeling I’m getting with lots of sites these days is information overload. I hope the trend self corrects and we can find a happy medium between teeny pages with lots of clicking and huge pages with too much unrelated information.