6 Tipps, die dir helfen die richtige Responsive Navigation für deine nächste Website zu finden

11.02.2014 von

6 Tipps, die dir helfen die richtige Responsive Navigation für deine nächste Website zu finden

Hier bekommst du einen Überblick über verschiedene mobile Navigationen und erfährst was du bei der Planung beachten solltest.


Es reicht nicht mehr aus, wenn eine Website nur auf dem Desktop-Computer in einer festgelegten Größe gut aussieht und gut zu navigieren ist. Damit sich das Design und der Inhalt einer Website dynamisch an die Größe des jeweiligen Geräts (ob großer Bildschirm, Laptop, Tablet oder Smartphone) anpassen kann, wird ein Responsive Webdesign (“Reagierendes Webdesign”) bei der Umsetzung mit CSS und Javascript erstellt.

Einer der wichtigsten Teile bei der Planung von Responsive Webdesign (RWD) ist die Wahl der passenden Navigation. Für alle Navigationstypen gilt, dass eine Planung nach dem “mobile-first” Gedanken oftmals leichter ist, als einer bestehenden Desktop-Navigation eine mobile Version überzustülpen. Mehr zu dem Unterschied von Responsive Design und Mobile Website (inkl. einer Infografik) erfährst du hier.

Die meisten Websites greifen auf verschiedene Darstellungsmöglichkeiten zurück und kombinieren diese je nach Anforderung der Website. Du findest hier einen Überblick über die gängigen Arten von Responsive Navigation und die Punkte, die du bei der Planung der Navigation beachten solltest.


"Tu (fast) nichts"-Navigation

Bei dieser Darstellung wird nur der Abstand um die einzelnen Navigationspunkte herum erhöht, um die Bedienung auf mobilen Geräten mit Touchscreen zu erleichtern. 


Bei der "Tu (fast) nichts"-Navigation wird nur das Abstand um die Navigationspunkte herum erhöht und dafür gesorgt, dass sie sich der Bildschirmgröße anpassen.

Vorteile:

  • Kaum Aufwand seitens der Programmierung


Schwierigkeiten:

  • Lange Navigationspunkte können die Darstellung erschweren
  • Bei vielen Navigationspunkten rutscht der Hauptteil der Website aus dem Fokus
  • Nur bei einstufigen Navigationen möglich


Diese einfache Darstellung eignet sich vor allem bei kurzen Menüstrukturen mit kurzen Wörtern. Bei längeren Navigationen kannst du die folgenden Fragen durchgehen, um eine passende Navigation für dein Responsive Design zu wählen.


Wo befindet sich die Navigation?


Footer-Navigation

Im oberen Bereich der Website gibt es einen Verweis auf die Navigation, der den Besucher dann direkt zum Footer bringt, wo sich die Menüpunkte befinden. Im Grunde handelt es sich um zwei Navigationen. Ab einer festgelegten Bildschirmgröße wird die Desktop-Navigation ausgeblendet und an ihrer Stelle die Footernavigation angezeigt.

Es ist wichtig einen Link zurück zum oberen Teil der Seite einzubinden, um die mobile Navigation zu erleichtern.


Bei der Footer-Navigation gibt es im oberen Bereich der Website einen Verweis auf die Navigation, der den Besucher dann direkt zum Footer bringt.

Beispiele:

muumilaakso.tampere.fi

aneventapart.com


Vorteile:

  • Der Fokus des Besuchers bleibt zunächst auf dem Inhalt
  • Der Besucher findet direkt Links zu den Unterseiten, wenn er am Ende einer Seite ankommt
  • Geeignet für tendenziell viele Navigationspunkte


Schwierigkeiten:

  • Verwirrung bei manchen Besuchern, da eine Footernavigation ungewohnt ist


Navigation oben in der Website

Die Darstellung der Navigation im oberen Teil der Website ist die häufigste Art der Responsive Navigation. Alle ab hier aufgelisteten Navigationsarten befinden sich im oberen Teil der Website.


Wie öffnet sich die Navigation?


Bei wenigen Navigationspunkten bleibt es dir überlassen, ob die Menüpunkte auf einem Tablet oder Smartphone direkt angezeigt werden oder erst nach Aktivierung der Menüleiste erscheinen. Ab einer gewissen Anzahl von Unterpunkten macht es dagegen Sinn, die Navigation zunächst auszublenden, damit der Besucher beim ersten Aufrufen der Seite noch etwas vom Inhalt der Website sehen kann. Die meisten mir bekannten Websites, die die Navigationspunkte direkt einblenden, haben nicht mehr als fünf Navigationspunkte.

Ob es sinnvoll ist die Navigation erst durch einen Button zu aktivieren, entscheidet sich bei jedem Projekt aufs Neue. Wichtig ist, eine Möglichkeit zu schaffen, mit der die Navigation wieder geschlossen werden kann - z.B. durch erneutes Antippen desselben Buttons oder über einen extra gekennzeichneten Button.


Toggle-, Accordeon- oder Aufklappbox-Navigation

Bei dieser Darstellung wir die Navigation über einen Button im oberen Teil der Website aktiviert und öffnet sich dann, sodass der Inhalt der Website dabei nach unten rutscht.


Bei der Toggle- oder Aufklappbox-Navigation öffnet sich die Navigation über einen Button, sodass der Inhalt der Website dabei nach unten rutscht.

Beispiele:

praxislanzgarten.de

erikford.me

rouet.jp


Vorteile:

  • Der Fokus des Besuchers bleibt zunächst auf dem Inhalt
  • Geeignet für tendenziell viele Navigationspunkte
  • Da die Desktop-Navigation nur optisch angepasst wird, muss nur eine Navigation auf dem Laufenden gehalten werden


Schwierigkeiten: Seitens der Planung muss hier nichts besonders beachtet werden.


"Off Canvas"- oder seitlich einfahrende Navigation

Diese Navigationsart ist vielen durch die mobile Version von Facebook bekannt. Wie bei der vorigen Navigationsart gibt es einen Button. Dieser befindet sich am oberen rechten oder linken Rand. Wird der Button aktiviert, fährt die Navigation von der Seite des Buttons aus ein und schiebt dabei den Inhalt der Website beiseite.


Bei der OffCanvas-Navigation fährt die Navigation von der Seite des Buttons aus ein und schiebt dabei den Inhalt der Website beiseite.

Beispiele:

packdog.com

mashable.com

yukiao.jp


Hier gelten die gleichen Vorteile und Schwierigkeiten wie bei der davor genannten Toggle-Navigation.


Overlay- oder Ebenen-Navigation

Diese Navigationsart wirkt für viele Benutzer vertraut, da sie an die Darstellung von Unterpunkten in klassischen Desktop-Navigationen erinnert. Die Navigation wird auch hier durch einen Button aktiviert und legt sich dann von oben oder von der Seite über den Inhalt der Seite. Diese Navigationsart haben wir selbst bei dem Redesign von smooster im Februar 2014 verwendet.


Bei der Overlay-Navigation legt sich die Navigation von oben oder von der Seite über den Inhalt der Seite.

Beispiele:

alistapart.com

philiphousenyc.com

ohako-inc.jp


Hier gelten die gleichen Vorteile und Schwierigkeiten wie bei den beiden davor genannten Navigationen (Toggle und Off Canvas).


Select oder Auswahlmenü-Navigation

Diese Navigationsart stellt die Punkte bei Aktivierung als Auswahlmenü innerhalb des jeweiligen Betriebssystems dar. Eine individuelle Anpassung des Designs ist daher nicht möglich.


Die Select-Navigation stellt die Punkte bei Aktivierung als Auswahlmenü innerhalb des jeweiligen Betriebssystems dar.

Vorteile:

  • Hohe Wiedererkennbarkeit
  • Automatisch touch-optimiert, da es direkt auf die Darstellungsart des Betriebssystems zurückgreift
  • Der Fokus des Besuchers bleibt zunächst auf dem Inhalt
  • Geeignet für tendenziell viele Navigationspunkte
  • Da die Desktop-Navigation nur optisch angepasst wird, muss nur eine Navigation auf dem Laufenden gehalten werden


Schwierigkeiten:

  • Kann optisch nicht angepasst werden
  • Die Darstellung von mehrstufigen Navigationen nur eingeschränkt möglich, da in Auswahlmenüs eigentlich keine Hierarchie abgebildet werden kann (es ist möglich mit Lehrzeichen und Sonderzeichen (-) zu arbeiten um eine Hierarchie anzudeuten)
  • Verwirrung bei manchen Besuchern, da die Navigation plötzlich im Look des eigenen Gerätes erscheint


Wie ist die Navigation in sich strukturiert?


Hier findest du verschiedene Möglichkeiten die Navigationspunkte zu strukturieren. Bei einstufigen und mehrstufigen Navigationen bieten sich unterschiedliche Strukturen an.


Die Liste

Die Liste, ob linksbündig oder zentriert, ist die häufigste Darstellung bei einstufigen und mehrstufigen Navigationen

Die meisten Websites verwenden einen Listenaufbau für die Responsive Navigation.

Beispiele:

kieferorthopaedie-ruedersdorf.de

hirondelleusa.org

incredibletypes.com


Die Listenstruktur selbst hat keine besonderen Vorteile oder Schwierigkeiten. Sie sind abhängig von der jeweiligen Darstellung, wie sie im vorigen Punkt vorgestellt wurden.


Das Raster

Anstatt die Navigationspunkte in einer Liste untereinander aufzureihen, können sie auch in einem Raster nebeneinander angezeigt werden. Die Anzahl der Spalten kann dabei abhängig von der Bildschirmgröße angepasst werden.


Die Punkte der Responsive Navigation können auch in einem Raster angezeigt werden.

Beispiele:

passione.main.jp

worldwildlife.org

postalmuseum.jp


Vorteile:

  • Mehrere Navigationspunkte können kompakt dargestellt werden


Schwierigkeiten:

  • Ungeeignet für lange Navigationspunkte
  • Ungeeignet für mehrstufige Navigationen
  • Bei einer ungeraden Anzahl von Punkten wird die Darstellung asymmetrisch oder ein Punkt muss über die ganze Breite gehen
  • Eine nachträgliche Ergänzung von Punkten verschiebt den Aufbau der anderen Punkte

Ein-/Ausblendbare Unterpunkte

Alle Navigationsarten unter dem Punkt “Wie öffnet sich die Navigation?” erlauben die Darstellung von Unterpunkten. Bei mehrstufigen Navigationen wird die Listendarstellung verwendet. Bei einer großen Anzahl von Unterpunkten bietet es sich an die Unterpunkte wahlweise zu aktivieren oder zu deaktivieren. Da mobile Geräte mit Touchscreen funktionieren, ist es nicht möglich Unterpunkte mit einem Hovereffekt anzuzeigen. Daher wird hier stattdessen derselbe Effekt wie schon bei der Aufklappbox-Navigation zum Einblenden der Navigation verwendet.


Unterpunkte in einer mehrstufigen Navigation können mir Aufklappboxen wahlweise ein- oder ausgeblendet werden.

Beispiele:

westbuild.com

microsoft.com 

lintjes.nl


Die Vorteile und Schwierigkeiten findest du bei der Toggle-, Accordeon oder Aufklappbox-Navigation.


Fazit

Fast alle hier erwähnten Navigationsarten können frei an das Design der Website angepasst werden. Sie bieten Dank ihrer unterschiedlichen Strukturierung sowohl Möglichkeiten für Websites mit wenigen, als auch für solche mit vielen Unterpunkten.

Mobile-first: Der Aufbau einer Responsive Navigation gelingt am besten, wenn die Struktur der Navigation auf allen Endgeräten bereits Teil der ersten Planungsschritte ist.

Denn es hängt von der bestehenden Struktur einer Website ab, ob sie nachträglich als RWD optimiert werden kann oder ein Redesign nötig ist. Für mehr Informationen zu Responsive Webdesign für eine bestehende Website oder der Umsetzung einer neuen Responsive Website mit smooster kannst du dich hier an uns wenden.


Zum Schluss habe ich dir hier noch einmal die wichtigsten Punkte aufgelistet, auf die du bei der Planung der Responsive Navigation achten solltest:

  1. Wieviele Punkte (und Unterpunkte) hat die Navigation? Wird sich das vorraussichtlich über die Lebensdauer der Website ändern?
  2. Ist die Navigation ein- oder mehrstufig?
  3. Wird die Navigation oft bearbeitet oder werden Punkte hinzugefügt?
  4. Sind die Navigationspunkte groß genug und der Abstand zum nächsten Punkt weit genug, sodass die Navigation per Touchscreen leicht zu bedienen ist?
  5. Ist die Länge der einzelnen Navigationspunkte nicht nur am Desktop, sondern auch bei der Darstellung auf kleinen Bildschirmen passend?
  6. Gibt es eine Möglichkeit um die aktivierte Navigation wieder zu schließen oder zum Anfang der Seite zurückzukehren?


    Zu meiner eigenen Recherche für die Website-Beispiele in diesem Artikel habe ich diese drei Seiten verwendet:

    mediaqueri.es

    responsive-jp.com

    awwwards.com/websites/responsive-design

    Dort findest du eine wachsende Auswahl von aktuellem Responsive Webdesign, das dir Inspiration bei deinem nächsten RWD-Projekt liefern kann. Anmerkung: Der Aufbau der japanischen Website ist sehr ähnlich zu dem Aufbau der mediaqueri.es-Seite und daher auch ohne Japanischkenntnisse leicht zu navigieren.


    Bevorzugt ihr eine der Darstellungsmöglichkeiten? Wie sind eure Erfahrungen bei der Planung und dem Design von Responsive Navigations?


    Background image by DEATH TO THE STOCK PHOTO

    Beispielseites Gonzales Zahntechnik, Praxis Lanzgarten, Kieferorthopaedie-Ruedersdorf - Responsive Design Umsetzung: smooster

    zurück
    comments powered by Disqus