Zählt Above the Fold überhaupt noch?

Der Fold hat sich verschoben, die Frage ist geblieben

Den einen Fold gibt es nicht mehr. Ein Laptop mit 1440 x 900 zeigt rund 750 Pixel deiner Seite, sobald sich der Browser seinen Teil genommen hat. Ein iPhone in Safari zeigt etwa 650, und weniger, wenn die Adressleiste unten sitzt. Jeder Besucher sieht also einen anderen Ausschnitt von dem, was above the fold liegt. Was er von diesem Ausschnitt will, hat sich nicht geändert. Bin ich hier richtig, und lohnt sich noch ein Scroll?

Die Leute scrollen, und sie entscheiden schnell

Wer seit 2010 ein Handy benutzt, scrollt, ohne darüber nachzudenken. Der Daumen bewegt sich, bevor das Gehirn den Satz zu Ende gelesen hat. Die alte Angst, dass unter dem Fold niemand liest, ist damit überholt. Trotzdem springen die Leute schnell wieder ab. Jemand klickt deine Anzeige, liest die Headline, findet nicht, was die Anzeige versprochen hat, und ist nach Sekunden weg. Scrollen kostet den Leser nichts. Knapp ist seine Aufmerksamkeit.

Miss deinen Fold, bevor du ihn designst

Öffne deine Seite auf den drei Geräten, die deine Analytics wirklich zeigen. Bei den meisten meiner Kunden sind das ein iPhone, ein 13-Zoll-MacBook und ein externer 1080p-Monitor. Mach auf jedem einen Screenshot vom oberen Seitenrand, ohne zu scrollen. Das Handy zeigt meistens eine Headline und einen halben Button. Der große Monitor zeigt meistens eine Headline, die in 400 Pixeln Leere schwebt. Designe für beide, und zwar getrennt.

Was den Platz meistens verschwendet

Drei Dinge fressen den ersten Screen und geben nichts zurück. Rotierende Karussells verlieren die Leute schon bei Slide eins, Slide zwei und drei sieht dann keiner. Abstrakte Headlines wie „Growth, reimagined“ würden auf jeder Website in jeder Branche genauso gut passen. Übergroße Hero-Bilder schieben den Button vom Handy-Screen. Das letzte prüfst du auf einem echten Gerät, denn der Framer-Canvas ist großzügig auf eine Art, die Handys nicht sind.

Was sich einen Platz above the fold verdient

Fünf Dinge, grob nach Priorität. Der Name des Produkts und die Kategorie, in die es gehört. Das Ergebnis, das der Käufer bekommt, in seinen Worten. Ein Beleg, zum Beispiel eine Logo-Reihe oder eine einzelne Zahl, die du verteidigen kannst. Ein Hauptbutton mit einem Verb darauf. Und ein Bild vom echten Produkt oder von echter Arbeit statt eines Stock-Fotos mit lächelndem Team.

Gib dem Scroll ein Ziel

Die Unterkante des ersten Screens sollte absichtlich angeschnitten wirken. Fang eine Section knapp oberhalb der Fold-Linie an. Zeig eine halbe Logo-Reihe. Lass eine Überschrift von unten hereinlugen. Eine harte Kante und ein breiter Abstand genau an dieser Linie sagen dem Auge, dass die Seite hier zu Ende ist. Auf langen Seiten halte ich den Hero bei rund 80 Prozent der Viewport-Höhe, damit immer ein Streifen der nächsten Section sichtbar bleibt.

So prüfst du deinen in zehn Minuten

Zeig jemandem außerhalb deiner Firma fünf Sekunden lang den oberen Teil deiner Seite. Deck ihn ab und frag dann, was die Firma verkauft und für wen. Wenn die Antwort ausbleibt, ist der Fold durchgefallen, und keine Animation rettet ihn. Nach dem Launch schaust du in eine Scroll Map. Wenn ein großer Teil der Sessions nie bis zur zweiten Section kommt, liegt das Problem in diesen ersten 650 Pixeln.