CATEGORY

Digital Marketing Kickoff 2016

Es gibt kein Above the Fold

Landing Page Design: Es gibt kein Above the Fold
Ich weiß, warum du hier bist, Neo. Ich weiß, was du bisher gemacht hast … warum du nicht schläfst, alleine lebst, Nacht für Nacht vor deinem Computer sitzt. Screenshot: The Matrix, WarnerBors.

Du suchst etwas.

Ich weiß es, weil ich früher auch danach gesucht habe.

Doch es gibt Fragen, auf die es keine einfachen Antworten gibt. Eine dieser Fragen hat dich hierher geführt:

Wo endet “Above the Fold”?

Die Antwort ist genauso schwierig wie sich die Fortsetzungen der Matrix anzuschauen. Aber deswegen sind wir hier. Wir beantworten die schwierigen Fragen.

Die Antwort lautet:

Es gibt kein Above the Fold.

Dies ist deine letzte Chance. Danach gibt es keinen Weg zurück. Wenn du diese Seite verlässt – endet die Geschichte, du wachst in deinem Bett auf und glaubst, was immer du glauben möchtest. Wenn du weiterliest – bleibst du im Wunderland und ich zeige dir, wohin das Kaninchenloch führt.

Growth Hacking Webinar mit Henning Heinrich
Schon angemeldet? Eine Einführung ins Growth Hacking mit Henning Heinrich.

Was ist “Above the Fold”?

In der früheren Zeit, bevor die Maschinen die Kontrolle übernahmen, erhielten die Menschen ihre Neuigkeiten aus etwas, was man Zeitung nannte. Vielleicht hast du so etwas schon in alten Filmen gesehen. Zeitungen wurden im sogenannten Großformat in etwa 60 cm Länge auf Papier gedruckt. Um Zeitungen am Kiosk platzsparend aushängen zu können, wurden sie in der Mitte gefaltet.

Der Begriff wurde später von Web-Designern übernommen. Jetzt bezieht sich Above the Fold (wörtlich “Oberhalb der Falte”) auf jeglichen Teil einer Webseite oder Landing Page, die du ohne scrollen sehen kannst.

The Matrix: Resolutionen

Es gibt keinen Above the Fold. Nicht so, wie es ihn einmal gab.

Designer diskutierten früher darüber, ob man für 800×600 oder 1024×768 designen sollte. Above the Fold war eine statische Dimension, wie eine Zeitung.

Morpheus und Neo: Es gibt kein Above the Fold
“Es gibt noch eine andere Wahrheit: Es gibt kein Above the Fold” The Matrix, Warner Bros.

Aber die Dinge haben sich verändert. Chris Goward von WiderFunnel hat uns einen Screenshot geschickt, der die unterschiedlichen Bildschirmgrößen, die seine Webseite besuchen, anzeigt.

Above the Fold: Unterschiedliche Auflösungen von Bildschirmen
Wider Funnel: Bildschirmauflösungen der Webseiten-Besucher.

Deswegen gibt es keinen Above the Fold. Menschen begeben sich heutzutage mit so vielen unterschiedlichen Geräten und so vielen unterschiedlichen Bildschirmgrößen ins Netz, dass man sich stark beim Erstellen von Landing Page-Erfahrungen, die erfolgreich und eindrucksvoll sein sollen, einschränken würde, wenn man nur für eine Größe bauen würde.

The Matrix: Ich sehe den Code gar nicht
“Ich sehe den Code gar nicht mehr…ich sehe nur iPads, Smartphones, Phablets…” Screenshot: The Matrix, Warner Bros.

Above the Fold kann nicht mehr durch eine vorgegebene Anzahl von Pixeln definiert werden – Above the Fold wird vom Gerät, das zum Besuch der Seite verwendet wird, definiert.

Reagiere mit responsivem Design

Viele Landing Pages stecken noch immer in der Matrix fest, sind Gefangene eines Musters aus der Vergangenheit, das nur für die Suchmaschinen-Overlords existieren.

Mit anderen Worten: Die Menschen optimieren ihre Landing Pages noch immer nicht für Mobile Geräte.

Die einzige Möglichkeit zu reagieren, die einzige Möglichkeit, sich von einer Konstruktion freizumachen, die deine Landing Page davon abhält, die Menschen zum Konvertieren zu bringen, lautet responsives Design.

Hier siehst du eine responsive Seite von GigSalad. Auf meinem 27-Zoll-Monitor sieht sie so aus:

Desktop above the fold
Anklicken, um das Bild zu vergrößern.

Alles, was ich über ihr Angebot wissen muss, befindet sich hier vor mir. Sie bieten mir alles, was ich benötige, um eine Entscheidung treffen zu können – den gesamten Kontext, um zu verstehen, worum es bei ihrem Produkt geht und warum ich es benutzen würde.

Zwischen dieser Größe und einem Smartphone gibt es mehrere verschiedene Breakpoints, aber bis du es bis 1136×640 geschafft hast (der Bildschirmgröße eines iPhone 5), kannst du sehen, dass sehr viel dieses Kapitals verschwunden ist. Hier sind Klarheit und Präzision maßgeblich.

Smartphone: Above the Fold
GigSalad: Minimalistisches Design für die mobile Landing Page.

In der mobilen Version der Seite, reduziert GigSalad die Seite auf ein absolutes Minimum: Sie behalten ihre Call To Action oben und in der Mitte, sowie ein sehr starkes Nutzenangebot (sie können dir beim Buchen von Events in deiner Nähe helfen).

Du weißt genau, was dich erwartet, wenn du den “Anfangen”-Button anklickst.
Aber die Regel, die Handlungsaufforderung (CTA) Above the Fold auf egal welchem Gerät zu platzieren, ist nicht in Stein gemeißelt. Wie bei allen Regeln, gibt es Ausnahmen.

Wie Chris Goward sagt:

Die Unterhaltung zum Thema Above the Fold hat den Fokus oft auf die Call To Action gelegt. Die meisten Menschen nahmen an, dass der Button Above the Fold platziert werden muss, um deine Conversion Rate zu maximieren.

Du musst natürlich wie sonst auch, deine unterschiedlichen Konfigurationen testen, um die zu finden, die am besten für deinen Besucher funktioniert.

Eigentlich versuchst du, deine Besucher zur Konvertierung zu motivieren – unabhängig vom Gerät, das sie benutzen. Du kannst sie sofort zum Klicken deiner Handlungsaufforderung animieren, wenn du ihnen die Information, die sie für diese Motivation brauchen, gegeben hast.

[Tweet: “Gib deinen #LandingPage-Besuchern genügend Infos, um CTA-Buttons klicken zu wollen.”]

Befreie dich aus der Above the Fold Matrix

Befreie dich aus der Above the Fold Matrix
“Wenn du bereit bist, musst du den Kugeln nicht mehr ausweichen” Screenshot: The Matrix, Warner Bros.

Du bist der Auserwählte. Du kannst Landing Pages so überarbeiten, dass sie auf jedem Gerät so wie du es willst, angezeigt werden. Du kannst deine Landing-Page-Texte so gestalten, dass sie für dein Publikum relevant sind und deutlich genug, damit sie sie verstehen. Du kannst Above the Fold so umgestalten, dass es für alle Leser unabhängig vom Gerät korrekt angezeigt wird.

Landing Pages sind so ähnlich wie die programmierte Realität im Internet. Sie haben die gleichen grundlegenden Regeln, wie zum Beispiel Klarheit.

Manche können verbogen, andere können gebrochen werden. Verstehst du? Dann überzeuge dein Publikum von deiner CTA und benutze den sehr wertvollen Bereich Above the Fold – egal, wo er sich dein Call To Action Button befindet.

Mit zunehmendem Verständnis für dein Publikum kannst du anpassen und improvisieren und deine Botschaft immer verlockender gestalten.

Versuche ich dir zu erzählen, dass du Kugeln ausweichen kannst? Ich versuche dir zu erklären, dass, wenn du bereit bist, ihnen nicht mehr ausweichen musst.

Über Mark John Hiemstra
Mark John Hiemstra ist Content Strateg, Content Marketer und ein begnadeter Texter. Ursprünglich dem Unbounce Team in Montreal angehörig, hilft Mark inzwischen als Freelancer Unternehmen, ihre Content-Erlebnisse zu optimieren. Verbinde dich mit ihm auf Twitter
» Mehr Blog Posts von

Comments:

  1. Benjamin

    Großartig geschrieben! Und ja, es gibt im b2c Bereich inzwischen sehr häufig nicht mehr “die” meist genutzte Anzeigegröße. Im b2b sehe ich das aber noch oft genug, dass man weniger Stress hat, einen Above the Fold zu definieren und zu optimieren. Und dann baut man zusätzlich ne App. ;)

    (0)
    Reply
    • Christian Kleemann

      Hi Benjamin,

      es freut uns, dass dir der Artikel gefallen hat, Danke dafür.

      Du hast recht, im B2C verschwimmen die Grenzen für „die“ richtige Auflösung zunehmend. Die vielen verschiedenen Geräte und unterschiedlichen Szenarien für Informationszugriffe innerhalb der Customer Journey tragen dann den Rest dazu bei.
      In Deutschland stöbern User häufig über mobile Geräte (wer kennt es nicht ;-), um sich bei Interesse später nochmal am Desktop intensiver mit einer Website zu beschäftigen.
      Hier spielen die Themen Usability, leichter Informationszugang und Nutzerkontrolle eine große Rolle. Wie Mark schon erwähnt hat, viele Pages sind eben noch nicht zu 100% für mobile optimiert. Potenzial ist also noch da.

      Ich merke langsam einen ähnlichen Anstieg ebenfalls im B2B.
      Auch wenn, wie du schon sagtest, es wirklich noch einfacher ist, für B2B einen Above The Fold festzulegen, wird der Markt sich langsamer aber ähnlich entwickeln.
      Zumindest für so manchen Erstkontakt mit einem Unternehmen kann es daher gut sein auch entsprechende mobile Strategien zu fahren.
      Ich denke da zum Beispiel an die Szenarien: Erstkontakt über Social Media, Werbeanzeigen, Kontakt auf Events oder wenn man mit Kollegen etc. spricht und sich anschließend mal kurz über ein Unternehmen informieren will.

      Ich würde, in Abhängigkeit von den Use Cases, eine solide mobile Website zumeist einer App vorziehen. Aber Ausnahmen bestätigen ja bekanntlich die Regel :-)

      (0)
      Reply
  2. Marco Janck

    Hallöchen

    Toll geschrieben und dennoch bin ich nicht bei dir. Warum sollte die Auflösung das AtF Thema auflösen ;-)? AtF bleibt AtF. Du zeigst doch selber, dass die SUMAS die Auflösung erkennen. Somit wissen sie auch, was genau du in dein Schaufenster legst. Ich glaube nicht, dass deine Ableitung stimmt. Tschüssieeeee! ;-)

    (0)
    Reply
    • Christian Kleemann

      Hi Marko,

      Danke dir für deinen Kommentar.
      Genau! Suchmaschinen wissen, was ich ins Schaufenster lege (ich finde diese Metapher übrigens vortrefflich :-) nur wie definiere ich das Schaufenster heutzutage?
      Packe ich alles für jedes Gerät rein, oder kontere ich mit cleverem responsivem Design?

      Ich habe oft interessante Diskussionen bezüglich folgender Fragen:
      Welcher Breakpoint?, Wo?, Wie viele Breakpoints?, Für welche Auflösung?, Für welche Geräte? usw.
      Zumeist waren es Developer, die sich total unsicher waren, für wen sie nun optimieren sollen. Ich denke hier es es eigentlich in der Verantwortung der Landing Page-Ersteller, diese Fragen frühzeitig zu klären und daher lautet meine Antwort auch immer als erstes: Was ist euer Ziel und wer ist eure Zielgruppe?
      Das zeigt natürlich auch, dass das Thema nach wie vor interessant ist.
      Die Frage, der Mark in dem Beitrag auf den Grund ging ist für mich eher, welche Elemente packst du am besten „AtF“ rein und wieso es keine 2 Standard-Auflösungen mehr gibt.

      Ich persönlich beachte Dank viel Testing das Thema AtF auch nicht mehr so akribisch wie früher.
      Auch ich war ein Verfechter der These: Niemand will scrollen – „alles“ muss AtF sein. Heute wissen wir, dass diese Einschätzung sowohl für Landing Pages als auch für Websites nicht mehr treffend und mit gestalterischen Mitteln locker zu umgehen ist.

      In einem seiner letzten Beiträge ist Mark daher auch auf ein paar Usability-Grundlagen eingegangen http://unbounce.com/de/landing-page-optimierung/usability-grundlagen/
      Wobei ich diesen nunmehr schon 7 Jahre alten Beitrag von Dmitry Fadeyev auch immer wieder lesenswert finde https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/

      Auch Websites leiden doch beständig unter dem Thema AtF. Zum Beispiel Karussells.
      Warum sind die Dinger noch immer so beliebt? Die haben so eine schlechte Conversion. Aber hier sehen wir das klassische Beispiel: Es wird überall gemacht, jede Abteilung will mitmischen, egal ob gut oder schlecht und alle machen mit.

      Was wir sicherlich alle erkennen ist, das wir ständig dazulernen.

      Die Frage die ich dabei immer in den Mittelpunkt stelle ist: Welche Informationen sucht ein Nutzer bezüglich seiner aktuellen Fragestellung.

      Wenn du diese Antworten herausarbeitest, dann kann gar nicht mehr so viel schiefgehen.
      Und wenn deine Seite den Eindruck macht, dir bei der Problemlösung helfen zu können, warum solltest du dann nicht scrollen und (in den Laden mit dem schönen Schaufenster) „reinschauen“ ;-)

      Viele Grüße
      Christian

      (0)
      Reply
Kommentare