COMPANY BLOG & NEWSROOM

25Feb

Exploring the Long Scrolling Web Design Trend

The Long Scroll

Are you a long-scroll lover, or a strictly ‘above the fold’ kind of person? The debate rages on about whether to go long or not – with fierce arguments on both sides. The big question is – is there a right answer? Or is it just a matter of personal preference?

I personally think that long-scrolling provides a great alternative to the fold vs. no fold battle – but of course, it’s not without its complications. Here’s an outline of what makes single page sites awesome… and why they can be problematic.

Long-Scrolling – Why It’s Hot

Firstly – some clarification. If you believe people don’t read below the fold, guess again. In fact, Chartbeat collected data from 2 billion visits, and found that 66% of user time was spent below the fold, not above!

The fact is, long-scrolling offers us designers some pretty exciting opportunities. It gives us the chance to tell a story, include some powerful visuals, and create a more intense, immersive experience. Here’s just a few reasons why it rocks.

airpure

  • Visual creativity. This is one of my favorite aspects about long-scrolling – it really does set your creativity free in terms of visuals. Rather than focusing on divided block content, you can create something continual that inspires the user to scroll down – giving them something fresh and exciting.
  • Tells a story. Long-scrolling lends itself perfectly to developing a narrative. It allows you to tell a story, which in turn, encourages valuable user interaction. Find out more here.
  • Simple and more intuitive. Think about how you use a tablet or smartphone. It’s all about the scrolling, and not so much about clicking. Long-scrolling is custom-made for smart device users. It’s a step away from complex navigation, and a step towards a simpler, more user-friendly experience.
  • Perfect for responsive web design. While we’re on the topic – long-scrolling is well suited to mobile devices in plenty of other ways too. As you know, page design can get pretty complex across devices, when you’re trying to create something that suits both small and large screens. Long-scrolling simplifies things a whole lot more – creating a more seamless transition from desktop to smartphone.
  • Gets to the point. Nowadays, clients are increasingly searching for web designers who know how to distill their vision into one page – how to make their brand punchy, powerful, and thoroughly dynamic. If you’re a long-scroll pro, you’re in a good position to deliver this – it’s the ideal way to condense a business message into one exciting page.
  • Easier to get results. Scrolling is quite an instinctive action, whereas clicking through to another page requires thought – and motivation. Generally speaking, a single long-scroll page encourages people to take action much more swiftly than separate web pages.

silesoleil

Long-Scrolling – Why It’s Not

However, it’s not all plain-sailing with long-scrolling. Like any other form of web design, it comes with its own set of unique drawbacks. Here’s a run-through of the main issues:

  • Time-consuming. As any long-scroll designer will testify, pageless websites take time to conceive, and to create. They require a lot of collaboration between client and designer, which can prove problematic if you’ve got a client with strong opinions (that don’t match your own!).
  • Not SEO friendly. This is potentially a big problem with long-scrolling sites. Unsurprisingly, when you reduce the numbers of pages, you’re giving Google less pages to index, and this has an impact on the SERPs. However, there are a few ways you can get round this – check out what Quicksprout and Moz have to say about it.
  • Slow load times. Many web designers are derisive about long-scrolling due to its performance issues. As with any design, significant amounts of video or image content can slow site speed down to a crawl, especially if it’s a parallax-scrolling site, which relies on Javascript and jQuery. Again, there is a solution – read this tutorial to find out more.
  • Awkward navigation. Hmm… no ‘back’ button you say? This is a flaw in the design, for sure. Instead of simply revisiting the previous page, users have to scroll back each time, which can get pretty frustrating. The best way to counter this is to create a persistent top navigation, and have each item anchored to a page section.

Mastering the Art of Long-Scrolling

Whether you’re a fan of long-scroll websites or not, it’s undeniably useful to know how to create one. Here’s a few pointers to help you.

le-mugs

  • Understand the potential (and limitations) of long-scrolling. Sure, long-scroll sites can look awesome, but they won’t be suitable for all designs. When you start work on a web project, review it as a whole, and ascertain which form of design is best suited to the client. Long-scrolling sites look amazing, but they’re not an automatic formula for online success.
  • Distinguish between CTAs. When you’re creating a single-page site, make sure you clearly differentiate between scrolling arrows and other calls-to-action.
  • Scroll smart. Think about how you can encourage users to keep scrolling. Design elements and visual clues are a good way to achieve this. We’re talking arrows, animated buttons, or other creative user interface tools. To make things really clear for the user, you could include small buttons with instructions (such as ‘scroll for more’) to maneuver them more successfully around the site.
  • Make navigation easier. To help users browse the site more easily, use a sticky navigation bar. This means they won’t have to keep scrolling back up to access previously viewed content.
  • No overkill. A fairly lengthy long-scroll page is fine. A tedious mass of 500 pages-worth of non-stop content is definitely not. Just keep it simple. Get the message across, then stop. And remember, even infinite scrolling sites aren’t really endless!

TL;DR

I’m pretty sure that we’ll be seeing a whole load more long-scrolling websites in 2016 – which is unsurprising, as they offer new levels of creativity for both the client and the designer. However, just like any other design trend, it’s not without its drawbacks, and it might not be the best option for your specific site. Before making a decision, consider the brand, the content required, and how the audience expects to use the site.

What are your experiences with long-scrolling sites? Do you love ‘em, or loathe ‘em? Share your thoughts!

About the Author: Vincent Sevilla is a web designer for Websitesetup. With a background in online marketing, he loves to create things related to graphic design.

2 comments

  1. Chris Howard Feb 28, 2016

    My biggest issue with long scrolling is it doesn’t translate well to small screens. I hate flick, flick, flick, flick, flick, flicking through long pages on my phone.

    I’d like to see more designers about how their content groups, so each group on a long scroll page, became a horizontal scroll.

    Mixing vertical and horizontal scrolling is already well established on touch devices, we just need to see more of it on web pages. I think though designers are afraid of horizontal scrolling because sliders have got such a bad rap (rightly so, because of their misuse).

    Touch interface users though, are much more multi-dimensionally open minded than pointer based interface users.

    So, for touch screens, lets take advantage of those multiple dimensions, instead of one-dimensional loooonnnnnnngggg scrolling web pages.

  2. Jules Jun 15, 2017

    Please stop re-designing “serious” websites around mobile devices.
    So many sites now have a dreadful UX because of reduction in visible, useful content and navigation.
    Long pages are just another manifestation.

    ….. and the mostly useless screen-filling “hero-images” don’t help either !!

    Absent a Page number (or title), returning to a previous item can be a nightmare of scrolling back up and down – never quite sure where that item was.

    What if all webpages were limited to (say) 4 “page downs”, the User might have a chance of remembering – but that’s never going to happen.
    So how about a grid in the margin – like a map?

    Much better though would be to give the User the option to keep pages – and allow “serious” work to proceed without the extra work of guesswork scrolling.

leave a comment

All posts Back to top