Was sind Below the Fold und Above the Fold?
Bei Below the Fold (oder “Under the Fold”) und Above the Fold handelt es sich um Elemente auf einer Webseite. Als Werbebanner, Anzeigen oder Links sind sie oftmals Teil des AdSense oder Affiliate Marketings. Ausschlaggebend für die Definition ist die unmittelbare Sichtbarkeit des Bereichs. Je nachdem, ob der User scrollen muss, um die Inhalte zu sehen, gelten diese Teile der Seite als Above the Fold oder Below the Fold.
Woher kommen die Begriffe Above the Fold und Below the Fold?
Der Begriff Above the Fold bezeichnet im Webdesign den Bereich einer Seite, den der User bei seinem Besuch sieht, ohne nach unten zu scrollen. Alles, was unter dieser imaginären Linie liegt, gilt als Below the Fold. Gemeint sind somit Inhalte, welcher der Nutzer nur per Scrollen betrachten kann.
Die Bezeichnung “Fold” stammt ursprünglich aus dem Druckereiwesen und versinnbildlicht die Falzlinie, welche beim Knicken einer Zeitung entsteht. Metaphorisch auf Webseiten und deren Design übertragen, nimmt Above the Fold als sinnbildliche Falzlinie eine nicht zu vernachlässigende Relevanz für die Gestaltung einer Webseite und deren Inhalten ein.
Welche Bedeutung hat Below the Fold?
Below the Fold ist aufgrund von verschiedenen Gründen interessant: Webseiten aus dem E-Commerce können hier weitere Produkte, Beiträge oder Social Proof darstellen. Gleiches gilt für redaktionelle Seiten. Im Below the Fold können sie auf ähnliche Artikel oder weiterführende Informationen verlinken. Der Bereich eignet sich optimal, um das Nutzerverhalten auf der Webseite positiv zu beeinflussen. Dabei sind die folgenden Effekte möglich:
- längere Verweildauer
- höhere Klickrate
- bessere Kundenbindung
Warum ist Above the Fold wichtig?
Neue Technologien entfachten die Revolution der Verhaltensweisen, welche den Ort und die Muster der Internetnutzung betreffen. Nutzer greifen verstärkt vom Smartphone oder Tablet aus auf das Internet zu. Die mobile Nutzung verändert die Art und Weise, wie Nutzer im Internet agieren.
Kleinere Bildschirme bedingen ein intensiviertes Scrollen auf Webseiten. Zudem macht sich die mobile Nutzung auch in einer stetig wechselnden Bildschirmansicht bemerkbar. Wechselnde Screens setzt der Nutzer durch das „Wischen“ auf dem Bildschirm in Gang.
Diese veränderten Verhaltensweisen von Internet Usern im Zuge der mobilen Technologien verändern das Design und die Konzeption von Webseiten.
Eine Seite und deren Elemente werden prinzipiell auf Displays in den verschiedensten Größen betrachtet. Damit geht einher, dass die Folds auf ganz unterschiedlichen Positionen der Webseite erscheinen. Der Sichtbarkeitsbereich des Above the Folds variiert. Die entscheidenden Faktoren, beispielsweise die Bildschirmauflösung oder Seitenvergrößerung, unterscheiden sich unter den Nutzern. Diese Variationen müssen bei der Konzeption des Above the Folds beachtet werden.
Above the Fold – wo gehört welcher Inhalt auf einer Webseite hin?
Es gibt keine festen Regeln, wenn es um die ideale Platzierung von Elementen auf einer Seite geht. Allenfalls lässt sich hierbei mit Best Practices für die Gestaltung des Above the Fold-Bereichs arbeiten. Diese Empfehlungen sind vor dem Hintergrund des differenzierten Nutzerverhaltens, variierenden Smartphone-Dimensionen, Bildschirmauflösungen und Bildschirmgrößen nicht in Stein gemeißelt.
Generell gilt: Der wichtigste Content erscheint am Anfang der Webseite. Der unmittelbar sichtbare Teil einer Seite darf dabei jedoch nicht von Elementen mit zu vielen Informationen überladen werden.
Wie lässt sich im Above the Fold-Bereich das Nutzerverhalten steuern?
Es bietet sich an, im Above the Fold die Aufmerksamkeit des Besuchers gezielt anzuregen. Hierzu eignen sich Hinweise und Anreize, die dem User animieren, zu scrollen und den Rest der Seite, also den Below the Fold, zu beachtraten.
Um die übersichtliche Navigation und Präsentation zu ermöglichen, eignen sich Spalten im Above the Fold optimal. Versetze Spalten signalisieren dem User, dass es weitere Informationen gibt. Der Textabschnitt wird dabei vom Fold bewusst unterbrochen. Die vereinfachte Navigation kann außerdem über vorgezeichnete Wege, die durch die Falzlinie geteilt sind, erwirkt werden.
Wie lassen sich Webseiten modern gestalten?
Verschiedene Tools unterstützen die Entwicklung eines greifbaren Layouts. Visuelle Tests der Webseite sind in jedem Fall unabdingbar. Ein ansprechendes Design, das den unterschiedlichen Nutzungsdimensionen gerecht wird, ist bedeutend für ein gutes Nutzererlebnis auf der Seite.
Minimalistische und elegante Aufmachungen optimieren das Nutzererleben – auch im Bereich der mobilen Internetnutzung, deren Bedeutung wächst. Mit Hilfe einer wirkungsvollen Gestaltung des Above the Fold-Bereichs erhält der User die Befugnis, die Inhalte und Elemente einer Webseite selbst zu entdecken. Diese Entscheidungsfreiheit trifft den Nerv des modernen Nutzungsverhaltens: Denn Content wird verstärkt On demand abgerufen.
Wie wirkt sich Above the Fold auf die SEO aus?
Google straft mit dem Page Layout Algorithm Update (Ads Above The Fold) vom 19.01.2012 Webseiten ab, die einen massiven Einsatz von Werbung im Above the Fold-Bereich betreiben. Aus der Perspektive des Nutzers bieten derartige Webseiten ein geringes Nutzererlebnis. Denn der User muss sich zunächst durch Anzeigen durchkämpfen, um den den Inhalt betrachten zu können.
Im Zuge dieses Updates ist es für ein gutes Ranking ratsam, das Verhältnis von Content und Werbebannern zu balancieren. Der Inhalt der Seite darf nicht unter einer übermäßigen Ausrichtung auf Werbung leiden. Die OnPage-Optimierung betrifft in diesem Fall nicht nur den technischen Aspekt einer Webseite, sondern auch den Faktor Design und die Nutzerfreundlichkeit.
Erfahrungsgemäß erfährt der obere Teil einer Webseite die erste und stärkste Aufmerksamkeit eines Nutzers. Daher ist dieser Bereich ein beliebter Platz für Werbebanner. Übermäßige Werbung zieht ein schlechteres Ranking und und einen verringerten Traffic nach sich.
Auch für mobile Endgeräte sind Webseiten mit massiver Werbung Above the Fold problematisch. Denn ohne Einsatz von Lösungen, beispielsweise einem Responsive Design, ist der Inhalt der Seite für den Nutzer schwer erkenntlich.
Was sind die Bestandteile von Above the Fold in den CSS?
Bei den CSS (Cascading Style Sheets) handelt es sich um gestufte Stilvorlagen in Form einer Gestaltungs- und Formatier-Sprache. Diese Sprache bestimmt die Optik von HTML-Dokumenten und nicht deren Inhalt.
Die CSS regeln unter anderem das Design, das im Above the Fold geladen wird. Mögliche Bestandteile sind beispielsweise der Header und das Logo, die primäre Navigation, die Layout-Struktur, die Body-Angabe in CSS, die H1-Überschrift und die Navigation über den Content.
Diese Bereiche der Seiten besitzen jeweils CSS-Angaben, welche für das Laden der Seite essenziell sind. Über Tools lässt sich Critical CSS identifizieren und optimieren.
Die Gestaltung einer Webseite beeinflusst ihre Ladegeschwindigkeit. Die Schnelligkeit des Ladens gilt zudem als einer der Ranking Faktoren von Google. Daher darf die Gestaltung der Seite die Ladegeschwindigkeit nicht benachteiligen.
Gehört der Call-to-Action in den Above the Fold-Bereich?
Die optimale Platzierung des Call-to-Action (CTA) ist umstritten. Es hat sich der Mythos etabliert, der CTA müsse auf der Webseite sofort sichtbar sein.
Der CTA sollte prinzipiell dann erscheinen, wenn der Nutzer vom Produkt überzeugt ist und interagieren will.
Relevant sind spezifische Faktoren, die das beworbene Produkt und die Einstellung des Nutzers zu diesem Produkt betreffen:
Sind die Besucher bei ihrem Besuch von der Webseite überzeugt?
Besucher, die mit einer bereits bestehenden Überzeugung für ein Angebot auf die Seite gelangen, reagieren wahrscheinlich auf den CTA. Sie haben ihre Entscheidung damit bereits vor dem Besuch der Webseite getroffen. Somit ist die Platzierung nicht ausschlaggebend.
Sind die Nutzer der Seite unsicher und kennen das Produkt?
Sofern unsichere User ein Vorwissen zum Produkt mitbringen, ist es sinnvoll, den CTA Above the Fold zu platzieren.
Sind Besucher unsicher und ist das Produkt sehr komplex?
Wenn ein Service oder ein Produkt für bereits unentschiedene Nutzer offensichtlich nicht vorteilhaft ist, bedarf es mehr als einer gezielten Platzierung des CTA, um eine Überzeugung zu erwirken. Gefragt ist eine tiefer gehende Erklärung, warum der User dem CTA folgen sollte.
Quellen
Google Webmaster Central Blog: Page layout algorithm improvement. In: http://googlewebmastercentral.blogspot.de/2012/01/page-layout-algorithm-improvement.html.
MOZ: Life Above and Beyond the Fold. In: http://moz.com/blog/life-above-and-beyond-the-fold.
SISTRIX: Google Page Layout Algorithm Update (Ads Above The Fold). In: http://www.sistrix.de/frag-sistrix/google-algorithmus-aenderungen/google-page-layout-algorithm-update-ads-above-the-fold/ .
