t3n News Entwicklung

Responsive Webdesign, Teil 2: Das Navigationsmenü

Responsive Webdesign, Teil 2: Das Navigationsmenü

Mit der Serie „Responsive Webdesign“ wollen wir euch die flexibler Projekte erleichtern. In Teil 2 zeigen wir Möglichkeiten auf, eure Navigationsmenüs für die responsive Darstellung fit zu machen.

Responsive Webdesign, Teil 2: Das Navigationsmenü
„Responsive Webdesign“ – DAS Buch für flexibles Webdesign von Ethan Marcotte.

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 das Off-Canvas Pattern (Quelle: placeit.net)
Facebook verwendet für sein Responsive Webdesign das Off-Canvas-Pattern. (Bild: placeit.net)

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:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
10 Antworten
  1. von LittleOne am 21.10.2013 (09:36 Uhr)

    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!

    Antworten Teilen
  2. von Mario Janschitz am 21.10.2013 (12:15 Uhr)

    @LittleOne ... auf Seite 2 findest du ein Plugin, dass dir Tabs->Accordion und umgekehrt anbietet. :)

    Antworten Teilen
  3. von stolle am 21.10.2013 (12:51 Uhr)

    Ein Off-Canvas-Menü lässt sich auch ohne JS realisieren.

    Antworten Teilen
  4. von Mario Janschitz am 21.10.2013 (13:24 Uhr)

    Hallo Stolle!
    Danke für deinen Kommentar, hast du auch einen Link für mich?

    Antworten Teilen
  5. von stolle am 21.10.2013 (13:43 Uhr)

    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.

    Antworten Teilen
  6. von Mario Janschitz am 21.10.2013 (14:03 Uhr)

    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.

    Antworten Teilen
  7. von stolle am 21.10.2013 (14:36 Uhr)

    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).

    Antworten Teilen
  8. von Mario Janschitz am 21.10.2013 (14:49 Uhr)

    Ah ok! Nein, ist nicht so gemeint als müsste man alles mit JS erledigen.
    Sonst stimme ich dir zu.

    Antworten Teilen
  9. von andreas am 22.10.2013 (11:02 Uhr)

    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.

    Antworten Teilen
  10. von LittleOne am 23.10.2013 (18:25 Uhr)

    @Mario Janschitz: Wer lesen kann ist klar im Vorteil:D Vielen Dank für den Hinweis :D

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?