Responsive Design: Die wichtigsten Varianten und ihre Vorteile
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. Die wichtigsten Varianten mit ihren Vorteilen lernen Sie im folgenden Artikel kennen.
Toggle Navigation
Die am häufigsten 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 Toggle 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ü 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.
Kommentare