• what is unbounce
  • KATEGORIE

    Digital Marketing Kickoff 2017

    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.

    default author image
    Ü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 @MJHiemstra
    » Mehr Blog Posts von Mark John Hiemstra