Im Zusammenhang mit der Entwicklung einer Webseite für alle Geräteklassen wird gerne der Ansatz Mobile First genannt. Was ist dran an der Tendenz, dass das Prinzip für responsive Webprojekte immer häufiger eingesetzt wird?
Klar ist, dass man heutzutage eine Website bauen muss, die auf allen relevanten Geräten funktioniert. Ich schreibe bewusst nicht alle Geräte. Dies könnte auf die Goldwaage gelegt und gefragt werden: »Was ist denn mit Smartwatches und riesigen UHD-Fernsehern?«
Nicht, dass ihr mich falsch versteht: Wenn die Web-Analyse zeigt, dass ein relevanter Anteil der Benutzer mit einem entsprechenden Gerät zugreift, wäre auch hierfür eine Anpassung notwendig. Übrigens, ab wann ein Anteil als relevant eingestuft wird, hängt davon ab, anhand welcher Kennzahlen dies entschieden wird. Ein wichtiges Indiz ist natürlich immer die Häufigkeit der Zugriffe, die dann ggf. noch in Relation zur Conversion Rate gesetzt werden könnten. Gerne beantworten wir offene Fragen!
Exkurs: Definition von Mobile First
Mobile First ist ein Konzept, durch dessen Anwendung man mit dem schnell wachsenden und sehr heterogenen Gerätemarkt Schritt halten kann.
Wendet man das Konzept an, versucht man Einschränkungen wie kleine Bildschirmgrößen und schwache Performance zu begegnen. Dies passiert, in dem man seine Website zunächst für ein kleines und schwaches Gerät aufbaut (Viewport Meta-Tag nicht vergessen) und sie dann sukzessive vergrößert und mit Funktionen anreichert, die von besseren Geräten unterstützt werden.
Hier spielt unbedingt auch der Nutzungskontext (also das Wann und Wo der Nutzung) eine Rolle, um die Webseite optimal auf die Nutzungsanforderungen und die kontextabhängige Aufnahmefähigkeit anzupassen.
Ein großer Bereich bei Mobile First dreht sich auch um die Optimierung von Formularen aus Usability-Sicht. Das Ziel ist immer den Nutzer zur effizienten Lösung seiner Aufgaben zu befähigen. Außerdem gehören dazu auch einige Grundregeln für Interkationselemente, z. B. dass Buttons und Eingabefelder gut per Touch zu bedienen sein müssen.
Die Kurzzusammenfassung von Mobile First zeigt schon deutlich, dass der Ansatz recht abstrakt ist und lediglich allgemeine Empfehlungen formuliert. Man könnte es auch als Mantra bezeichnen, welches einen Teil der Herausforderungen in der modernen Webentwicklung löst. Trotzdem möchte ich gerne die Frage aus dem Titel dieses Beitrags beantworten.
Es war einmal <div id=“wrapper“> …
Dazu schauen wir uns einmal das Gegenteil zu Mobile First an: Desktop First. Dies ist im Grunde die Vorgehensweise, wie sie früher immer durchgeführt wurde. Die Website wurde in einer fixen Breite für die zur Erstellungszeit meist genutzte Bildschirmauflösung gestaltet und umgesetzt. Eine Anpassung für andere (kleinere) Auflösungen gab es nicht, da die Notwendigkeit nicht vorhanden war.
Möchte man aus einer bestehenden Seite mit fester Breite eine fluide oder adaptive Website zaubern, gelingt dies in der Regel nur mäßig. Das größte Problem ist, dass die bestehenden Inhalte (Texte, Grafiken, Videos, etc.) meistens gar nicht für eine Ausspielung auf kleinen Bildschirmen geeignet sind.
Man neigt bei der Aufgabe auch dazu, überflüssige und für die mobile Variante nicht als wichtig angesehene Inhalte auszublenden. Dies entspricht nicht dem, was der Konsument erwartet, nämlich den gleichen Inhalt einer Website über alle Gerätegrenzen hinweg aufrufen zu können.
Mobile First an jeder Ecke
Den Ansatz Mobile First kann man als gedankliches Modell auffassen, mit dem man sich in vielen Bereichen, die zum Realisierungsprozess einer Website gehören, beschäftigen muss.
- Beim inhaltlichen Konzipieren wird der Fokus auf kleinere Bildschirme gelegt, sodass eine Fokussierung und Priorisierung automatisch stattfindet.
- Die genaue Analyse der Nutzungsanforderungen resultiert in einer umfassenden Architektur der Nutzerführung und Definition der Interaktionen.
- Das Design berücksichtigt die Anforderungen von Touch-Eingaben (auch auf der Desktop-Variante, nämlich für Tablets) sowie die Flexibilität der modularen Elemente.
- Technisch wird die Website nach dem Prinzip des Progressive Enhancements programmiert, um so viele Geräte wie möglich zu unterstützen.
Bei jedem der Teilaspekte wird also von Klein nach Groß gearbeitet, was zu reduzierten, fokussierten und leichtgewichtigen Webseiten mit einer hohen Usability führt. Damit der Ansatz erfolgreich angewendet werden kann, müssen alle Beteiligten dasselbe Verständnis von Mobile First denken und leben.
Smartwatch und Co.
»Was ist denn nun, wenn eine relevante Anzahl an Nutzern über eine Smartwatch auf meiner Website surfen – gehe ich dann quasi nach ›Smartwatch First‹ vor?« Theoretisch ja. Und eigentlich wäre das vermutlich sogar ohne große Einbußen machbar, wenn man sich vor Augen führt, dass eine Apple Watch in der kleinen Variante 272 Pixel in der Breite zur Verfügung stellt. Dies sind nur 48 Pixel weniger als auf dem iPhone 5s.
In der Praxis wird das aber wohl noch nicht häufig vorkommen, denn Apple verzichtet darauf der Smartwatch einen Browser zu spendieren. Auch bei anderen Smartwatches werden erst langsam Gehversuche mit Browsern wie Opera Mini (für Tizen) oder dem Web Browser for Android Wear gemacht.
Auf der anderen Seite, den Fernsehern, sieht es so aus, dass die Browser der Smart-TVs nicht besonders umfangreich aktuelle CSS-Features unterstützen und die Bedienung mit einer herkömmlichen Fernbedienung nicht viel Freude bereitet. Dennoch könnte man dies berücksichtigen, da dies ähnlich zur ausschließlichen Bedienung per Tastatur ist. Aber auch hier reagieren die Hersteller und geben den Nutzern Fernbedienungen in die Hand, die eine Art Mauszeiger auf den Bildschirm zaubern können, wie damals bei der Wii. Dann funktionieren ggf. sogar Hover-Effekte.
Fazit
Das Prinzip »Mobile First« ist ein gutes Werkzeug, um Webseiten mit einer hohen Usability für alle Geräte zu erstellen. Nicht umsonst ist es mittlerweile zu einem Quasi-Standard für neue responsive Projekte in der Webentwickler-Szene geworden.
Meiner Meinung nach sollte man nach dem Ansatz »User First« arbeiten, bei dem die Nutzerzentrierung im absoluten Fokus steht. User First beinhaltet für mich dabei das »Mobile First«-Prinzip in seiner Gesamtheit.
Kommentare