Above the Fold!?

»Über dem Falz«, fachlich-webtechnisch natürlich auf englisch: above the fold, meint bei einer Zeitung die Titelseite (ok, ok: »front page«), im Web­design den sichtbaren Teil einer Seite innerhalb eines Browser­fensters. Eine gut gestaltete Titelseite hat höchste Bedeutung für den Verkauf. Im Webdesign dient(e) besondere Beachtung dieser Zone insbesondere der Such­ma­schinen­­optimierung (die ersten 5 Major­ein­träge werden hoch gewertet). Im Web ist man zudem nur einen Klick weit vom Verlassen einer Site betroffen. Doch die Weblandschaft hat sich so weit gewandelt, dass man diese Setzung des »Above the Fold« mal unter die Lupe nehmen sollte.

Was ist Standard?

Eine Zeitung als Printprodukt mit unveränderlichen Format hat einen gleichbleibenden Bereich, welches optimiert werden kann. Bei Websites gilt das auch, allerdings ist die Situation ungleich variabler. Hier ein Beispiel der Website der Zeitschrift (siehe oben) »The Sun Site« above the fold:

Website The Sun Above the Fold

Lange Zeit hat man Websites so aufgebaut, dass diese für den Normaluser gut zu betrachten sind, ohne zu scrollen. Ausgehend von üblicher Monitor­grösse (15 Zoll, recht bald 17 Zoll) und der möglichen Auflösung (z.B. 1024 x 768 Pixel) ergeben sich Standard­größen für Websites. Von der Monitorfläche kann man Browser-Bedienelemente (Adressleiste, Statusleiste, Lese­zei­chen-Symbol­leisten) abziehen, sodass noch weniger Platz zur Verfügung steht. Die Zeit von demütigen 800 x 600//780 x 540 Pixeln Website Maximalgröße aufgrund des beschränkten Viewports sind vorbei. Als Standard gelten, aus­ge­hend von 19 Zoll-Monitoren oder größer, Web­site­dimen­sionen von cirka 960 Breite x ? Höhe Pixeln. Als Höhe habe ich ein ? eingesetzt, denn auch hier hat man viel Platz für Spekulation. Moderne Browser sind über­laden mit Zusatzleisten. ? kann 780 Pixel oder 900 Pixel bedeuten usw. Hier ein paar Werte zur Lage des Browserfolds, abhängig von der Browsergröße, von About.com:

  • 640 x 480 fold is around 310 pixels down
  • 800 x 600 fold is around 430 pixels down
  • 1024 x 768 fold is around 600 pixels down
  • 1200 x 1024 fold is around 850 pixels down
  • 1600 x 1200 fold is around 1030 pixels down.

Lösungen

Man könnte angesichts der skizzierten Lage auf Nummer sicher gehen, oder auch das Gegenteil versuchen: durchziehen. Tatsächlich hat sich eine Zeitlang eine weitere Problematik ergeben: Paging oder Scrolling? Die Überlegung war/ist: sollte man Inhalte häppchenweise Page für Page aufbereiten oder kann man das Scrollen zulassen? Das Risiko besteht, dass User nicht von Seite zu Seite klicken (Paging) — oder nicht endlos scrollen wollen und irgendwann aufgeben. Daraus haben sich diverse Lö­sungs­an­sätze ergeben. Beispielsweise erleben Sie das auf dieser Site hier.

Teasern

Zunächst gibt es Teasertexte, die sich leicht erfassen lassen. Dermaßen erleichtert hofft man, dass ein User weiter scrollt und relativ schnell die Möglichkeit hat, Inhalte der Site zu erfassen. Irgendwann gibt er auf, spätestens nach 10 Teasertexten, deswegen hat auch das Teasern seine Grenzen.

Navigation, Kategorien, Tags

Noch mehr Gelegenheit zum schnellen Scannen von Inhalten ergibt sich, indem man das Teasern zugunsten von mehr Verlinkung zurücknimmt. Vorweg: die Zeit vieler Links ist auch vorbei. Zu Anfangszeiten des Webs waren alle glücklich, überhaupt einen tollen Link zu finden. Jetzt ist man über Begrenzung und mehr Konzentration froh. Ausdruck dieser Wünsche zeigt sich erfolgreich in Minimal Design.

Clevere Gewichtung

Sinnvoll ist es schon, nicht blindlinks Seiten aufzubauen und auf die Toleranz der User zu setzen. Aufgrund von Weberfahrung kann der User abschätzen, wie durchgearbeitet eine Site ist, ob die Usability stimmt und ob diese mit dem zu erwartenden Content zusam­men­geht. Blendwerk wird schnell als solches erkannt. Also ist eine abgestufte Hie­rar­chie von Inhalten von wichtig zu hilfreich, von oben nach unten, von »above« — bis zu »under the fold« schon sinnvoll. Im Footer versammeln sich die Links, oberhalb interessante Inhalte (naja, auch Werbung, wenns kommerzieller ist).

Zur Zeit

Neue Trends entstehen häufig aus Wandel der Technik. Ich will nicht auf die ganzen Flash-Monstersites eingehen. Durch das jQuery Framework vorangebracht sind inhaltliche Mani­pu­lationen möglich, die trotz Knappheit der Above-the-Folds Grenze Inhalt usergerecht einbringen. Man denke an Slider-, Toggletechniken usw. Klasse finde ich auch die One-Page-Designs, wo Scrolling- und Pagingproblematiken (siehe oben) elegant überspielt werden.

Ausschlaggebend*) für die endgültige Gestaltung einer Site sollte der Einsatzzweck und der Enduser sein. Journalistische Sites müssen kategorisieren und den User gezielt mit wenigen Klicks zum Ziel leiten. Hier ist die Gestaltung above the Fold nach wie vor extrem wichtig. Haben wir mehr Interesse am Inhaltlichen, darf auch gescrollt werden. Wissen­schaft­lich orientierte Sites bieten respektlos Linksammlungen wie in alten Zeiten an. Aber auch im universitären Bereichen zeigen sich Änderungen.

*) Meistens liegen Daten über das Userverhalten, also Webstatistiken einer Site nicht vor. Diese können aber sehr gut Auskunft geben, mit welchen Bildschirm­auf­lö­sungen die betreffende Site besucht wird. Davon kann man die Akzeptanz der geplanten Site­größe ableiten.

Was noch

Websites sind nicht nur browserfertig zu bauen, sondern müssen auch für weitere Devices funktionieren: Smartphones, Handhelds. Kriterien wie Websitegröße oder »Folds« sind plötzlich unwichtig, weil die Site nicht mehr als große statische Fläche erscheint. Aufgrund der geringen Fläche findet eine andere Betrachtung und Bedienung statt. Die Grenze von präsentierender Site zu interagierender »App« löst sich auf.

Interessante Links

Where is the fold? Testen Sie Ihre Site auf die Foldergrenze.
Life below 600. Was passiert unten?
Niemand scrollt auf Webseiten—machen Sie den Härtetest.

Comments are closed.

QR Code Business Card