Responsive Webdesign – Grundlagen

Herausforderung Navigation

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Navigation verdient im RWD besondere Aufmerksamkeit, denn sie darf nicht den gesamten sichtbaren Platz einnehmen und muss doch immer verfügbar sein. Dafür gibt es verschiedene Lösungen.

Transkript

Die Navigation verdient im Responsive Web Design eine besondere Aufmerksamkeit, denn sie darf nicht den gesamten direkt sichtbaren Platz einnehmen und muss doch immer verfügbar sein. Die Navigation muss eigentlich sein wie ein guter Freund: zur Stelle, wenn man ihn braucht, aber trotzdem soll er ja nicht im Wohnzimmer kampieren. Übertragen auf die Navigation: sie soll nicht immer den ganzen sichtbaren Platz einnehmen. Sehen wir uns an was für prinzipielle Lösungen es für die Navigation gibt. Die Entwicklung, die sich bei der Navigation abzeichnet, finde ich, sieht man sehr gut an dieser Web-Seite BeyondTellerrand. Da bin ich jetzt gerade in der Variante von 2011. Sie sehen hier ist die Navigation. Jetzt simuliere ich mal einen kleinen Viewport und dann sehen Sie was passiert. Die Navigation wird so dargestellt. Das Positive ist natürlich jetzt, dass die Navigationspunkte groß genug sind, damit man sie auch mit dem Finger auswählen kann. Finger sind ja wesentlich kleiner als Mauszeiger. Aber es gibt einen großen Nachteil. Wenn ich jetzt hier draufklicke, dann kriege ich eigentlich kaum mit wo ich bin, denn das Eigentliche ist ja hier nicht sichtbar. Der Inhalt ist ja immer hier unten erst. Und da verändert sich gar nichts, weil ich immer den Inhalt nicht sehe. Ich sehe nur oben diese Punkte. Und erschwerend kommt dazu, wenn Sie das wirklich mit einem Smartphone austesten, wenn Sie noch dazu unterwegs sind und die Verbindung schlecht, dann wird während die Seite geladen wird und Sie draufgeklickt haben, schon die Hervorhebung angezeigt. Und Sie wissen eigentlich gar nicht: bin ich schon da oder nicht. Und Sie haben eben keine Orientierung, weil der eigentliche Inhalt, das ist ja das was man lesen möchte, hier unten erst durchs Scrollen erreichbar ist. Das ist also ein typischer Fall von einer problematischen Navigation. Ganz typisch finde ich auch, dass diese Web-Seite das in der Variante von 2013 anders gelöst hat. Schauen wir das Beispiel mal erstmal hier bei einem großen Viewport an. Haben wir auch unsere Navigation. Und jetzt mache ich den Viewport einmal klein. Und Sie sehen, die Navigation nimmt nicht mehr den ganzen Bildschirm ein, sondern stattdessen haben wir hier ein Navigations-Button und da kann ich draufgehen. Und wenn ich draufgehe, dann klappt das aus und klappt auch wieder ein. Was natürlich eine wesentlich bessere Lösung ist. Schauen wir uns einmal an was für weitere Lösungen es überhaupt gibt. Bevor wir dazu kommen, natürlich der Hinweis, dass wenn Sie eine sehr sehr einfache Navigation haben, dann ist auch die Möglichkeit nichts zu tun erwägenswert. Also, Beispiel hier: Web-Seite von Ethan Marcotte, der sicher nicht schlechte Lösungen sich ausdenken wird. Von ihm stand ja der Begriff Responsive Web Design. Der hat eine sehr einfache Navigation mit wenigen Punkten. Und bei kleinem Viewport da bleiben die einfach hier. Das funktioniert aber natürlich nur bei drei oder vielleicht vier Menüpunkten und bei mehr nicht. Das heißt, diese ganz einfache Lösung, das schiebt sich einfach nur zusammen. Das geht vielleicht bei Blocks oder kleinen Seiten. Die meisten Web-Seiten haben natürlich mehr Menüpunkte und damit scheidet diese Lösung aus. Was gibt es für weitere Lösungen? Es gehen wir einmal hier zur Seite von Five Simple Steps. Ich mache erstmal den Bildschirm wieder groß, dann sehen Sie hier die Navigation. Und was passiert, wenn ich es klein mache? Dann wird hier eine Select-Liste daraus. Erst einmal natürlich der wichtige Hinweis: diese Select-Liste, wie ich sie hier zeige, so schaut sie auf einem Desktop-Rechner aus. Bei Smartphones wird die ja ganz anders dargestellt und wie sie genau dargestellt wird, hängt vom System ab. Ich zeige hier mal paar Bilder. Hier sehen Sie da auf dem Android-Gerät, hier sehen Sie iPhone. Hier sehen Sie also verschiedene Varianten. Das schaut irgendwie so aus. Das kommt also vom Betriebssystem her wie das dann dargestellt wird. Der Vorteil ist, dass sich das dann auf einem Smartphone relativ gut bedienen lässt. Das hat man auch am Anfang des Responsive Web Designs relativ häufig gewählt als Lösung. Sie hat aber natürlich zwei Nachteile. Der eine Nachteil ist, dass Sie diese Select-Liste nicht gestalten können. Da haben Sie wirklich keine Möglichkeit per CSS einzugreifen. Und das Andere, das ist so eine Frage, die gerade in der letzten Zeit aufkam, ist ob man damit solche Auswahl- Listen nicht eigentlich missbraucht. Ob die wirklich für Navigationen gedacht sind, sehen Sie natürlich eigentlich nicht. Wichtig ist, falls Sie so eine Select- Liste nehmen für Ihre Navigation auf kleinen Viewports, dann müssen Sie auf jeden Fall sicherheitsstellen, dass die Navigation auch ohne JavaScript funktioniert. Die nächste Möglichkeit, die wir haben, zeige ich hier mal an einem kleinen Beispiel, ist die Anker-Navigation. Sie sehen, hier ist die Navigation links und für kleinen Viewport gibt es hier nur einen Punkt. Die Navigation ist einfach unten angeordnet. Das hat den Vorteil, dass es wahnsinnig einfach zu realisieren ist, weil Sie brauchen keinerlei JavaScript dafür, sondern es ist wirklich einfach nur ein interner Verweis. Und die Navigation befindet sich hier unten und wird dann hier angesprungen. Bei größeren Projekten stellt sich dann immer die Frage, ob diese Lösung nicht ein bisschen verwirrend ist. Sie sehen hier mal ein Beispiel. Gehen wir hier mal wieder ganz nach oben. Das hier ist unsere Navigation. So, und wenn wir das dann kleiner machen, kleiner machen, dann sehen Sie: hier haben wir plötzlich nicht mehr die Navigation selber, sondern nur diesen Punkt. Wenn wir dann da draufklicken, dann sind wir hier unten gelandet bei den Navigationspunkten. Das erkennen Sie hier auch ganz deutlich. Auf den ersten Blick ist das ein bisschen verwirrend und vielleicht für den Benutzer nicht ersichtlich, dass er jetzt ganz unten auf der Web-Seite ist. Also, das kann ein bisschen verwirrend sein. Bisschen schöner finde ich das hier, bei der ISO-Gesellschaft gelöst. Sie sehen wieder hier die Navigation. Und wenn wir das hier kleiner machen, dann haben wir hier diesen Verweis auf die Navigation. Und wenn wir da drauf klicken, dann ist hier das Scrollen animiert und dadurch merken wir, dass wir unten hinkommen und die Orientierung ist besser gewährleistet. Das waren also alles Beispiele für die Anker-Navigation. Kommen wir zu einem weiteren Typ, den Sie zum Beispiel hier auf der Seite von Brad Frost sehen. Wenn wir hier das kleiner machen, dann sehen Sie hier gibt es ein Link-Menü. Und wenn ich da draufklicke, dann klappt das Menü auf. Dieser Ausklappeffekt ist sicher das, was zurzeit am häufigsten neu implementiert wird und sich vielleicht auch bisschen wie so ein Standard durchsetzt. Eine andere Variante davon sehen Sie hier bei Starbucks. Wenn ich hier dann das kleiner mache, habe wieder das Zeichen für Menü und dann klappt das auf und das klappt wieder ein. Schön ist hier natürlich auch der Punkt, dass sich das so ändert, dass ich es sehe hier, kann ich das Menü aufklappen. Und das ist eindeutig ein Button, um das wieder zu schließen. Diese Ausklappmenüs gibt es in verschiedenen Varianten. Die können auch seitlich reingeschoben werden. Es gibt auch solche Off Canvas-Möglichkeiten. Hier sehen Sie bei Twitter Bootstrap noch eine weitere Variation. Ich mache es ja auch mal ein bisschen kleiner. Da überlagert die Navigation den ganzen Punkt. Also, wenn ich jetzt hier unten scrolle, dann bin ich hier nur sozusagen hier unten in dem Bereich. Das ist nicht, dass es den Inhalt nach unten schiebt, sondern hier wirklich so eine Überlagerung stattfindet. Das wirkt natürlich auf den ersten Blick ganz schick. Im Zweifelsfall ist es aber nicht so ganz gut von der Usability, weil der Benutzer muss, um mit den Inhalten zu interagieren, dann immer die Navigation vorher schließen, weil sonst hat er ja keine Chance, weil nur so ein kleiner Bereich übrig bleibt. Das heißt, wir zwingen den Benutzer zu einem zusätzlichen Klick, der nicht an sich notwendig wäre. Deswegen finde ich diese Lösung nicht so ganz glücklich. Fassen wir nochmal zusammen. Für die Navigation ist zum Einen wichtig, dass die Buttons groß genug sind, damit man eben auch mit Fingern draufklicken kann, draufdrücken kann. Und zum Anderen ist es wichtig, dass nicht der gesamte sichtbarer Platz von der Navigation belegt wird. Dafür gibt es jetzt verschiedene Möglichkeiten. Wenn Sie nur 3-4 Menüpunkte haben, ist es einfach. Dann können Sie die auch ganz normal nebeneinander anordnen. Die nächste Variante ist die Anker- Navigation, die besticht dadurch, dass sie sehr einfach zu realisieren ist. Aber Sie müssen bei der konkreten Umsetzung einfach immer schauen, ob es nicht irritierend ist für den Benutzer. Die Select-Liste auf kleinen Viewports scheint eher ein Auslaufmodell zu sein. Was sich hingegen in letzter Zeit durchgesetzt hat, sind verschiedene Arten von Klapp-Navigationen.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!