Mobile Telefone entwickelten sich in den letzten 30 Jahren unweigerlich zum omnipräsenten Medium, weltweit hat sich das Konzept durchgesetzt, dass jede Person ein handliches Gerät zur Kommunikation und für den Medienkonsum bei sich trägt. Mit dem Grundsatz des «Mobile First Design» versuchen Designer und Entwickler, Inhalte und Navigationselemente optimal für Smartphones und andere mobile Geräte zu gestalten und darzustellen.
Unzählige Filme vor 1990 stellen ausgefallene Zukunftsvisionen dar. In «Back to the Future» dominieren beispielsweise bunte, extravagante Klamotten und Gerätschaften wie Hoverboards die Szenerie. Mobiltelefone, geschweige denn Smartphones, kommen im fiktiven 2015 nicht vor.
«Marty McFly aus Back to the Future II, Bild deadstock.de»
Obwohl das Bedürfnis nach permanenter Erreichbarkeit und globaler Vernetzung rückwirkend logisch erscheinen mag, konnte sich vor drei Jahrzehnten kaum jemand das heutige Ausmass der Digitalisierung vorstellen und die damit verbundene Verbreitung von Devices, allen voran das Smartphone.
Bei den ersten «Natels» überlief die Nutzer:innen aus Angst vor horrenden Kosten noch ein kalter Schauer, wenn man versehentlich den «Internet-Knopf» gedrückt hatte. Inzwischen kommuniziert beinahe jede App mit dem World Wide Web und der Gebrauch des Smartphone-eigenen Browsers ist alltäglich geworden. Mit Sunrise hat im Jahr 2021 der letzte Provider das GSM-2-Netz abgeschaltet – es ist also heute gar nicht mehr möglich, ein Mobiltelefon ohne Internetzugang zu betreiben, weil 3G der neue Mindeststandard ist.
Was bedeutet «Mobile First» für die Webentwicklung?
Heutzutage verfügen rund 6.64 Milliarden Menschen über ein Smartphone, was erstaunlichen 83.4% der Weltbevölkerung entspricht. Diese Zahlen und der Trend dort blieb auch Google nicht verborgen, seit 2018 berücksichtigt die grösste aller Suchmaschinen bei ihrem Ranking lediglich die Werte der mobilen Versionen von Websites.
Im Fachjargon spricht man in diesem Zusammenhang von «Responsive Design» und/oder «Mobile First Design». Websites werden in erster Linie für die mobile Anwendung konzipiert, gestaltet und programmiert, müssen aber nach wie vor allen Anforderungen bei grösseren Bildschirmen in einem anderen Format gerecht werden.
Diese Grundsätze ziehen sich im Optimalfall durch alle Projektschritte einer neuen Website. Die alten Prozesse, in denen man in der Mitte der Screendesign-Phase die ersten Gedanken an das mobile Erscheinungsbild der Website verschwendete, sind längst passé – oder sollten es zumindest sein. Noch heute begegnen einem aber eine erstaunliche Vielzahl an Websites, die in erster Linie für den grossen Screen optimiert scheinen, sowohl designtechnisch als auch funktional. Das alles beginnt schon bei der Navigation.
UX & die Hamburger-Debatte – Grundsätze im «Mobile First Design»
Die Navigation als zentrales Element der Nutzerführung besteht oft aus einem oder mehreren Menüs sowie unterstützenden, klickbaren Elementen wie beispielsweise Buttons. Das bestmögliche Zusammenspiel dieser Komponenten wird durch ein gutes UI-/UX-Konzept gewährleistet, der User wird so zu «Call to Actions» geführt, also zum Handeln aufgefordert. Dies kann beispielsweise ein Klick auf einen weiterführenden Link sein, eine Newsletter-Anmeldung, ein digitaler Kauf oder ein einfacher Anruf.
Das «Hamburger-Menu» hat sich in der Welt der mobilen Websites durchgesetzt, auf den schmalen Bildschirmen der Smartphones findet man die klassischen drei horizontalen Striche fast immer oben rechts, für die optimale Bedienung mit dem rechten Daumen. Auf einen Klick oder Tab wird die Hauptnavigation aufgerufen, für tiefere Ebenen und Unterseiten wird mit Dropdowns gearbeitet.
Auf Laptop und Computerbildschirmen, oder auch auf Tablets im Querformat, verfügt man über mindestens 3-mal mehr Platz. Die Hauptnavigation findet man häufig an der oberen Bildschirmkante, die Namen aller Links nebeneinander ausgeschrieben. Nun muss das gewünschte Verhalten nicht zwingend identisch sein bei mobiler und klassischer Webanwendung. Die Positionierung einer Telefonnummer oder eines Call-Buttons kann je nach Branche und Bedürfnis auf mobilen Screens prominent zugänglich sein, auf der Desktop-Variante allerdings erst im Footer-Bereich auftauchen.
Seit geraumer Zeit raten wir in der Konzeptionsphase dazu, ein Hamburger-Menü für alle Screen-Grössen zu verwenden. In den meisten Fällen ist dies die einheitlichste Lösung und die oft mit Informationen überladene Navigation lenkt den User auf breiten Bildschirmen nicht vom Content ab, denn «Content is King».
Ein Prozess, der am Anfang steht
An diesem einfachen aber zentralen Beispiel sehen wir: Die Bildschirmgrösse von Smartphones verändert grundlegende Designprozesse und ändert die Wahrnehmung dessen, was wir für intuitive Bedienung halten. Die Konzeption und Gestaltung einer Website planen wir immer zuerst für die mobile Anwendung ein und orientieren uns auch bei der Programmierung an diesem Grundsatz. Alle Elemente, die auf schmalen Screens funktionieren, werden in jedem Fall auch optimal auf breiteren Bildschirmen dargestellt und nach Bedarf anders in Szene gesetzt. Der umgekehrte Weg wirft gegen Ende eines Projektes immer Fragen auf und etliche nachträgliche Anpassungen sind notwendig.
Der Prozess wird wohl noch eine Weile dauern, bis der vermeintliche Standard überall und in jedem Projektschritt Einzug erhält. Denn trotz der Tatsache, dass «Mobile First» längst keine Neuigkeit mehr ist, halten sich alte Muster hartnäckig – bei den Designern von Websites noch viel hartnäckiger als bei den Usern, die längst für den Shift bereit sind.
