Vertikal Responsive: Wieso Websites in der Höhe flexibel sein sollen
Elemente, die sich im sofort sichtbaren Bereich einer Website befinden, erzielen höhere Klick-Raten und Conversions. Trotzdem passen sich die wenigsten Websites an die Höhe des Bildschirms an. Websites vertikal responsive zu machen, wäre aber genau so einfach möglich, wie sie in der Breite anzupassen.
Die Höhe als knappe Ressource
Die meisten Websites sind heute responsive umgesetzt und kommen auf einem Smartphone anders daher als auf dem Laptop. Vielfach beschränkt sich die Anpassungsfähigkeit aber auf die Seitenbreite. Unsere Geräte sind aber auch unterschiedlich hoch, und bei den heute gängigen breitformatigen 16:9 Screens und oftmals nicht ganz geöffneten Browserfenstern ist die Höhe die knappere Ressource als die Breite. Dem wird aber noch viel zu selten Rechnung getragen.
40% der nicht-Mobile-Screens sind weniger als 1000 Pixel hoch.
Über 40% der Desktop-, Laptop- und Tablet-Screens sind weniger als 1000px hoch, über 80% maximal 1200px. (Daten vom September 2015 von einer grösseren Schweizer Website, Total 1.8 Mio. Sessions)
Scrollen geht zwar einfach ...
Scrollen ist nur noch selten ein Bedien-Problem. Auf Touchscreens, Trackpads und mit der Scrollrad-Maus geht Scrollen sehr leicht von der Hand und man sieht nur noch selten User am kleinen Scrollbalken am Bildschirmrand verzweifeln. Wieso sollen Websites also vertikal responsive sein? Wenn ein Inhalt oder ein Element unten aus der Seite rausfällt, dann können die User scrollen und tun dies in den meisten Fällen auch. Aber nicht immer.
... aber der Bildschirmrand beeinflusst die Conversion
Elemente wie z.B. ein «In den Warenkorb»-Button unterhalb des Page-Folds werden eindeutig weniger oft angeklickt als wenn sie direkt sichtbar sind. Das bestätigen Auswertungen des Klick-Verhaltens und Conversion-Messungen (siehe z.B. «Das Pagefold-Manifesto»).
Scrollen scheint also doch ein Problem zu sein. Und zwar, wenn die Nutzer gar nicht auf die Idee kommen, dass sie scrollen müssten, um den ganzen Seiteninhalt zu sehen. Das ist bei eher linearem Inhalt wie z.B. einem Blog-Artikel kein Problem, weil dort die Erwartungshaltung klar vorhanden ist, dass der Text auch unten am Seitenende weitergeht. Bei einer Produktseite in einem Shop ist je nachdem, wo die Seite genau abgeschnitten wird, aber nicht unbedingt klar, dass weiter unten noch etwas kommt.
«Users do scroll, but only if what’s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll.»
Übersicht über nicht Sichtbares
Scrollen zu müssen, um alle Inhalte einer Seite zu sehen, kann ausserdem beim Verstehen des Inhalts stören. Zum Beispiel auf Übersichtsseiten, die uns vermitteln wollen, was es in einem Bereich einer Website alles zu finden ist. Es fällt leichter, sich den Überblick zu verschaffen und eine Entscheidung für einen bestimmten Unterbereich zu fällen, wenn wir alle angebotenen Inhalte direkt nebeneinander sehen.
Die Übersichtsseite der Stadt Bülach könnte z.B. so gestaltet werden, dass auf einem breitformatigen Bildschirm mit wenig Höhe in den Kacheln der Erklärungstext ausgeblendet wird und dadurch alle Kacheln direkt sichtbar werden.
Fazit: Vertical Responsive Design für Kernseiten
Scrollen stellt für die Nutzer zwar kein Bedien-Problem mehr dar und geht einfach von der Hand. Dennoch gibt es Fälle, für die sich vertikal responsives Design lohnt. Insbesondere bei Conversion-relevanten Interaktionselmenten wie Kaufen- oder Weiter-Buttons sowie Inhalten von Übersichtsseiten ist vertikal responsives Design eine elegante Lösung, um den Inhalt für unterschiedliche Bildschirmgrössen (und insbesondere Bildschirmhöhen) optimal darzustellen. Im nächsten Beitrag erklären wir Vertikal Responsive: Wie es gemacht wird.
Nachtrag 2017
Eine gute Ergänzung zum Artikel ist der Beitrag Do responsive sites have to be so tall on mobile?
Und wie erhält mein Projekt eine gute User Experience? Mit Zeix.
Web Development
Während der Programmierung dauernd umkonzipieren oder gar Code wegwerfen? Nicht mit uns – wir bringen Ihre Anwendung performant, stabil und ohne unnötige Umwege ans Ziel.