Im BlickpunktResponsive Design: Die wichtigsten Varianten und ihre Vorteile

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

  • Der Vorteil ist, dass bei dieser Funktion keine neue Ebene über den Sei-teninhalt gelegt wird, sondern die Seite um die Länge der Menüleiste ein-fach 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 Un-terkategorien 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 Toggle Naviga-tion. 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ü einge-baut 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: Corportate 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 Kombi-nation 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 be-reits besuchten Seite erspart.

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, die Website kreativ zu gestalten.


Über den Autor Hans J. Even

Hans J. Even ist seit 1999 Geschäftsführer der TWT Interactive GmbH in Düsseldorf und verantwortet die Units Consulting, Business Development und Sales. Vor seiner Tätigkeit bei TWT arbeitete der Diplomkaufmann und Master of Business für führende internationale Investmentbanken und Consulting-Unternehmen in den Bereichen Corporate Finance, Strategie, Vertriebs- und Prozessoptimierung.

Auch auf Onpulson

Mehr zum Thema

0Kommentare

Es wurde bisher noch kein Kommentar verfasst. Starten Sie die Diskussion!