Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Responsive Webdesign, Teil 2: Das Navigationsmenü

    Responsive Webdesign, Teil 2: Das Navigationsmenü
#FLICKR#

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

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:

Finde einen Job, den du liebst zum Thema TYPO3, JavaScript

10 Reaktionen
LittleOne
LittleOne

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

Antworten

andreas
andreas

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

Mario Janschitz

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

Antworten

stolle
stolle

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

Mario Janschitz

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

stolle
stolle

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

Mario Janschitz

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

Antworten

stolle
stolle

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

Antworten

Mario Janschitz

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

Antworten

LittleOne
LittleOne

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen