Die Webseiten-Navigation bei einem responsive Webdesign zu lösen, ist meist eine der größten Herausforderungen für Webdesigner und Entwickler. Denn schließlich soll die Navigation ja sowohl auf einen großen Desktop-Monitor, als auch auf einem Smartphone benutzerfreundlich gelöst sein.
Zum einen muss man also eine Lösung finden, um den jeweils zur Verfügung stehenden Platz für die Navigation möglichst geschickt zu nutzen. Außerdem muss man aber auch noch bedenken, dass der Unterschied zwischen der Navigation mit einer Maus und der Bedienung des Touchscreens auf Tablet PCs und Smartphones zu lösen ist.
Um mögliche Lösungen für diese Herausforderungen zu finden, habe ich mir die Navigationselemente verschiedener responsive Webdesigns einmal genauer angeschaut und die Pro und Cons der unterschiedlichen Ansätze analysiert.
1. Navigationsleiste wird zu Button-Navigation auf Smartphones
Eine sehr beliebte Vorgehensweise für die Umsetzung von Menüs in responsive Webdesigns ist die Umwandlung der Navigationspunkte von einer »normalen« Navigationsleiste in untereinander aufgelistete Buttons, die auf Smartphones über die komplette Screen-Breite gehen.
New Adventures in Web Design conference
Webseite: 2012.newadventuresconf.com
Die Desktop Ansicht der Webseiten-Navigation.
Auf dem Smartphone werden die Navigationspunkte untereinander als Buttons aufgelistet.
Geek in the Park 2011
Webseite: 2011.geekinthepark.co.uk
Die Navigationspunkte werden hier in einer Leiste oberhalb des Webseitenlogos angezeigt.
Auf einem Touchscreen sind die großzügigen Navigations-Punkte leicht anzuwählen.
Forfathers Group
Webseite: forefathersgroup.com
Die Navigationspunkte sind auch in der Desktop-Ansicht große Buttons, der Hintergrund wird aber erst bei Maus-Hover sichtbar.
Die Navigationspunkte behalten ihre Subheadlines auch in der Ansicht auf dem Smartphone.
Der Vorteil bei den gezeigten Beispielen ist, dass die Buttons in der Smartphone-Ansicht großzügig untereinander angeordnet sind. So können die Buttons auch auf dem Touchscreen bequem ausgewählt werden. Da der Hover-Effekt auf dem Touchscreen ja entfällt ist es außerdem sinnvoll, die Menüpunkte mit einer Hintergrundfläche deutlich als Buttons erkennbar zu machen.
Der Nachteil ist allerdings, dass ein Menü so sehr viel Platz auf dem Screen einnimmt und bei vielen Navigationspunkten muss der Besucher erst auf der Seite herunter scrollen, um die weiteren Inhalte der Webseite zu sehen. Wichtig ist auch, dass die Navigation (falls oberhalb des Webseitenlogos angeordnet) das Logo nicht komplett überdeckt. Denn das Logo sollte natürlich auch in der kleinen Smartphone-Ansicht immer sofort sichtbar sein.
Eine weitere Lösung ist es, einen zusätzlichen Link in der Smartphone-Ansicht anzuzeigen, über den der Besucher den Navigationsbereich überspringen kann.
digitalHappy
Webseite: digitalhappy.com
Um Inhalte auf einem kleinen Screen zu überspringen, erscheinen in der Smartphone-Ansicht zwei weitere Navigationspunkte ganz oben auf der Seite.
2. Navigations-Buttons in der Smartphone-Ansicht nebeneinander auflisten
Um Platz in der Smartphone-Ansicht zu sparen und so eventuell noch eine Suchfunktion in die Navigation mit einzubinden, können die Navigationspunkte auch als Buttons nebeneinander aufgelistet werden. Bei mehreren Navigationspunkten werden diese dann auch untereinander angezeigt.
Staffandstorp
Webseite: staffanstorp.se
In der Desktop-Ansicht werden die Navigationspunkte mit Subheadlines angezeigt.
Auf dem Smartphone wird auf die Subheadlines verzichtet und die Navigations-Punkte werden platzsparend aufgereiht.
3. Ein Select Dropdown-Menü in der Smartphone-Ansicht einsetzen
Eine weitere Lösung ist es, die Navigationspunkte in der Smartphone-Ansicht über ein Dropdown-Menü anzuzeigen. Diese Option ist extrem Platz sparend und auf modernen Smartphones sind die Select-Menüs sehr benutzerfreundlich umgesetzt.
iA Writer
Die Webseite von iA Writer nutzt gleich zwei Dropdown-Menüs in der Smartphone-Ansicht. Die Webseite ist übrigens mit dem Template von iA3 von Information Architects umgesetzt.
Das Navigationsmenü von iA Writer in der Desktop-Ansicht.
Die Auswahl zwischen Mac und iPad und die Webseiten-Navigationspunkte werden in zwei Dropdown-Menüs untergebracht.
Auf Smartphones sind die Dropdown-Menüs über ein JavaScript-Element benutzerfreundlich gelöst.
Weitere responsive Webdesigns, die Dropdown-Menüs für die Navigation auf dem Smartphone nutzen sind z.B. Five Simple Steps und Yaron Schoen.
Eine umfangreiche Anleitung mit Video und Live-Demo zur Umsetzung der Dropdown-Lösung kannst du übrigens im Artikel »Convert a Menu to a Dropdown for Small Screens« bei CSS-Tricks nachlesen.
4. Die Menüfunktion in der Smartphone-Ansicht reduzierten
Eine weitere Möglichkeit, um eine Platz sparende Lösung für die Menüfunktion auf dem Smartphone zu finden ist, nur die wichtigsten Menüpunkte zur Verfügung zu stellen.
Authentic Jobs
Auf der Webseite Authentic Jobs wird in der Smartphone-Ansicht z.B. auf das komplette Webseiten-Menü verzichtet. Auch die Suchfunktion wird nur mit einem kleinen Button dargestellt. Das Suchformular wird erst bei der Auswahl des Suche-Buttons sichtbar.
Die Navigation der Authentic Jobs-Website in der Desktop-Ansicht.
In der Ansicht für Smartphones wird das Menü stark reduziert angezeigt.
Elemente wie die Suche werden erst bei Auswahl angezeigt.
5. Fazit
Es gibt also wirklich etliche verschiedene Lösungen, um eine Webseiten-Navigation in einem responsive Webdesign möglichst benutzerfreundlich umzusetzen. Und da die Anforderungen an eine Menü-Funktion bei jedem Webseiten-Projekt immer wieder andere sind, gibt es wohl keine allgemeingültige Lösung. Vielmehr sollte man je nach Projekt abwägen, wie das Menü im responsive Design am besten umgesetzt werden kann.
Bei der Umsetzung eines Themes oder Templates mit responsive Webdesign ist außerdem zu bedenken, dass die Anzahl der Menüpunkte nicht festgelegt ist. Daher ist es in diesem Fall ganz wichtig eine Lösung zu finden, die bei einer unterschiedlichen Anzahl von Menüpunkten funktioniert.
Wenn du dich weiter inspirieren lassen möchtest, kannst du dir jede Menge responsive Webdesigns auf der Webseite Mediaqueri.es anschauen (du kannst dort übrigens du auch deine eigenen Designs einreichen).
Über dein Feedback zum Artikel, sowie weitere Webseiten-Beispiele mit Lösungen für responsive Webseiten-Menüs freue ich mich sehr!
Schöne Studie :) Solange man es nur mit einer Navigationsebene zu tun hat, kann man sich eigentlich richtig austoben - finde ich. Die unterschiedlichen Layouts laden ja zum spielen ein.
Für mich aber immer der Horrorpunkt, verschachtelte Navigationsebenen über 2 oder 3 Ebenen hinweg. Da finde ich den Ansatz mit dem Select Menü gar nicht so schlecht.
Hallo Sascha,
ja, das stimmt. Sobald man es mit Submenüs zu tun hat, wird die Sache meist leider gleich etwas komplizierter. Ich denke in der Zukunft wird es sicher noch jede Menge weitere Möglichkeiten geben, mit der Menü-Problematik auf mobilen Webseiten umzugehen.
Ich habe über Google+ übrigens noch zwei weitere, interessante Tipps zum Thema bekommen:
Die Video-Präsentation von Luke Wroblewski über Navigation Elements und der Beitrag »Re-tabulate« von Jeremy Keith.
Viele Grüße,
Ellen
Hallo Ellen,
die zwei Videos habe ich mir schon zu Gemüte geführt, finde das Video über Navigation Elements aber am Interessantesten. Flex Box ist zwar ein nettes Thema, leider hängt das halt an der Browser Unterstützung. IE ist halt im Weg, leider.
LG Sascha
Vielen Dank Ellen. Sehr gute Beispiele und detaillierte Ausfuehrungen.
Pingback: Was Ihre Website wirklich braucht: ein “Responsive Design”
Toller Post!
Die Website http://www.mediaqueri.es kannte ich noch nicht. Hab‹ ich mir jetzt auch gebookmarkt. Danke!
21 top toold fürs responsive Design, eben bei MisterWong entdeckt:
http://www.netmagazine.com/features/21-top-tools-responsive-web-design
Habe mir auch schon ein »responsive design« zugelegt.
Vielen Dank für den Artikel. Genau das, was ich gesucht habe!
Button Navigation auf Smartphones halte ich für Platzverschwendung. Entweder sind die Buttons oben, dann muss der Leser zum Inhalt scrollen, oder sie sind unten und er muss danach suchen.
Vielen Dank für deinen super Artikel! Ich befinde mich gerade mitten in der Konzeption für eine Responsive Design mit Submenüs ;) Das gibt einem gut zu denken.
Sehr hilfreich ist in diesem Zusammenhang auch die Website
http://mediaqueri.es die eine unglaubliche Zahl an guten Beispielen auflistet.
Gruß
Reinhard
Hallo Ellen,
erstmal danke für die Denkanstöße, bei Euch zu lesen ist immer wieder erhellend. Im Zusammenhang mit der Darstellung auf Smartphones habe ich eine Frage - ich habe mir schon einen Wolf recherchiert aber keine Lösung gefunden - Wie kann es sein, daß eine Dropdown-Auswahl (Select-Liste) auf dem Android einfach nicht zu sehen ist? Der kleine Pfeil-Knopf wird auf dem iPhone dargestellt, auf meinem Android aber nicht. Hast du mit deinem breiten Erfahrungswissen eine Idee dazu?
Hallo Kay,
vielen herzlichen Dank für dein tolles Feedback, das freut mich sehr :) Vielleicht liegt es an der Programmierung (wahrscheinlich JavaScript) des Dropdown-Menüs. Um welche Seite/Theme handelt es sich denn? Selbst hatte ich eigentlich mit dieser Problematik noch keine Probleme, da bei meinen Tests zumindest Android und iOS sich in den meisten Fällen ähnlich verhalten hatten.
Viele Grüße,
Ellen
Hallo Ellen,
diese Problematik betrifft u.a. euer Yoko-Theme. Ein schweizer Kollege hat ja bereits im Yoko-Blog gefragt. http://daltunes.ch. Das kann ich hier reproduzieren. Ein Finger-Tipp auf den Menüpunkt hinterlegt zwar grau, aber der Pulldown öffnet sich nicht. Ein weiterer Tipp öffnet die hinter dem Menüpunkt verlinkte Seite.
Es wäre schön, wenn euer tolles Theme an dieser Stelle gefixed werden könnte.
Grüße,
Jochen
Nachtrag: wie ich gerade mit dem iOS-Simulator herausgefunden habe, betrifft es nur Smartphones, respektive deren Auflösung. Vermutlich wird das Pulldown durch die Headline bzw. Logo, die ja in der kleinen Auflösung unter das Menü geschoben werden, *unterdrückt*. Ob man das mit mit einem z-index für das Menü ändern kann?
Jochen
Pingback: User Experience von Responsive Webdesigns | Usabilityblog.de