Aktuelle Trends in der responsiven Navigation
Kommentare

Responsive Webdesign ist schon seit Jahren ein Thema, das Webentwickler beschäftigt. Zu Recht, wenn man bedenkt, dass Websites immer häufiger von mobilen Geräten aus besucht werden. Doch es ist nicht

Responsive Webdesign ist schon seit Jahren ein Thema, das Webentwickler beschäftigt. Zu Recht, wenn man bedenkt, dass Websites immer häufiger von mobilen Geräten aus besucht werden. Doch es ist nicht immer einfach, ein Responsive Design zu erstellen, gerade, wenn es um die Darstellung der Navigation auf kleinen Displays geht – trotz Open-Source-Code-Lösungen. Jake Rocheleau hat daher einen Blick auf die aktuellen Trends der Responsive Navigation geworfen und zeigt, wie sich auch umfangreiche Navigationen in ein Responsive Design integrieren lassen.

Schriftgröße in der responsiven Navigation verkleinern

Die Navigation ist ein wichtiges Element einer jeden Website, um den Besucher einen möglichst guten Überblick über den Inhalt zu bieten und somit für eine gute User Experience zu sorgen. Doch gerade im Responsive Webdesign sorgt die Navigation seit Jahren für allerhand Kopfzerbrechen bei den Entwicklern, gerade, wenn sie sehr umfangreich und mit vielen Untermenüs ausgestattet ist.

Eine Möglichkeit, die Navigation für kleinere Displays anzupassen, ist die Schriftgröße zu verändern. Dafür ist nicht einmal viel Aufwand erforderlich, denn die Schriftgröße kann mit Media Queries im CSS allmählich verkleinert werden.

Ab einer bestimmten Displaygröße, bei der auch das Verkleinern der Schriftgröße nicht mehr ausreicht, kann das Navigationsmenü an einer anderen Position angezeigt werden, wobei die Listenelemente gleich ausgerichtet bleiben. Auch Drop-Down-Menüs können so beibehalten werden.

Horizontale Menüs in vertikale Menüs umwandeln

Viele Websites nutzen sehr breite horizontale Menüs, die sich nur schwer im Responsive Design für kleinere Displays umsetzen lassen. Die einfachste Möglichkeit, solche Menüs darzustellen, ist, sie statt horizontal vertikal auszurichten. Für den Besucher wird es so einfacher, alle Links zu sehen und sie anzutippen.

Genauso ist es möglich, die Menü-Links in einer Grid-Navigation darzustellen. Damit wird eine tabellarische Form beibehalten, die für den Nutzer sehr übersichtlich ist. Zudem kann beispielsweise auch die Schriftgröße angepasst werden, um das Menü noch übersichtlicher zu gestalten und das Tippen auf die einzelnen Links zu vereinfachen.

Toggle-Menüs

Toggle-Menüs sind ebenso eine gute Lösung, die Navigation einer Website für kleinere Displays zu optimieren und Platz einzusparen. Genauso kann das Menü auch fixiert werden, sodass es während des Scrollens sichtbar bleibt.

Eine viel diskutierte Lösung für eine Responsive Navigation sind versteckte Toggle-Menüs. Dabei bleibt der Link zum Toggle Menü zwar in der Navigationsleiste, aber das eigentliche Menü muss durch Tippen sichtbar gemacht werden. Häufig wird mit diesen Menüs der Fokus auf die Links gelegt und anderer Content der Seite aus dem Mittelpunkt gerückt. 

Screenshot Verstecktes Toggle-Menü Comedy Central

Screenshot: Toggle-Menü Comedy Central – Ein Klick auf das farbige Icon öffnet das weiterführende Menü

Ausrichtung der Navigation anpassen

Um eine Responsive Navigation zu erzeugen, kann die Ausrichtung des Navigationsmenüs angepasst werden, etwa, indem sie als horizontaler Block direkt unter dem Logo dargestellt wird. Genauso ist es möglich, die Navigationslinks so einzurichten, dass sie bei kleineren Displaygrößen gebündelt übereinander dargestellt werden und auch der Content, etwa bei mehrspaltigen Websites, in der Ausrichtung angepasst wird.

Eine gute User Experience setzt sich aus vielen Faktoren zusammen – eine gute Navigation, auch auf mobilen Geräten, gehört auf jeden Fall dazu. Jake Rocheleaus Ausflug in die Welt der Responsive-Navigation-Trends zeigt, dass es zahlreiche Möglichkeiten gibt, auch komplexe Navigationsmenüs für die Darstellung auf mobilen Geräten zu optimieren – und mit ein wenig Experimentieren sogar einen eigenen Responsive Trend auszulösen.

Aufmacherbild: Sign distances to many destinations around the world from Falkland island von Shutterstock / Urheberrecht: Leksele

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -