Responsive Webdesign, Teil 2: Das Navigationsmenü
Die Entwicklung von Webprojekten hat bekanntermaßen ihre Tücken – besonders, wenn eine Website auch auf mobilen Geräten wie Smartphones oder Tablets dargestellt werden soll. Die Darstellung von Navigationen kann durchaus nach einer herausfordernden Lösung verlangen, daher sind sie nicht zu unterschätzen. Die Transformation von einer horizontalen Liste in eine vertikale stellt nicht wirklich eine Herausforderung dar, aber wie sieht es mit Accordion zu Tabs aus? Oder wie kann man Mega-Dropdowns auch für kleine Auflösungen optimieren?
In der Webentwicklung existiert der Ansatz, Inhalte eines Webprojektes auf kleinen Auflösungen einfach auszublenden. Ein User, der euer Webprojekt „unterwegs“ aufruft, hat etwa nicht die selben Interessen wie jemand, der die Website von einem stationären Desktop aus aufruft. Ich kann mich mit diesem Gedanken nicht anfreunden, da so eine Entscheidung nicht in den Bereich des UI-Designs beziehungsweise der Webentwicklung fällt – diese Entscheidung muss aus der Sicht der Informationsarchitektur und der Content-Strategie getroffen werden.
Facebook verwendet für sein Responsive Webdesign das Off-Canvas-Pattern. (Bild: placeit.net)
Navigationen responsive darzustellen, ist mitunter etwas „tricky“. Deshalb haben sich einige Pattern durchgesetzt, mit denen man diese Probleme effektiv lösen kann.
Do nothing – Einfach nichts tun
Auf kleinen Auflösungen fügt ihr euren Navigations-Elementen einfach etwas mehr Padding hinzu, damit sie auf Touch-Geräten besser erreicht werden können. Ansonsten überlässt ihr das Menü sich selbst und nehmt eine eher zufällige Darstellung am mobilen Gerät in Kauf. Dieser Ansatz kann sehr gut für kleine Menüstrukturen geeignet sein. Im Zweifelsfall lässt sich noch ein margin: 0 auto; hinzufügen.
Pro
- Einfache Implementierung
- Kein JavaScript nötig
- Kein hoher zusätzlicher Aufwand mit CSS
Contra
- Probleme mit dem Viewport: Wenn die Navigation durch dieses Pattern zuviel Platz einnimmt, benötigt es zusätzliche Interaktion des Benutzers, um zum eigentlichen Inhalt eures Webprojektes zu gelangen. Verstärkt wird dieses Problem, da bei diesem Pattern die volle Navigation immer sichtbar bleibt.
- Kaum skalierbar: Die Navigation kann bei vier Elementen perfekt auf kleinen Viewports dargestellt werden, aber was passiert bei einem fünften oder sechsten Navigationselement?
- Cross-Browser-Problematik: Verschiedene Geräte bedeuten auch unterschiedliche Viewport-Größen, die das Navigationsdesign verzerren können.
- Touch: Es gibt auch dicke Finger. Ein zu kleines Padding auf den einzelnen Elementen kann zu unerwünschten Interaktionen führen.
Select Menu – Dropdown Menü
Bei dieser Methode wandelt ihr euer Navigationsmenü in ein select-Element, also ein einfaches Dropdown-Menü. Kann ein schöner Ansatz sein, allerdings ist man bei der Darstellung auf das Betriebssystem angewiesen und als Designer hat man nicht allzu viele Möglichkeiten.
Pro
- Hohe Erkennbarkeit: Ein Dropdown-Menü wird vom User schnell erkannt.
- Natives Steuerelement: Das Betriebsystem trägt Sorge dafür, dass dieses Steuerelement touch-friendly ist.
- Interaktion findet im oberen Bereich statt: Die Navigation bleibt „oben“, so wie es Nutzer gewohnt sind.
- Geringe Größe: Dieses Pattern sorgt dafür, dass ihr mehr Platz für euren Inhalt nutzen könnt.
Contra
- Javascript: Die Abhängigkeit ist nicht groß, aber es wird JavaScript benötigt – das sich, auf mobilen Geräten, manchmal sehr eigenartig verhalten kann.
- Verwirrend: Erkennbarkeit ja, aber als Benutzer ist man es nicht gewöhnt, über ein Select-Steuerelement eine Website zu bedienen.
- Design: Als Designer hat man keine Möglichkeit, die Darstellung dieses Steuerelements zu verändern.
Bibliotheken, die euch dabei unterstützen:
(Multi) Toggle – Accordion(-artig)
Mein Lieblinspattern. Hierbei verwandelt ihr euer Menü in ein Accordion, das auch Sub-Menüs in den entsprechenden Sub-Accordions abbilden kann. Diese Technik ist auch für große Navigationsmenüs geeignet. So müsst ihr nicht auf Elemente verzichten, sollte die Anzahl eurer Menüpunkte zu „groß“ sein.
Pro
- Elegante Lösung: Die Navigation wird auf ein, für den mobilen Einsatz bestimmtes, Medium beziehungsweise Gerät optimiert.
- Gute Skalierbarkeit: Durch die Listendarstellung können weitere Navigationselemente hinzugefügt werden, ohne das restliche Layout zu beinflussen.
- Platzsparend: Auch dieses Pattern ermöglicht eine gute Aufnahme des Inhalts, da nicht zuviel Platz für eine Navigation „verschwendet“ wird.
Contra
- Peformance: Nicht alle Geräte unterstützen Animationen mit CSS in einer performanten Weise.
- JavaScript: Auch hier ist die Abhängigkeit (der Trigger) nicht groß, trotzdem existiert sie.
Bibliotheken, die euch dabei unterstützen:
- Flexiblenavigation
- ResponsiveNav.js (ohne jQuery + CSS Transitions)
Menu Overlay – Dropdown Menü
Mit dieser Technik verwandelt ihr eure Navigation in ein Dropdown-Menü, das sich links oder rechts am oberen Rand befindet – alle anderen Elemente können darunter „durchscrollen“. Dabei ist zu beachten, dass eine zu große Navigation nicht optimal darstellbar ist, außer es gibt eine Submenü-Funktionalität. Pro und Contra verhält sich gleich wie bei dem oben genannten Pattern.
- Naver ist wohl ein Paradebeispiel für dieses Pattern.
- SlickNav
- Codrops Responsive-Mulitlevel-Menu
Mit dieser Methode versteckt ihr die Navigation in einen Bereich außerhalb des Viewports und blendet diesen Teil, nach einer Interaktion, wieder ein. Das bekannteste Beispiel für diese Methode dürfte die mobile Version von Facebook sein.
Pro
- Durch Facebook kann dieses Navigationspattern leichter erkannt werden
- Platzsparend: Es wird kein Platz für die Navigation verbraucht.
- Skalierbarkeit: Weitere Elemente oder sogar Untermenüs können leicht dargestellt werden.
Contra
- Darstellung: Kann auf Desktop-Auflösungen wie ein Blick zurück nach 1991 aussehen.
- JavaScript wird benötigt.
Bibliotheken, die euch dabei untersützten:
Grid Based – Tabulare Ansicht
Dieses Pattern verwandelt euer Navigatiosnmenü in eine tabellenartige Ansicht. Diese Methode ist nicht für Unterpunkte geeignet, trotzdem kann sie eine zufriedenstellende Lösung für euer Webprojekt darstellen. Zudem verleiht sie der Website ein aufgeräumtes Aussehen, bei dem Nutzer alle Navigationspunkte auf einmal sehen können.
Pro
- Darstellung: Es wird keine zusätzliche Interaktion benötigt, um das Navigationsmenü anzeigen zu lassen.
- Touch-friendly: Durch die Größe der einzelnen Elemente kann die Bedienung erleichtert werden.
Contra
- Größe: Dieses Navigationspattern kann mehr Platz beanspruchen als andere Pattern
- Erkennbarkeit: Es kann für einige Benutzer schwierig sein, dieses Pattern als Navigation zu erkennen.
Bibliotheken, die euch dabei untersützten:
Natürlich sind diese vorgestellten Pattern nicht zwingend zu verwenden. Daher gibt es auch einige alternative Lösungen für Probleme, die nicht immer auftreten, aber können. Eine einfache Möglichkeit, ein Accordion zu Tabs zu wandeln (natürlich auch umgekehrt) bietet dieses jQuery-Plugin.
Dieser Artikel ist der zweite Teil einer Serie, hier geht es zurück zum ersten Teil: Responsive Webdesign: Layout- und Textdarstellung.
Welche Pattern oder Plugins vermisst ihr in dieser Liste?
Sehr koole Reihe!!! Danke dafür! Was super wäre ein plugin welches Akkordionen zu Tabs und umgekehrt umwandelt. Denn oft hat man im Display-View eine Tabbox und auf dem Smartphone soll es dann aber ein Akkordion sein. Designer halt :) Hauptsache es sieht schön aus :D Ansonsten wie gesagt sehr gute Reihe, freue mich schon auf die nächste!
@LittleOne … auf Seite 2 findest du ein Plugin, dass dir Tabs->Accordion und umgekehrt anbietet. :)
Ein Off-Canvas-Menü lässt sich auch ohne JS realisieren.
Hallo Stolle!
Danke für deinen Kommentar, hast du auch einen Link für mich?
Hallo,
die ganze Bewegung der DIV’s etc. funktioniert komplett mit CSS3.
Die einfachste Variante wäre in der Tat per JS die Action auszulösen, also die .click()-Action abzufragen und eine entsprechende Klasse setzen um die „Magic“ zu aktivieren.
Ohne JS würde es auch noch so gehen mit dem :target-Attribut:
http://css-tricks.com/off-canvas-menu-with-css-target/
Was auch gehen würde, aber das ist weniger elegant, ist eine Checkbox umzulabeln und dann mit der Pseudoklasse :checked weiterarbeiten.
Hallo Stolle, danke für deinen Einwurf, aber :target ist ein Pseudoelement und funktioniert erst ab IE9 – würde ich daher nicht einsetzen.
Eine checkbox finde ich persönlich unpassend und würde ich höchstens als „Hack“ bezeichnen.
Ja, wie gesagt nicht ganz so schön. Aber an sich kannst du alles mit CSS3 bauen und nur das Click-Event mit JS machen (der Text liest sich als würdest du auch die Bewegung der DIV’s mit JS rendern).
Ah ok! Nein, ist nicht so gemeint als müsste man alles mit JS erledigen.
Sonst stimme ich dir zu.
wo ist das problem, wenn :target erst mit ie9 geht? viel eher funktionieren media-queries auch nicht. zudem sprechen die optisch ausgelagerten navigationen eher tablet und handy an, da würde ich bezweifeln, ob da ein ie8 drauf ist.
mit checkboxen finde ich es gut, weil man sich so das „aktivieren und deaktiveren“ per js spart.
@Mario Janschitz: Wer lesen kann ist klar im Vorteil:D Vielen Dank für den Hinweis :D