• Reading time: 10 min.
Pocket Facebook Twitter WhatsApp Email
Scrolling then and now
Everything used to be easier. There was also scrolling, we used the mouse to move down a page and usually up again, clicked on the next page in the menu or via a content link and repeated the game. In the web design of that time, an attempt was made to avoid scrolling altogether.
Everything is more complicated these days. Social networks in particular have contributed to the fact that more content is accommodated on fewer pages and, as a result, more content is naturally displayed per page.
The concept of "above the fold", for which I worked on individual pages for days at the end of the nineties, so that all important information was completely visible when a page was initially called up and without scrollbars on the right and bottom, is on lost meaning. Today the fold, i.e. the lower visible edge of a page after it is called up for the first time, is mainly the indicator that something is to come afterwards.
In addition to social media, mobile devices are fueling the trend towards long scrolling, as it is almost impossible to implement the previous concept of “above the fold” for mobile devices. The screens are way too small. The necessary compromises would simply not be possible.
Don't miss anything: Subscribe to the t3n newsletter! 💌
Please enter a valid email address.
Sorry, there was a problem submitting the form. Please try again.
Please enter a valid email address.
Note on the newsletter & data protection
Almost done!
Please click on the link in the confirmation email to complete your registration.
You want more information about the newsletter? Find out more now
Smartphones have made scrolling socially acceptable again, so to speak. On small screens, it's far more comfortable to scroll through a long page with your finger than to use fingertip navigation to jump from page to page. The naturalness of the scroll gesture also allows different scroll speeds. You know it from leafing through a book. Provided that the author has set optical anchors for orientation, a book can be scanned very quickly for relevant information.
The trend towards scrolling has brought about the so-called one-pagers in recent years. These are websites that only consist of a single page and distribute all relevant information in a structured manner across this page. One-pagers can give the impression that they consist of several pages.
The different types of scrolling
Scrolling is no longer a trivial activity that arises from the normative power of the factual. Rather, as designers, we can consciously decide which type of scrolling to use.
Long scrolling is interpreted differently. Therefore, I want to first define the term in contrast to other terms.
Long scrolling in its original form simply describes a long page with content that is structured homogeneously and is scrolled through from top to bottom. Viewed in this way, we can certainly understand long scrolling as a generic term.
Fixed long scrolling is a variant of long scrolling in which individual static elements do not scroll. It combines the advantage of the previous page-oriented design with that of pageless scrolling.
Infinite scrolling, on the other hand, refers to a form of long scrolling in which new content is constantly reloaded at the end of the viewport, i.e. the visible browser window, so that the page appears to be endless, infinite. This is how all social networks work. To what extent this is the right choice for normal websites requires careful consideration.
Last but not least, I would like to mention parallax scrolling, which is not a subtype of long scrolling. Parallax scrolling is more about the aspect of storytelling through natural-looking animation. The illusion of movement is created by sections of the same page scrolling at different speeds, which makes very lively designs possible. The scrolling does not have to be vertical here either, but usually works even better as a horizontal variant. This article will not go into detail about parallax scrolling.
Advantages of Long Scrolling
I have already described one of the main advantages of long scrolling above. Long scrolling is the natural form of scrolling on mobile devices. The established gestures, which do not require any special training, allow this function to be used intuitively and naturally. In addition, there is a quasi-automatism in responsive web design, which can be summarized with "the smaller the screen, the longer it has to be scrolled".
Another advantage results directly from the fact that social networks also work with long scrolling. We're all just used to it now and don't really expect anything else. It was completely different ten to fifteen years ago. The old insights into “above the fold” date from this time.
The greatest benefit of long scrolling from a designer's perspective, however, is that it greatly increases the potential for visual storytelling. It is clear that a longer narrative thread, which can also be run through homogeneously, also allows for longer stories.
One of the most unusual examples of visual storytelling using long scrolling is probably The Boat. (Screenshot: t3n)
Disadvantages of Long Scrolling
Where there are advantages, there are also disadvantages. We will learn later how to deal with the identified disadvantages. Many can be eliminated. But get ready for work.
Search engine optimization is becoming more difficult
Anyone who has been working in the vastness of the web for a long time will probably think directly of the topic of SEO. And indeed, there are typical problems that a one-pager inevitably brings with its long scrolling and its approach of showing everything on one page.
The issue of on-page SEO is clearly affected here. We have now all learned that we have to optimize our pages for keywords that have to be defined beforehand in order to achieve an optimal ranking. And now you suddenly have only one on a OnePager, where you would have had several on a page structure with several subpages. A title, a description and actually just a first-class heading. However, since you typically deal with several topics on a one-pager, optimization becomes difficult.
Relevance is supposed to be the focus according to which Google evaluates and ranks a page. How relevant can your page be to a specific topic if it covers many different topics within the same page?
You cannot typically offer the internal link structure, also welcome by Google and Co., with a one-pager. This also makes it difficult to continuously acquire external links, i.e. classic link building.
JavaScript used, for example for lazy loading or other loosening, can block the crawler so that it does not index your OnePager completely. Without indexing, however, your content cannot be found either.
Another SEO disadvantage can be that your page may take a long time to load. Performance has also been a ranking factor for some time now.
Long scrolling with all the tricks: navigating responsibly. (Screenshot: t3n)
User guidance becomes more difficult
Typically nowadays we find navigation elements either in the header or in the footer or in both elements. A design based on the concept of "above the fold" leaves both the header and the footer always visible or at least only marginally impairs their visibility.
If we rely on long scrolling, the header inevitably disappears from view very quickly, while the footer only appears at the very end of the scroll. In between, the reader is in God's hands - he has no means of navigation apart from the option to scroll up or down. With infinite scrolling we never even see the footer again...
If several topics are actually processed within a single page and can only be experienced by scrolling, your readers will quickly find it difficult to recognize where they are and where one topic ends and a new one begins. The problem is compounded when we realize that today's reader scans rather than actually reads.
The boredom caused by long scrolling should not be underestimated. Nobody tends to travel long distances. I bet you used to ask your parents on the way to vacation after the first five kilometers "Mom, are we there soon?".
The Waven fashion label works with a segmented long scroller that can only be scrolled page by page, using the down arrow shown in the middle below. Can you do. (Screenshot: t3n)
How to use long scrolling correctly
Now that the disadvantages are obvious, you will now learn how to deal with them. Because the good news is that almost every disadvantage can be eliminated with a little extra work.
SEO in long scrolling
With regard to the SEO topic, it is important to differentiate further. Long scrolling cannot always be translated with a one-pager. If you use long scrolling mainly for visual storytelling, then the disadvantages mentioned above are unlikely to arise in the first place. After all, you are telling a homogeneous story on a canvas that is just as long as it needs to be for this purpose. This is actually ideal from an SEO point of view.
If, on the other hand, there are actually different topics on your long-scrolling route or if it is a one-pager, things get interesting. The keyword is segmentation.
We divide our content into segments. This can be done using DIV IDs, the name of which you choose is best congruent with the anchor link. Each segment can be jumped to from the top of the page. You use anchor links for this, because anchor links are SEO signals and are evaluated by the search engines. Another advantage of anchor links is that they can also be accessed directly from outside, which supports link building.
We give each segment a headline of the first order, i.e. an H1 - many of you are probably reluctant to do this, because the rule is to use as few H1s as possible, ideally only one per page, we can do that but be reassured by the former Google man in charge of this topic, Matt Cutts, who says:
Recommended editorial content
Here you will find external content from YouTube videos that complement our editorial content on t3n.de. By clicking on "Show content" you agree that we may show you content from YouTube video on our pages now and in the future. Personal data can be transmitted to third-party platforms.
Note on data protection
Sorry, something went wrong...
This is usually where you'll find external content from YouTube Video, but we weren't able to retrieve your consent settings. Reload the page or manually adjust your consent settings.
Now when it comes to relevancy, it's actually hard to rank properly if you put too many different topics on one page. However, if it is a page with a generic term, which is then divided into smaller, more digestible chunks in the further course of the page in order to deal with it exhaustively, a good ranking is at least possible.
In this case, it is important to prepare the content as reader-friendly as possible and to try to empathize with the target group as best as possible. How is the average reader likely to approach the topic? If you manage to work on the topic in the best possible way, there is a high probability that this will be rewarded by the search engines.
User guidance in long scrolling
There are a number of disadvantages in user guidance that have already been identified above. How to deal with it:
Navigation
The disappearance of headers and footers is not a god-given fact. It is technically relatively uncomplicated to make the header sticky, i.e. to make it move with the scrolling. In this way, the header would remain visible at all times, your users would not have to scroll all the way to the top to get navigation options again.
Recently, the sticky header has become more common in a mixed form. The header initially remains visibly sticky, but then disappears completely as you scroll further, leaving more space for consuming the actual content, especially on mobile devices. If the user then tries to scroll back up, the header immediately appears at the top of the screen as if it had never been gone.
We also use a sticky header here at t3n. (Screenshot: t3n)
The footer can also be created sticky. In most cases, however, this is likely to be undesirable. In the same way as with the header, the footer can of course also be made to disappear and appear automatically. The question is whether that is necessary. If the information architecture is designed accordingly, it should be relatively unproblematic to completely do without a footer that appears before the end of the page.
In general, visualizing the ability to scroll up is also a good idea. An unmistakable back to top pictogram should be present on every long scrolling page.
At this point I would like to take up the topic of segmentation again. We can reflect this segmentation accordingly in the design. In addition to the main navigation, it would be possible to connect a secondary navigation attached to the side, which links directly to the individual segments and remains sticky without significantly affecting the limited screen space. Apple demonstrated this years ago.
On the product page for the design framework Slides you will find this side navigation, which leads to the individual page segments. (Screenshot: t3n)
It is good if the number of navigation points reflects the number of segments and if not too many segments have to be visualized in this way. Ultimately, the goal is clarity. So we come to an almost natural limitation of our side length. It is also recommended if the pictograms indicate which segment you are currently in. This gives the reader the opportunity to classify himself locally and to get an idea of the overall scope and his respective position.
It will be even easier for your readers if you separate the individual segments from each other graphically. It's nice when a segment is always as long as the visible area of the browser. This creates the impression of a page-oriented display, which in turn serves to provide an overview.
At the same time, creative variation ensures that boredom is avoided. In addition to the varied design, boredom can also be avoided with parallax elements or functional animations. Functional animations support the UX of a page, typical functional animations provide feedback. For example, content could unfold visibly when scrolling or move into the viewport in some other way, images could be arranged in a gallery and much more.
If we use Lazy Load, it is important to visualize the loading process, because the network connection will not always be fast enough to avoid a noticeable delay
Conclusion: Long scrolling is practical if we are willing to put in more work
One thing has certainly become clear over the course of this post: pages with a long-scrolling approach tend to mean more work than classic design concepts. This applies at least when long scrolling is accompanied by the abandonment of multi-page designs.
But if the long scroller is just one page among many, the advantages outweigh the disadvantages, especially with regard to visual storytelling. Long stories are better told on long pages and not in fragments. This is where parallax effects and other animations can further perfect the storytelling.
By the way, there is a framework from Designmodo that you can use to implement long scrolling in the modular system. Check out the product website. Also built using the framework called Slides, it demonstrates some of the best practices mentioned here.
More resources on the topic
The Pros and Cons of Long Scrolling in Web Design | Speckydoy Design Magazine
Everything you need to know about the long-scrolling trend | Web Designer Depot
Infinite Scrolling Best Practices | UX PlaFnet
10 Great Single Long-Page Website Designs | aptdesign
Scrolling in Web Design: How Much Is Too Much? | Speckyboy Design Magazine
Best Practices for Long Scrolling | UX Planet
Functional Animation In UX Design: What Makes a Good Transition? | Babech.biz
SEO Tricks for One Page Websites | Awwwards
Single Page Websites & SEO | Search engine country
You might also be interested in this
Pocket Facebook Twitter WhatsApp Email
Dieter Petereit
Technical journalist since the nineties | dr Web a.D.
Related topics
SEO web design Apple office equipment Facebook
Don't miss anything anymore: Our newsletter
Please enter a valid email address.
Choose your t3n newsletter
+ Select more
Please select at least one newsletter.
Sorry, there was a problem submitting the form. Please try again.
Note on the newsletter & data protection
Almost done!
Please click on the link in the confirmation email to complete your registration.
