Artikel Navigationen für alle Endgeräte

david.altreiter.uni-linz, 24. März 2016, 15:02


Das Leid eines jeden Webdesigners

Für das Problem, Navigationen für alle Bildschirmgrößen gleichermaßen zugänglich zu gestalten, gibt es bereits verschiedene Ansätze. Im Folgenden werden die gängigsten Methoden, klassische Navigationen für mobile Endgeräte anzupassen, aufgelistet.

Mobile Adaptionen

Beispielimplementierungen zu jeder der folgenden Varianten hat Eric Arbw unter responsivenavigation.net [Q1] zusammengetragen. Eine Abbildung aller Adaptionen ist in folgendem Bild zu sehen.
Verschiedene Umsetzungen einer Navigation zur Anzeige auf allen Endgeräten.

TopNav

Die TopNav wird auch als „Do-Nothing-Approach“  [Q1]  bezeichnet und verändert die Anordnung der Menüelemente kaum. Die Navigationsleiste bleibt am oberen Ende der Webseite erhalten und verändert ihre Position nicht. Ab einem gewissen Breakpoint wird meist marginal das Styling der einzelnen Elemente verändert. So werden die einzelnen Elemente zum Beispiel mit etwas größerem Padding versehen und zentriert ausgerichtet. Diese Variante eignet sich jedoch nur für Navigationen mit einer sehr limitierten Anzahl an Menüpunkten, da ansonsten die jeweiligen Elemente auf mobilen Endgeräten nicht genügend Platz finden.

IconNav

Eine Variante der TopNav ist die Icon Navigation sehen kann. Hierbei werden die Menüpunkte durch Symbole ersetzt, welche durch ihre geringere Breite mehrere Elemente nebeneinander zulassen, als die geschriebenen Links. Es muss allerdings gewährleistet sein, dass die Icons eindeutig mit der eigentlichen Bedeutung der Schaltfläche in Verbindung gebracht werden können.

FooterNav

Bei der Footer Navigation werden die Navigationselemente ans Ende der Seite verschoben, um den eigentlichen Inhalt der Webseite im Layout nicht nach unten verschieben zu müssen. So muss man jedoch über die gesamte Seite scrollen um zur Navigation zur gelangen. Dies bringt zwar den Seiteninhalt in den Vordergrund, kann aber bei umfangreichen Seiten sehr umständlich für den Endbenutzer sein.

SelectMenu

Eine weitere Möglichkeit eine Navigation, die auf kleineren Bildschirmen zu wenig Platz findet auch dort zugänglich zu machen, ist die Navigation so zu minimieren, dass die einzelnen Menüpunkte nicht sofort alle sichtbar sind. Eine sehr einfache Methode dafür ist die Umwandlung der Navigationsliste in ein Select-Feld, welches eigentlich für den Einsatz in Formularen gedacht ist. Um dieses Verhalten zu automatisieren wird zu meist Javascript eingesetzt. Unter anderem existiert beispielsweise ein jQuery Plugin für diese Funktion von Viljami Salminen namens TinyNav.js [Q2]. Auf den meisten mobilen Endgeräten erscheinen die Auswahloptionen eines Select-Feldes, ähnlich einer Warnmeldung, als Popover-List Bildschirm-füllend über der eigentlichen Seite. Auch wenn diese Variante eine sehr einfache und schnelle Lösung des Problems bietet, bringt sie einige Nachteile mit sich. Einerseits ist die Änderung einer Liste in  in Select-feld semantisch unschön und verändert den DOM der Seite erheblich, andererseits wird die Accessibility (oder Barrierefreiheit) der Webseite stark eingeschränkt. Screenreader-Anwendungen erkennen die Navigation beispielsweise oft nicht als solche.

ToggleMenu

Eine etwas elegantere und daher auch sehr beliebte Lösung im Vergleich zur Variante mit einem Select-Menü, ist das sogenannte Toggle Menu. Hierbei wird statt der eigentlichen Navigation ein Button angezeigt, welcher die Navigationsliste ein- und ausblenden kann. Auch hier kommt meist Javascript zum Einsatz. Im Gegensatz zum Select-Menü wird der DOM des Dokuments allerdings nicht verändert und die Liste bleibt erhalten. Meist ist der Button hierbei am oberen Ende der Seite fixiert. Diese Methode ist auch bei nativen mobilen Applikationen sehr beliebt, da es stark an die Funktion einer Menüleiste erinnert, die man aus zahlreichen Anwendungen auf Desktop-Betriebssystemen kennt. Allerdings wird anstatt der Beschriftung des Menüpunktes, wie auf dem Desktop üblich, meistens ein Icon angezeigt. Hierbei hat sich das sogenannte Hamburger- Icon etabliert.

OffCanvasNav

Auch bei der Off-Canvas-Navigation wird die Menüliste zuerst nicht angezeigt. Erst nach einer Wisch-Geste vom Bildschirmrand schiebt sich die Navigation ins Blickfeld. Die eigentlichen Bedienelemente sind also außerhalb des Bildschirms versteckt. Diese Variant bietet sich vor allem für Layouts an, die bereits eine Sidebar-Navigationverwenden und diese bei zu geringer Displaybreite nur verstecken müssen.

Auch diese Navigationsart findet sich in vielen mobilen Anwendungen wieder. Während die Toggle-Navigation oft nur erweiterte Einstellmöglichkeiten, ähnlich einem Kontextmenü am Desktop, beinhaltet, ist die Off-Canvas-Navigation zumeist das Hautpmenü einer App und verbirgt grundsätzliche Funktionen und Elemente.

PullDownNav

Eine leicht abgewandelte Form der Off-Canvas-Navigation wird Pull-Down- Navigation genannt. Hierbei sind die einzelnen Menüelemente durch herunterziehen der Seite am obersten Ende des Layouts erreichbar. Im Gegensatz zur Off-Canvas-Navigation muss man hierbei den gesamten Seiteninhalt nach oben scrollen um zur Navigation zur gelangen.

Aktuelle Beispiele

Die beiden zurzeit gängigsten Methoden, der oben genannten Varianten sind die Off-Canvas-Navigation und das Toggle Menü.

Material Design

Mit der aktuellen Designsprache namens Material Design [Q3] bringt Google ein plattformübergreifendes Set aus Design-Grundlagen und Layout- Elementen, welches nach und nach den Weg in alle Google Apps und Webseiten auf Android, iOS, Windows, OS X, Chrome OS und Co. findet. Die Grundidee dabei ist, ein Layout aus verschiedenen papier-ähnlichen Elementen aufzubauen. Über die grundsätzliche Designphilosophie sagte Matias Duarte, Vice President of Design bei Google, gegenüber TheVerge folgendes:

“Design is all about finding solutions within constraints, if there were no constraints, it’s not design — it’s art.” [Q4]

Als Navigation setzen er und sein Team eine Sidebar Navigation ein, die sich im Stile der Off-Canvas-Navigation auf kleineren Geräten im unsichtbaren Bereich auf der linken Seite des Bildschirms versteckt. Diese schiebt sich über die eigentliche Seite sobald man sie, mittels Swipe oder drücken des zugehörigen Icons in der Appbar am oberen Rand, zum Vorschein bringt. Aber nicht nur die Hauptnavigation von Google bringt plattformübergreifende Funktionen. Auch der sogenannte Floating Action Button taucht in vielen Applikationen und Webseiten mit Material Design auf. Er verbirgt, je nach Anwendung, verschiedene weiter Funktionen, die zwar wichtig für die Funktionalität sind, jedoch nicht permanent vorhanden sein müssen. Der Button an sich ist deutlich größer als normale Buttons, die im Design eingebunden sind und schwebt, wie der Name bereits vermuten lässt, über der eigentlichen Anwendung. So wird die enthaltene Information bzw. Funktionaliät in den Vordergrund gebracht, ohne die eigentlichen Inhalte zu verdrängen. [Q5]

Neben den einzelnen Layout-Elementen bringt Material Design zudem eigene Richtlinien für Animation mit sich. Durch diese Bewegungen und Veränderungen wird den einzelnen Elementen Masse und Gewicht zugewiesen und ein flüssiger Übergang zwischen unterschiedlichen Abschnitten hergestellt. Dies schafft Hierarchie und Zugehörigkeit. Weiters wird die Interaktion des Users mit der Anwendung selbst unterstützt, indem die Animationen Feedback an den Benutzer zurückgeben. [Q3]

Bootstrap

Das CSS Framework Bootstrap [Q6] bringt, wie einige andere Frameworks seiner Art, viele verschiedene vorgefertigte Komponenten mit sich, welche im Layout durch das Setzen der jeweiligen Klassen-Bezeichnungen verwendet werden können. All diese Elemente sind reaktionsfähig und so auf allen Bildschirmauflösungen einsetzbar. Unter anderem findet sich dort auch eine vorgefertigte Navigationsstruktur wieder - Der sogenannte Navbar. Ab einem gewissen Breakpoint ändert sich die normale Inline-Liste in ein Toggle-Menü. Um diese Funktionalität verwenden zu können muss die CSS Datei und die zugehörige Javascript Datei, welche für die Umwandlung und Funktion des Toggle-Menüs zuständig ist, eingebunden sein. Weiters muss das HTML Markup eine Struktur aufweisen, wie Sie in der Dokumentation von Bootstrap zu finden ist [Q6]. Dabei ist zu beachten, dass der .div-Container, der die Navigationsliste umschließt, die Klassen navbar-collapse und collapse besitz. Außerdem wird ein Button mit den Klassen navbar-toggle und collapsed benötigt, welcher bei zu kleiner Bildschirmbreite, dafür zuständig ist die Navigation ein- und auszublenden.

Quellen

0 comments :: Kommentieren