{"id":112337,"date":"2019-01-10T11:48:48","date_gmt":"2019-01-10T11:48:48","guid":{"rendered":"https:\/\/staging.wingify.com\/blog\/above-the-fold-vs-below-the-fold\/"},"modified":"2019-01-10T11:48:48","modified_gmt":"2019-01-10T11:48:48","slug":"above-the-fold-vs-below-the-fold","status":"publish","type":"post","link":"https:\/\/wingify.com\/blog\/de\/above-the-fold-vs-below-the-fold\/","title":{"rendered":"„Above the Fold“ vs. „Below the Fold“: Z\u00e4hlt das heute immer noch?"},"content":{"rendered":"

„Above the fold“ bleibt ein wichtiger Bestandteil im Design von Webseiten, auch wenn dieser Begriff mit jedem Jahr komplexer wird. Webseiten, die ihren Benutzern eine gute Experience bieten wollen, sollten dieses Konzept immer noch verstehen und ber\u00fccksichtigen, auch wenn es nicht mehr als so entscheidend gilt, wie es einmal war. <\/span><\/p>\n

Was ist „above the fold“?<\/span><\/h2>\n

Das Konzept „above the fold“ reicht Jahrhunderte zur\u00fcck bis hin zu den Anf\u00e4ngen der Druckerei. Zeitungen wurden gefaltet, sobald sie im Zeitungskiosk ankamen, da sie auf gro\u00dfen Bl\u00e4ttern gedruckt wurden. Somit war nur die obere H\u00e4lfte der Zeitung f\u00fcr Passanten direkt zu sehen.<\/span><\/p>\n

Die Zeitungsindustrie verstand schnell, dass sie <\/span>Schlagzeilen, Inhalte und Bilder auf der oberen H\u00e4lfte der Titelseite pr\u00e4sentieren mussten, um Aufmerksamkeit zu erregen<\/b>. Dieses Grundprinzip gilt auch f\u00fcr digitale Inhalte.<\/span><\/p>\n

Webseiten haben nat\u00fcrlich keinen f\u00fchlbaren Knick wie Zeitungen, der „fold“ bezieht sich hier auf die Scrollbarkeit.<\/span><\/p>\n

\n

Alles was nicht unmittelbar sichtbar ist und scrolling ben\u00f6tig, wird als „below the fold“ gesehen. Leider ist die digitale Version von „above the fold“ nicht ganz so einfach zu definieren wie die gedruckte Version.<\/span><\/i><\/p>\n<\/div>\n

<\/p>\n

Dimensionen<\/h2>\n

F\u00fcr eine Webseite sollte demn\u00e4chst \u00fcber deren Dimensionen und wie diese auf den Leser wirken nachgedacht werden. Nicht alle Screens sind gleich. Zus\u00e4tzlich wird jede Seite durch die weite Verbreitung von Tablets und Smartphones in sehr verschiedenen Ausf\u00fchrungen angezeigt. Weitere Themen sind hier Bildschirmaufl\u00f6sungen und Browser Plug-Ins.<\/span><\/p>\n

Die Dimensionen von Smartphones sollten hierbei besonders ber\u00fccksichtigt und durchdacht werden, vor allem da deren Nutzung seit 2016 die von Desktops \u00fcbertrifft. Smartphones, genauso wie ihre Screens, werden in verschiedensten Formen und Gr\u00f6\u00dfen produziert; im Gegensatz zur einheitlichen Zeitung ist der „fold“ hier ein sehr viel schlechter definierbares Konzept.<\/span><\/p>\n

Online Tools zur Definition von „above the fold“ Platzierung<\/span><\/h2>\n

Es gibt viele kostenlose Online-Tools die Sie benutzen k\u00f6nnen, um Ihre Webseite visuell zu testen und einzelne Aspekte an verschiedenen Stellen bezogen auf den „fold“ zu platzieren. Sie sind sehr hilfreich um eine greifbare Idee des Layouts zu erhalten, zeigen aber nur eine oberfl\u00e4chliche Pr\u00e4sentation der Webseite und keine ausf\u00fchrliche Analyse. Daher wird empfohlen, eine vollst\u00e4ndige Websiteoptimierung<\/a> durchzuf\u00fchren.<\/span><\/p>\n

Best Practices<\/h2>\n

Auch wenn es keine festen Regeln f\u00fcr „above the fold“-Platzierung gibt, k\u00f6nnen ein paar Best Practices als hilfreiche Guidelines dienen. Manche davon basieren auf gesundem Menschenverstand, wie zum Beispiel die Platzierung des interessantesten Inhaltes „above the fold“. Andere Empfehlungen beziehen sich auf die bereits genannten Dimensionen wie zum Beispiel die standardisierte 1.000 Pixel breite\/ 600 Pixel hohe „fold“-Gr\u00f6\u00dfe bei 1,024\/768px Screens. Die meisten Bildschirmgr\u00f6\u00dfen sind heute allerdings gr\u00f6\u00dfer, daher ist eine entsprechende Anpassung Ihrer Webseite wichtig. <\/span><\/p>\n

Man sollte auch im Hinterkopf behalten, dass Best Practices nicht in Stein gemei\u00dfelt sind. Webseiten wurden lange wie die Titelseite einer Zeitung designt, was zu einer Art Schablone wurde und dazu gef\u00fchrt hat, dass die meisten Seiten gleich aussehen. Neuentwicklungen wie vertikales Scrolling (oder Klicken) bedeuten, dass das Konzept von „above the fold“ sprichw\u00f6rtlich auf den Kopf gestellt wird und sich das Nutzererlebnis sehr viel nat\u00fcrlicher anf\u00fchlt.<\/span><\/p>\n

Manche Webseiten haben das „above the fold“ Konzept komplett aufgegeben und Seiten designt, die \u00fcberhaupt keinen Inhalt unterhalb des „folds“ haben, und somit das Problem komplett gel\u00f6st. Diese „kompakten“ Designs sind \u00e4sthetisch f\u00fcr das Auge und passen f\u00fcr alle Bildschirmgr\u00f6\u00dfen.<\/span><\/p>\n

https:\/\/designmodo.com\/scrolling-web-design\/<\/p>\n

Einer der gr\u00f6\u00dften Fehler von Webseiten ist, wenn sie einen „False Bottom“, also ein falsches Ende der Seite anzeigen. Dabei bietet eine Seite mehr Informationen, die durch Scrolling erreicht werden k\u00f6nnen; dass diese Informationen existieren ist f\u00fcr den Besucher aber nicht sichtbar. Das ist der Worst Case. Ein „fold“ muss kein Hindernis sein, er sollte nat\u00fcrlich flie\u00dfen und den Besucher einnehmen.<\/span><\/p>\n

Call To Actions „above“ oder „below the fold“?<\/span><\/h2>\n

Eine der Mythen im „above the fold“-Design ist die Best Practice, einen Call to Action (CTA)<\/a> immer so zu platzieren, dass er sofort sichtbar ist. Dies ist, wie vieles rund um dieses Thema, eine Vereinfachung des Konzepts. Wo ein CTA platziert werden sollte h\u00e4ngt von mehreren Faktoren ab, entscheidend zum Beispiel von:<\/span><\/p>\n