Dieter Petereit 2. Mai 2018

Long Scrolling: So geht Seiten-Design heute

Der Vorspann eines jeder Star-Wars-Movies macht es vor. Die Geschichte scrollt in die Unendlichkeit. Die Timelines sozialer Medien funktionieren ähnlich. Wieso sollte es deine Website nicht ebenso tun? Was es beim Einsatz von Long Scrolling zu beachten gibt, erfährst du im folgenden Beitrag.

Scrolling früher und heute

Früher war alles einfacher. Scrolling gab es da auch schon, wir bewegten uns mit der Maus eine Seite hinunter und meistens auch wieder hinauf, klickten im Menü oder über einen Contentlink die nächste Seite an und wiederholten das Spiel. Wobei im damaligen Webdesign noch versucht wurde, das Scrolling insgesamt zu vermeiden.

Heutzutage ist alles komplizierter. Speziell die sozialen Netzwerke haben dazu beigetragen, dass mehr Content auf weniger Seiten untergebracht und dadurch naturgemäß mehr Inhalt pro Seite angezeigt wird.

Das Konzept des „Above the Fold”, für das ich Ende der Neunziger teils tagelang an einzelnen Seiten geschliffen habe, damit auf jeden Fall alle wichtigen Informationen beim initialen Aufruf einer Seite vollständig und ohne Scrollbars rechts und unten sichtbar waren, hat an Bedeutung verloren. Heute ist der Fold, also die untere sichtbare Kante einer Seite nach deren erstem Aufruf, hauptsächlich der Indikator dafür, dass danach noch etwas kommt.

Das „Long Scrolling” dieser Offset-Druckmaschine ist nicht gemeint. Obwohl unsere Designansätze durchaus etwas mit Zeitungen zu tun haben. (Foto: Depositphotos)

Neben den sozialen Medien begünstigen mobile Endgeräte den Trend hin zum Long Scrolling, denn es ist nahezu unmöglich, das frühere Konzept des „Above the Fold” für mobile Geräte zu realisieren. Viel zu klein sind die Screens. Die erforderlichen Kompromisse wären schlicht nicht zu machen.

Smartphones haben Scrolling sozusagen wieder salonfähig gemacht. Auf kleinen Screens ist es weitaus angenehmer, mit dem Finger eine lange Seite zu durchscrollen, als mit spitzen Fingern die Navigation zu bemühen, um von Seite zu Seite zu springen. Die Natürlichkeit der Scroll-Geste erlaubt zudem unterschiedliche Scroll-Geschwindigkeiten. So kennst du es vom gezielten Durchblättern eines Buches. Vorausgesetzt, der Autor hat optische Anker zur Orientierung gesetzt, lässt sich ein Buch sehr schnell nach relevanten Informationen durchscannen.

Der Trend hin zum Scrolling hat in den vergangenen Jahren die so genannten OnePager hervorgebracht. Dabei handelt es sich um Websites, die nur aus einer einzelnen Seite bestehen und alle relevanten Informationen strukturiert über diese Seite verteilen. Dabei können OnePager optisch durchaus den Eindruck erwecken, sie würden aus mehreren Seiten bestehen.

Die verschiedenen Arten des Scrolling

Scrolling ist mittlerweile keine triviale, aus der normativen Kraft des Faktischen entstehende Tätigkeit mehr. Vielmehr können wir uns als Designer bewusst entscheiden, welche Art von Scrolling wir zum Einsatz bringen.

Long Scrolling wird unterschiedlich interpretiert. Deshalb will ich erstmal den Begriff in Abgrenzung zu anderen Termini definieren.

Long Scrolling in seiner Urform bezeichnet schlicht eine lange Seite mit Content, die homogen aufgebaut ist und von oben nach unten durchscrollt wird. So betrachtet können wir Long Scrolling durchaus als Oberbegriff verstehen.

Das Fixed Long Scrolling ist eine Variante des Long Scrolling, bei der einzelne statische Elemente nicht mitscrollen. Es verbindet den Vorteil der früheren seitenorientierten Gestaltung mit dem des seitenlosen Scrolling.

Infinite Scrolling wiederum bezeichnet eine Form des Long Scrolling, bei der am Ende des Viewport, also des sichtbaren Browserfensters, immer wieder neuer Content nachgeladen wird, so dass die Seite quasi unendlich, infinit erscheint. So funktionieren alle sozialen Netzwerke. Inwieweit das die richtige Wahl für normale Websites ist, bedarf gründlicher Abwägung.

Zu guter Letzt will ich noch das Parallax Scrolling erwähnen, das allerdings keine Unterform des Long Scrolling darstellt. Beim Parallax Scrolling geht es vielmehr um den Aspekt des Storytelling durch natürlich wirkende Animation. Durch unterschiedlich schnell scrollende Teilbereiche der gleichen Seite wird die Illusion von Bewegung erzeugt. Hierdurch werden sehr lebendige Gestaltungen möglich. Das Scrolling muss hier auch nicht vertikal sein, sondern funktioniert meist sogar besser als horizontale Variante. Um das Parallax Scrolling wird es in diesem Beitrag nicht im Einzelnen gehen.

Vorteile des Long Scrolling

Einen der wesentlichen Vorteile des Long Scrolling habe ich weiter oben schon beschrieben. Long Scrolling ist die natürliche Form des Scrollens auf mobilen Geräten. Die etablierten Gesten, die keiner speziellen Schulung bedürfen, erlauben eine intuitive und selbstverständliche Nutzung dieser Funktion. Zudem besteht quasi ein Automatismus im responsiven Webdesign, der sich mit „je kleiner der Bildschirm, desto länger muss gescrollt werden” zusammenfassen lässt.

Ein weiterer Vorteil ergibt sich direkt aus der Tatsache, dass soziale Netzwerke ebenfalls mit Long Scrolling arbeiten. Wir alle sind es inzwischen einfach gewohnt und erwarten im Grunde nichts anderes mehr. Das war vor zehn bis fünfzehn Jahren noch völlig anders. Aus dieser Zeit stammen die alten Erkenntnisse zum „Above the Fold”.

Der aus Designersicht größte Vorteil des Long Scrolling besteht indes darin, dass sich dadurch das Potenzial für Visual Storytelling deutlich erhöht. Es ist ja klar, dass ein längerer Erzählstrang, der noch dazu homogen durchlaufen werden kann, auch längere Geschichten erlaubt.

Eines der ungewöhnlichsten Beispiele für Visual Storytelling mittels Long Scrolling dürfte wohl The Boat sein. (Screenshot: D. Petereit)

Nachteile des Long Scrolling

Wo es Vorteile gibt, gibt es auch Nachteile. Viele lassen sich beseitigen. Mach dich aber auf Arbeit gefasst.

Die Suchmaschinenoptimierung wird schwieriger

Wenn du schon länger als Kreativschaffende(r) in den Weiten des Netzes unterwegs bist, wirst du womöglich direkt an das Thema SEO denken. Und in der Tat gibt es typische Probleme, die ein OnePager mit seinem Long Scrolling und seinem Ansatz, alles auf einer Seite zu zeigen, unweigerlich mit sich bringt.

OnePager erschweren klar die Onpage-SEO. Wir haben ja nun alle inzwischen gelernt, dass wir unsere Seiten für ein optimales Ranking gut auf vorher zu definierende Keywords optimieren müssen. Und nun hast du auf einem OnePager plötzlich nur eines, wo du auf einer Seitenstruktur mit mehreren Unterseiten noch mehrere gehabt hättest. Du hast nur noch einen Title, eine Description und eigentlich auch nur eine Überschrift erster Ordnung. Da du aber typischerweise auch auf einem OnePager mehrere Themen behandelst, wird die Optimierung schwer.

Relevanz soll eigentlich der Schwerpunkt sein, nach dem Google eine Seite bewertet und rankt. Wie relevant kann deine Seite für ein bestimmtes Thema sein, wenn sie viele unterschiedliche Themen innerhalb der gleichen Seite abdeckt?

Eine komplexere interne Linkstruktur, ebenfalls gern gesehen von Google und Co., kannst du mit einem OnePager typischerweise nicht bieten. Das macht es zusätzlich schwer, kontinuierlich externe Links zu akquirieren, also das klassische Linkbuilding zu betreiben.

Eingesetztes JavaScript, etwa für Lazy Loading oder andere Auflockerungen, kann den Crawler blockieren, sodass er deinen OnePager gar nicht vollständig indexiert. Ohne Indexierung indes kann dein Inhalt auch nicht gefunden werden.

Ein weiterer SEO-Nachteil kann dadurch entstehen, dass deine Seite tendenziell länger benötigt, um zu laden. Performance ist immerhin seit geraumer Zeit ein Rankingfaktor.

Long Scrolling mit allen Schikanen: Navigating Responsibly. Beachte die Navigationshelfer an der rechten Seite. (Screenshot: D. Petereit)

Die Benutzerführung wird schwieriger

Typischerweise finden wir heutzutage Navigationselemente entweder im Header oder im Footer oder auch in beiden Elementen. Ein Design, das sich am Konzept des „Above the Fold” orientiert, belässt sowohl den Header als auch den Footer stets sichtbar oder beeinträchtigt deren Visibilität jedenfalls nur marginal.

Wenn wir auf Long Scrolling setzen, verschwindet der Header zwangsläufig sehr schnell aus dem Blickfeld, während der Footer erst ganz am Ende der Seite erscheint. Zwischendrin ist der Leser in Gottes Hand – er hat keine Möglichkeit der Navigation, abgesehen von der Option, nach unten oder oben zu scrollen. Beim Infinite Scrolling sehen wir den Footer sogar nie.

Wenn tatsächlich mehrere Themen innerhalb einer einzelnen Seite abgearbeitet werden und nur durch Scrolling erfahrbar sind, wird es deinen Lesern schnell schwer fallen, zu erkennen, wo sie sich gerade befinden und wo ein Thema endet und ein neues beginnt. Das Problem verschärft sich noch, wenn wir bedenken, dass der heutige Leser eher absatzweise scannt als wortweise liest.

Nicht zu unterschätzen ist auch die Langeweile, die durch langes Scrollen entsteht. Weite Wege mag halt tendenziell keiner zurücklegen. Ich wette, auch ihr habt früher eure Eltern auf der Fahrt in den Urlaub nach den ersten fünf Kilometern gefragt „Mama, sind wir bald da?”.

Fitbit, der Anbieter meines täglichen Begleiters, der Ionic, arbeitet mit einem segmentierten Long Scroller, der sich ausschließlich seitenweise scrollen lässt, und zwar über den unten mittig gezeigten Pfeil nach unten. Maus und Tastatur funktioniert natürlich auch. Kann man machen. (Screenshot: D. Petereit)

So setzt du Long Scrolling richtig ein

Nachdem die Nachteile klar auf der Hand liegen, schauen wir genauer hin und entwickeln Strategien, damit umzugehen. Denn die gute Nachricht ist, dass du nahezu jeden Nachteil mit etwas zusätzlicher Arbeit beseitigen kannst.

SEO im Long Scrolling

Hinsichtlich des SEO-Themas gilt es, noch weiter zu differenzieren. Nicht immer wird Long Scrolling auch mit einem OnePager zu übersetzen sein. Verwendest du Long Scrolling hauptsächlich für Visual Storytelling, dann entstehen die weiter oben genannten Nachteile mit großer Wahrscheinlichkeit gar nicht erst. Immerhin erzählst du hier eine homogene Geschichte auf einem Canvas, der genauso lang ist, wie er zu diesem Zweck sein muss. Das ist eigentlich ideal unter SEO-Gesichtspunkten.

Finden sich auf deiner Long-Scrolling-Strecke hingegen tatsächlich verschiedene Themen oder handelt es sich doch um einen OnePager, wird es interessant. Das Stichwort heißt Segmentierung.

Wir unterteilen unseren Inhalt in Segmente. Das kann über DIV-IDs geschehen, deren Bezeichnung du am besten deckungsgleich zum Ankerlink wählst. Jedes Segment kann vom Seitenanfang aus angesprungen werden. Dafür verwendest du Ankerlinks, denn Ankerlinks sind SEO-Signale und werden von den Suchmaschinen ausgewertet. Ein weiterer Vorteil der Anker-Links besteht darin, dass sie auch von extern direkt erreichbar sind, was das Linkbuilding unterstützt.

Jedes Segment statten wir mit einer Überschrift erster Ordnung, also einem H1 aus – das widerstrebt dir möglicherweise, weil eigentlich die Regel gilt, so wenige H1 wie möglich, am besten nur eine pro Seite, zu setzen. Lass dich vom ehemaligen Google-Verantwortlichen für dieses Thema, Matt Cutts, beruhigen:

Klicke auf den unteren Button, um den Inhalt von YouTube nachzuladen.
Inhalt laden

PGlmcmFtZSB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI4MSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9HSW41cUpLVThWTT9mZWF0dXJlPW9lbWJlZCZ3bW9kZT1vcGFxdWUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

Was nun die Relevanz betrifft, ist es tatsächlich schwer, ein vernünftiges Ranking zu erreichen, wenn du zu viele unterschiedliche Themen auf einer Seite unterbringst. Handelt es sich aber um eine Seite mit einem Oberbegriff, der im weiteren Seitenverlauf dann in kleinere, verdaulichere Häppchen unterteilt wird, um ihn erschöpfend zu behandeln, ist ein gutes Ranking wenigstens möglich. **

In diesem Falle kommt es darauf an, den Inhalt so lesefreundlich wie möglich aufzubereiten und zu versuchen, sich bestmöglich in die Zielgruppe hineinzuversetzen. Wie wird der durchschnittliche Leser voraussichtlich an das Thema herangehen? Wenn es gelingt, ein Thema bestmöglich zu bearbeiten, ist die Wahrscheinlichkeit groß, dass dies seitens der Suchmaschinen honoriert wird.

Benutzerführung im Long Scrolling

In der Benutzerführung entstehen etliche Nachteile, die weiter oben bereits identifiziert wurden.

Das Verschwinden von Header und Footer ist kein unvermeidbarer Fakt. Es ist relativ unkompliziert technisch möglich, den Header sticky, also beim Scrollen mitwandernd, zu gestalten. So bliebe der Header ständig sichtbar, eure Nutzer müssten nicht erst ganz nach oben scrollen, um wieder Navigationsmöglichkeiten zu erhalten.

In jüngerer Zeit setzt sich der Sticky-Header eher in einer Mischform durch. Der Header bleibt zunächst sichtbar sticky, verschwindet dann aber beim weiteren Scrollen vollständig, so dass besonders auf mobilen Geräten mehr Platz für den Konsum des eigentlichen Inhalts bleibt. Versucht der Nutzer dann, wieder nach oben zu scrollen, erscheint der Header sofort am oberen Screen-Rand, als wäre er nie weg gewesen.

Zu bedenken ist dabei zudem, ob du überhaupt einen ständig oder wenigstens schnell sichtbaren Header benötigst. Was bietet dein Header wichtiges, das du ihn unbedingt im Zugriff des Nutzers halten möchtest? Hier bei Dr. Web haben wir den Sticky Header wieder beseitigt, denn uns ist aufgefallen, dass unsere Leserinnen und Leser ihn nicht brauchen. Klar ist es unter dem Gesichtspunkt der Eitelkeit schön, das eigene Logo permanent im Blick des Users zu lassen. Benutzt haben unsere Nutzerinnen und Nutzern weder den Sticky, noch den Header überhaupt. Zugriffe erfolgen aus den sozialen Medien oder aus den Suchmaschinen. Navigation halten wir quasi hauptsächlich für Google vor ;-)

Auch der Footer lässt sich sticky anlegen. In den meisten Fällen dürfte das aber eher unerwünscht sein. In gleicher Weise wie beim Header lässt sich natürlich auch der Footer zum Verschwinden und automatischen Auftauchen bringen. Die Frage ist, ob das erforderlich ist. Bei entsprechender Konzeption der Informationsarchitektur dürfte es relativ unproblematisch sein, auf einen Footer, der sich vor dem Seitenende zeigt, komplett zu verzichten.

Generell ist auch die Visualisierung der Möglichkeit, nach oben zu scrollen, eine gute Idee. Ein unmissverständliches Piktogramm für ein „Back to Top”, also zurück zum Seitenbeginn, sollte auf jeder Long-Scrolling-Seite vorhanden sein. WordPress-Seitenbetreiber sollten sich diesbezüglich einmal das beliebte Plugin WPFront Scroll Top ansehen, das hier bei Dr. Web ebenfalls im Einsatz ist.

Ich möchte an dieser Stelle das Thema Segmentierung nochmal aufgreifen. Diese Segmentierung können wir nämlich im Design entsprechend reflektieren. Es wäre möglich, neben der Hauptnavigation etwa eine seitlich angebrachte Nebennavigation anzubinden, die direkt zu den einzelnen Segmenten verlinkt und dabei sticky bleibt, ohne den knappen Screen-Platz nennenswert zu beeinträchtigen. Apple hat das vor Jahren mal vorgeführt.

Das Design-Framework Slides enthält Templates, die diese seitliche Navigation einsetzen, die zu den einzelnen Seitensegmenten führt. (Screenshot: D. Petereit)

Dabei ist es günstig, wenn die Zahl der Navigationspunkte zum einen die Zahl der Segmente widerspiegelt und zum anderen nicht zu viele Segmente auf diese Weise visualisiert werden müssen. Das Ziel ist schließlich Übersichtlichkeit. So kommen wir zu einer geradezu natürlichen Begrenzung unserer Seitenlänge.

Ebenfalls empfehlenswert ist es, wenn die Piktogramme dem Leser anzeigen, in welchem Segment er/sie sich gerade befindet. Das sorgt für die Möglichkeit der Standortbestimmung und vermittelt eine Ahnung vom Gesamtumfang der besuchten Seite.

Noch einfacher wird es für deine Leser, wenn du die einzelnen Segmente grafisch voneinander abgrenzt. Schön ist es, wenn ein Segment stets so lang wie der sichtbare Bereich des Browsers ist. So entsteht der Eindruck einer seitenorientierten Darstellung, was wiederum der Übersicht dient.

Gleichzeitig sorgt gestalterische Variation für das Vermeiden von Langeweile. Neben der variantenreichen Gestaltung lässt sich Langeweile durch parallaxe Elemente oder funktionale Animationen vermeiden. Funktionale Animationen unterstützen die UX einer Seite, typische funktionale Animationen geben Feedback. So könnte Content sich beim Scrollen etwa sichtbar entfalten oder auf sonstige Weise in den Viewport bewegen, Bilder sich zu einer Galerie arrangieren und vieles mehr.

Setzen wir Lazy Load ein, ist es wichtig, den Ladevorgang zu visualisieren, denn nicht immer wird die Netzverbindung schnell genug sein, um eine spürbare Verzögerung zu vermeiden. Meine ganz persönliche Empfehlung allerdings lautet, auf Lazy Load ganz zu verzichten. Selbst bei medienintensiven Seiten, bei denen das Nachladen noch am ehesten Sinn ergeben könnte, erfolgt meiner Erfahrung nach das Nachladen immer einen Ticken zu spät. So entsteht das Gefühl einer langsam ladenden Seite, was zum Eindruck einer nicht professionellen Gestaltung beiträgt.

Fazit: Long Scrolling ist praxistauglich, aber verursacht Mehrarbeit

Eines ist im Verlauf dieses Beitrags sicherlich deutlich geworden: Seiten mit einem Long-Scrolling-Ansatz bedeuten tendenziell mehr Arbeit als klassische Designkonzepte. Das gilt zumindest dann, wenn mit dem Long Scrolling auch der Verzicht auf mehrseitige Designs einhergeht.

Falls aber der Long Scroller bloß eine Seite unter mehreren ist, überwiegen die Vorteile, vor allem mit Blick auf Visual Storytelling. Lange Geschichten lassen sich nun mal besser auf langen Seiten und nicht gestückelt erzählen. Hier können dann parallaxe Effekte und andere Animationen das Storytelling weiter perfektionieren.

Es gibt übrigens ein Framework aus dem Hause Designmodo, mit dessen Hilfe du Long Scrolling im Baukasten-System realisieren kannst. Schau dir die Produkt-Website an. Sie wurde ebenfalls mit dem Framework, das auf den Namen Slides hört, erstellt und zeigt einige der hier erwähnten Best Practices. Keine Sorge, das ist keine Schleichwerbung, sondern lediglich der Hinweis auf ein gutes Beispiel.

Weitere Quellen zum Thema

(Bildnachweis Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

7 Kommentare

  1. Diese Endlosseiten bieten starke Möglichkeiten für die Suchmaschinenoptimierung. Wer zweifelt, sollte es einfach mal ausprobieren.

  2. Sehr interessanter Artikel !! Im Rahmen unseres Studiums sind wir gerade dabei, eine SEO Optimierung durchzuführen. (http://mannbronner-logistikinformatik-hhn.azazilla.com/) Wie auch im Impressum erwähnt, handelt es sich hierbei nur um eine Seite zu Lehrzwecken. Wir würden uns aber trotzdem unheimlich freuen, wenn ihr vorbeischauen würdet, uns verlinken würdet oder auch Hilfestellungen geben könnt, was wir noch besser machen können.

    LG

  3. Ich kann gar nicht in Worte fassen, wie mich dieses Long Scrolling nervt! Der Trend ist wie so oft nur selbsternannt und jeder Depp quatscht und macht es sinnfrei nach. Ganz besonders schlimm, wenn die Damen und Herrn Pseudodesigner, Links wie Impresum, Hilfe und ähnliches, in die nie zu erreichende Fußnote packen.

  4. hallihallo _ deswegen hab ich sogar auf navigation und logo verzichtet! har har http://www.leifswork.at und seo? ach ich werd trotzdem irgendwie gefunden! dafür machts spass, jede position anders anzuordnen! no grid no cry!!!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück