22.05.2015

In Zeiten des neuen Google Updates ist Responsive Design gefragter denn je. Mobile Navigationen sind dabei Dreh und Angelpunkt für den Erfolg einer Website und die zahlreichen Gestaltungsmöglichkeiten geben Designern viel Spielraum. Wir fassen für Sie die wichtigsten Varianten zusammen und stellen Ihnen die Vorteile im Einzelnen vor.

Toggle Navigation

Die am meisten genutzte Variante im Responsive Design ist die Toggle Navigation. Mobile Websites werden mit einer Leiste im oberen Bereich versehen und enthalten ein Button-Element, das durch Anklicken eine Menüleiste ausfährt.

  • Der Vorteil ist, dass bei dieser Funktion keine neue Ebene über den Seiteninhalt gelegt wird, sondern die Seite um die Länge der Menüleiste einfach erweitert wird
  • Der Content ihrer Website ist weiterhin für Ihre Leser sichtbar

Multi-Toggle Navigation

Bei dieser Navigation enthält die Website eine Sammlung an einzelnen Menüleisten. Diese sind unter einer Hauptkategorie zusammengefasst. Die Unterkategorien werden erst angezeigt, wenn sie angeklickt werden.

  • Hier können Sie komplexe Strukturen gut sortieren und übersichtlich gestalten
  • Die Anordnung in Unterbereiche und -kategorien spart Platz ein
  • Der Leser kann über die Hauptkategorie gezielt zu seinem Interessenbereich navigieren
  • Die Navigation kann zu einem Multi-Level-Dropdown-Menü ausgebaut werden

Mega-Dropdown Navigation

Diese Menüstruktur ist eine weiterführende Abwandlung der Toggled Navigation. In dem Content-Bereich des Menüs können Bilder, Icons oder eine Kombination aus beiden eingearbeitet werden.

  • Die optische Darstellung vereinfacht für Leser die Orientierung in der Menüleiste
  • Auch bei dieser Navigation kann ein Multi-Level-Dropdown-Menü eingebaut werden

Dropdown Navigation mit OS-Picker

In die Kopfzeile der mobilen Website wird ein Dropdown-Menü eingerichtet, das durch ein Select-Element Seiten und Kategorien anzeigt. Das Design und Layout wird direkt von dem Betriebssystem übernommen.

  • Vorteilhaft ist, dass der Inhalt des Menüs im Design und Layout nicht mehr angepasst werden muss und Ressourcen im Bereich Design gespart werden
  • Die Lösung kommt mit einem sehr geringen JavaScript aus

Slide Navigation

Diese Menüstruktur setzt sich aus verschiedenen Ebenen zusammen und schafft durch zusätzliche Bedienelemente, wie zum Beispiel einen Swipe, eine höhere Detailtiefe. Die Unterpunkte in der Navigation lassen sich dann durchblättern.

  • Die Slide Navigation ist von der Optik her elegant, aber bedarf durch die Vielschichtigkeit einen höheren Aufwand in der Umsetzung
  • In kleinen Screens kann die Leiste zum Teil nicht sichtbar sein, aber mit einem Swipe flexibel bewegt werden
  • Die Navigation muss nicht auf einen Balken beschränkt sein und Inhalte können zum Beispiel über die volle Bildschirmgröße angezeigt werden

Best Practice: Corporate Website der pronova BKK

Gerade die Kombination aus den Desktop-Navigationen mobiler Webseiten und Navigations-Mustern aus dem mobilen Bereich schaffen kreative und übersichtliche Strukturen. Bei der Umstellung der Website auf Responsive Design liegt der Fokus auf besserer Usability und User Experience. Bei der Menüstruktur der pronova BKK Website ist ein Off Canvas Flyout in Kombination mit einer Multilevel Navigation verwendet worden.

Durch einen “Burger”-Icon oben Links im Menü wird die Leiste ausgefahren. Diese überlagert den Inhalt und stellt durch ein zusätzliches Multilevel-Feature mehrere Ebenen dar. Die Hierarchien der Website werden im Responsive Design übernommen und geben dem User die tiefe Einsicht in einzelne Bereiche wieder. Ein besonderer Vorteil für den Leser: Beim Verlassen der Menüstruktur und Wiederaufruf des Menüs gelangt er nicht wieder an den Anfang zurück, sondern direkt auf die Ebene, von wo er die Unterseite aufgerufen hat. Dadurch wird dem User der mühsame Klickweg zu der bereits besuchten Seite erspart.

 Bildschirmfoto 2015-04-23 um 12.56.46

Download: Weitere Informationen erhalten Sie in unserer Casestudy "pronova BKK: Website-Relaunch & Responsive Design-Optimierung mit TWT".

Responsive Design bietet viele Anwendungsmöglichkeiten

Neben den genannten Varianten gibt es zum Beispiel auch die Off-Canvas-Pattern. Diese platziert außerhalb des sichtbaren Bereichs im Screen das Menü und wird durch einen Klick auf ein Element ausgelöst. Mit einem Off-Canvas-Flyout haben Designer wiederum große Gestaltungsfreiheit: Die Lösung gibt viel Raum für zusätzliche Elemente in der Menüstruktur.

Alle Variationen des Responsive Design bieten verschiedene Möglichkeiten, Ihre Website kreativ zu gestalten. Wie beraten Sie gerne ausführlich zu diesem Thema und stellen für Ihre Website das beste Lösungskonzept zusammen. Sprechen Sie uns dazu einfach an.

(Quelle: t3n.de)