Minimale Anpassungen

Die Navigation ist der Dreh- und Angelpunkt jeder Website, der reibungslos funktionieren und leicht verständlich sein muss. Responsive Webdesign stellt Navigationskonzepte vor neue, besondere Herausforderungen, weil hier neben einer durchdachten Content-Strukturierung Platzmangel und als alternative Eingabemethode das Touch-Prinzip hinzukommen.

Fast alle Navigationen beruhen auf Listen, deren Elemente neben- oder übereinander angeordnet sind. Dadurch ergeben sich ganz simple Lösungen, um die Navigation auch für kleinere Displays bedienbar zu machen.

Screenshots einer Website mit neben- und übereinander angeordneten Menüpunkten
Navigation mit minimalen Anpassungen für mobile Endgeräte (umbellina.com)

Die Elemente horizontaler Listen werden einfach vertikal untereinander angeordnet, je nach Größe ein bis zwei pro Zeile. Außerdem brauchen die einzelnen Punkte großzügige Paddings, um per Touch komfortabel bedient werden zu können.

Navigation im Dropdown-Menü

Die einzelnen Menüpunkte der Desktop-Variante werden hinter einem Select-Feld zusammengefasst und öffnen sich als herkömmliches Dropdown-Menü, sobald das Feld angetippt wird. Über den klassischen HTML-select-Tag ist der Einfluss auf das Design des Menüs jedoch stark begrenzt und abhängig vom jeweiligen Browser.

Deshalb ist es eine beliebte Lösung, ein Dropdown-Menü durch eine Liste zu simulieren, deren Listenpunkte bei Antippen über dem Inhalt ein- und ausgeblendet werden. Auf diese Weise kann die Navigation passend zum Designkonzept der Website gestaltet werden.

Screenshots einer Website mit einem Dropdown-Menü als Navigation
Beispiel für eine mobile Navigation als Dropdown-Menü (kinder-jugendbuch-verlage.de)

Toggle-Navigation

Die Toggle-Navigation funktioniert im Prinzip wie das simulierte Dropdown-Menü, mit dem Unterschied, dass das Menü nicht über den Inhalt gelegt wird, sondern den Seiteninhalt nach unten verschiebt. Beim Klick auf einen Listeneintrag können Subnavigationspunkte nach demselben Prinzip eingeschoben werden.

Screenshots einer Website mit Toggle-Navigation
Das Bild im Header wird nach unten geschoben, wenn sich die Toggle-Navigation öffnet (cri-cri)

Navigation Off Canvas

Bei der Off Canvas-Variante wird die Navigation außerhalb des standardmäßig sichtbaren Bereichs platziert. Per Klick auf das Menü-Icon fährt die Navigation ins Bild.

Großer Vorteil dieser Methode ist, dass die Navigation keinen Platz auf dem Standard-Viewport einnimmt und dadurch keine Inhalte verdeckt oder verschiebt. Darin liegt jedoch gleichzeitig auch die Ursache für ihren Nachteil – nämlich dass sie übersehen werden kann.

Screenshots einer Website mit Off Canvas-Navigation
Ein Klick auf das Hamburger-Icon schiebt die Off Canvas Navigation in den Viewport (gleif.org)

Das Hamburger-Icon

Hamburger, Hotdog, Entlüftungsgitter – es gibt viele Assoziationen und Namen für das Menü-Icon, das auf mobilen Endgeräten zum Standard geworden ist. Doch das Icon gab es lange vor dem mobilen Internet.

Der Interaktionsdesigner Norm Cox entwarf es schon in den Achtzigern als Menü-Icon für den Xerox Star. Dabei standen ihm nur 16 x 16 Pixel zur Verfügung. Die Lösung waren drei waagerechte Striche, die Listeneinträge eines Menüs repräsentieren.

Weiterlesen: Design