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.

Pattern für Navigationsmenüs im Responsive Webdesign

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:

• TinyNav
• Menutron