Responsive Navigation Patterns – volle Übersicht auch auf vier Zoll
Kommentare

Brad Frost gibt Denkanstöße, wie man die Navigation seiner Website auch für Smartphones und Tablets übersichtlich gestalten kann. Dies sei nötig, da im Responsive Web Design der Navigationsbereich

Brad Frost gibt Denkanstöße, wie man die Navigation seiner Website auch für Smartphones und Tablets übersichtlich gestalten kann. Dies sei nötig, da im Responsive Web Design der Navigationsbereich oft zu kurz komme. Hierzu wägt er Vor- und Nachteile sieben etablierter Modelle ab.

Ethan Marcotte mischt „Do Nothing“ mit Navigation unter jedem Artikel

Am einfachsten ist die Top-Navigation, also das Belassen aller Links am oberen Rand. Diese Herangehensweise bezeichnet Frost auch als „Do Nothing Approach“, da hierfür effektiv keine Arbeit nötig ist. Fällt jedoch dieser Bereich zu üppig aus, kommt der User erst nach einigem Scrollen an seinen Content. Zusätzlich wird es schwierig, die Navigation um Elemente zu erweitern, da der Raum dafür so eng bemessen ist. Und da verschiedene Browser die Schriften unterschiedlich rendern, kann es hier zu ungewollten Umbrüchen kommen, was beim Layouten der Top-Navigation eine zusätzliche Hürde darstellt.

Eine Alternative wäre hier, die Links in ein Auswahlmenü zu verpacken. Diese Menüs lassen sich allerdings nur schwer für jeden Browser anpassen.

Bootstrap arbeitet für Responsive Navigation mit dem Toggle-Schalter

Wegen des Style-Faktors arbeitet man bei Starbucks oder Bootstrap daher mit einem Schalter, der mit einer Animation die Navigation aufklappt. Doch diese Animation kann bei manchen Geräten stark ruckeln.

Barack Obama nutzt Facebooks Flyout – was noch auf fast keinem Smartphone funktioniert

Barack Obama nutzt auf seiner Homepage das Flyout auf der linken Seite – eine Erfindung von Facebook. Es bietet reichlich Platz für viele verschachtelte Unterpunkte. Leider ist es technisch derart avanciert, dass auch sehr neue Mobile-Browser sich mit dieser Menüführung schwer tun.

Bei der Footer-Only-Methode wird die Navigation komplett an den unteren Rand der Website verfrachtet. Dies rückt den Content zwar an die erste Stelle, doch einige Besucher werden das versteckte Menü nie finden.

Noch schlimmer ist die Hide-and-Cry-Methode. Hier wird die Navigation mit display: none komplett verborgen. Das schafft zwar Platz, bringt Mobile-Anwender aber um vieles an Funktionalität. Überdies werden die verborgenen Inhalte weiterhin geladen, was Smartphone-Surfer doppelt bestraft. Dabei ist die nötigen Code-Arbeit für die Navigation auf unterschiedlichen Geräten die selbe, als hätte der Entwickler sich für eine der vorangegangenen Methoden entschieden.

Links mit Beispielen oder Hinweisen zu Good Practices hat Brad Frost auf seiner Seite bradfrostweb.com verlinkt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -