Kommentare 18

Webseiten-Navigationen in responsive Webdesigns analysiert

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

Responsive Webdesign Menus

Die Desktop Ansicht der Webseiten-Navigation.

Responsive Webdesign Menus

Auf dem Smartphone werden die Navigationspunkte untereinander als Buttons aufgelistet.

Geek in the Park 2011

Webseite: 2011.geekinthepark.co.uk

Responsive Webdesign Menus

Die Navigationspunkte werden hier in einer Leiste oberhalb des Webseitenlogos angezeigt.

Responsive Webdesign Menus

Auf einem Touchscreen sind die großzügigen Navigations-Punkte leicht anzuwählen.

Forfathers Group

Webseite: forefathersgroup.com

Responsive Webdesign Menus

Die Navigationspunkte sind auch in der Desktop-Ansicht große Buttons, der Hintergrund wird aber erst bei Maus-Hover sichtbar.

Responsive Webdesign Menus

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.

Responsive Webdesign Menus

Responsive Webdesign Menus

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

Responsive Webdesign Menus

In der Desktop-Ansicht werden die Navigationspunkte mit Subheadlines angezeigt.

Responsive Webdesign Menus

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.

Responsive Webdesign Menus

Das Navigationsmenü von iA Writer in der Desktop-Ansicht.

Responsive Webdesign Menus

Die Auswahl zwischen Mac und iPad und die Webseiten-Navigationspunkte werden in zwei Dropdown-Menüs untergebracht.

Responsive Webdesign Menus

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.

Responsive Webdesign Menus

Die Navigation der Authentic Jobs-Website in der Desktop-Ansicht.

Responsive Webdesign Menus

In der Ansicht für Smartphones wird das Menü stark reduziert angezeigt.

Responsive Webdesign Menus

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!

18 Kommentare

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

  2. Pingback: Was Ihre Website wirklich braucht: ein “Responsive Design”

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

  4. Kay

    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

      • Jochen

        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

        • 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

  5. Pingback: User Experience von Responsive Webdesigns | Usabilityblog.de

  6. Pingback: KW33: Metro goes Android, Debugging in Dynamics NAV 2013, responsive Navigation und mehr - Der Softwareentwickler Blog

Schreibe eine Antwort