Mobile-First: Warum man fürs Handy designen muss

Im Webdesign geht es nicht nur darum, Webseiten mit vielen Spielereien und Funktionen zu bauen. Sie müssen auch funktionieren, und das auf den verschiedensten Plattformen. Seit dem Erfolg der Smartphones, der nicht zuletzt mit dem ersten Apple iPhone in 2007 begann, stehen Webdesigner vor einer großen Herausforderung: Webseiten gestalten, die sowohl am Desktop-Computer mit Querformat-Bildschirm als auch am Smartphone mit Hochformat-Display funktionieren. Dabei hat sich der Anteil der Web-Aufrufe verlagert: Immer mehr Browser werden mobil genutzt. Deshalb gilt mittlerweile „Mobile-First“, also das Designen von Webseiten mit dem Handy als Fokus.

Was genau bedeutet denn Mobile-First?

Mobile-First Design ist eine Designphilosophie, die zum Ziel hat, bessere Erfahrungen für die Nutzer von Webseiten zu schaffen, indem der Designprozess mit dem kleinsten aller Bildschirme beginnt: dem Handy. Indem man eine Webseite zuerst für Mobilgeräte entwirft, kann man von Anfang an sichergehen, dass die Nutzer auf jedem Gerät genau das finden, was sie suchen. Menüs müssen leicht zu finden und zu bedienen sein. Grafiken, Animationen und Videos dürfen nicht alles überlagern. Texte müssen gut lesbar, aber nicht zu lang sein. Und das Ganze muss schnell vom Hoch- ins Querformat wechseln können, wenn das Gerät um 90° gedreht wird.

Die Idee des Mobile-First-Designs machte zum ersten Mal im Jahr 2010 größere Schlagzeilen, als Eric Schmidt (der damalige Geschäftsführer von Google) auf einer Konferenz ankündigte, dass sich das Unternehmen bei seinen Designpraktiken stärker auf mobile Nutzer konzentrieren werde. Aber nicht nur die Webseiten, Tools und Webportale von Google wurden mehr und mehr auf die Nutzung und Anzeige auf dem Handy hin optimiert. Auch die Google-Suchmaschine selbst hat dieses Konzept verinnerlicht und bezieht es in die Bewertung von als Suchergebnis vermerkten Seiten mit ein. Das heißt für die Suchmaschinenoptimierung: Wenn die Seite mobil funktioniert, dann gibt’s ein höheres Ranking.

Am Handy stehen die Inhalte im Vordergrund

Mit dem englischen Begriff „Mobile-First“ geht auch der Ausdruck „Content-First“ einher. Denn auf dem kleinen Bildschirm eines Smartphones will niemand unnötige Grafiken, Einblendungen, Banner oder Buttons sehen. Alles muss klein genug für ein gutes Design, aber groß genug für die komfortable Bedienung sein. Informationen sind kurz und bündig zu geben. Dabei müssen Tools verwendet werden, die sicherstellen, dass immer die richtige Größe angezeigt wird. Das kann durch die Abfrage des Gerätetyps realisiert werden oder einfach mit Standardwerten für einzelne Betriebssysteme, etwa Android und iOS. Extrem wichtig ist auf der Webseite zudem eine klare Hierarchie der Informationen.

Das Zusammenspiel von Design und Informationen lässt sich leicht aufschlüsseln. Man muss sich nur eine beliebige Webseite einer Zeitung oder Zeitschrift anschauen und deren Aufbau analysieren. Die meisten Online-Publikationen gehen nach diesen seit Jahren funktionierenden Regeln vor:

• Name und Logo am oberen Bildschirmrand, gern auf einer Höhe mit dem Menü-Button und als dauerhaftes Element beim Scrollen
• Anzeige der wichtigsten Inhalte zuerst, also im Falle einer Zeitung die Nachrichten (erst darunter die Stellenanzeigen, Kleinanzeigen, Verlautbarungen, etc.)
• Klare Informationsaufschlüsselung im leicht zu erreichenden Menü, also dem immer zu sehenden Menübutton am oberen Bildschirmrand

Kerninformationen und Call-to-Action hervorheben

Wer am Handy schnell durch eine Seite scrollt, verpasst hier und da ein paar Informationen. Selbst beim aufmerksamen Lesen wird man auf dem kleinen Display schnell von der Außenwelt abgelenkt. Die Aufmerksamkeitsspanne ist viel geringer als an einem PC oder Laptop. Entsprechend müssen die Kernpunkte auf einer Informationsseite oder der Call-to-Action bei einer Webseite mit Angeboten/Produkten eindeutig erkennbar sein. Eine farbliche Abhebung, ein „Kaufen“-Button, der sparsame Umgang mit farblich hervorgehobenen Links und dergleichen sind hier zu beachten. Beim richtigen Einsatz des Mobile-First Webdesigns lassen sich mobile User sogar zu einem Newsletter-Abo überreden. Etwas, was am Desktop ein Pop-up braucht.

Anstelle von wild erscheinenden Boxen und Fenstern kann man beim Mobile-First Webdesign einfach auf fest positionierte Kästen setzen. Diese farblich hervorgehobenen oder mit einer anderen / größeren Schriftart versehenen Bereiche, die sich wie der restliche Content einfach wegscrollen lassen, sind sehr wirksam. Denn zwar kann man sie einfach wegwischen, genauso leicht lassen sie sich aber auch wiederfinden. Wo Werbeeinblendungen auf Social-Media-Plattformen immer mehr wie echte Posts aussehen sollen, um in der Masse unterzugehen, da müssen Angebote, Produkte und Aufrufe auf regulären Webseiten hervorstechen. Als Beispiel sollte man also weniger auf Twitter und Instagram zählen, sondern auf Blogs und Shops.

Die Nachteile von Mobile-First

Nicht jede Webseite und nicht jedes Angebot, das irgendwie über das Internet kommuniziert werden soll, profitiert von der Bevorzugung des Smartphone-Displays. Nicht umsonst gibt es für YouTube eine App, welche Funktionen und Seitenbereiche einfacher aufrufbar macht, als es auf einer Webseite möglich wäre. Aber andere Seiten, solche mit großen Grafiken, interaktiven Elementen und Objekten, mehreren Frames, Zeilen und Spalten für verschiedene Inhalte, etc. können so einfach nicht dargestellt werden – sie benötigen den großen Monitor sowie die Eingabegeräte Maus und Tastatur. Zusammengefasst kann man diese Mobile-First Nachteile aufzählen:

• Ungeeignet für interaktive Projekte mit vielen Bildschirminhalten, die gleichzeitig zu sehen sein müssen
• Eingabegeräte wie Maus und Tastatur müssen vernachlässigt werden, auch Dropdown-Menüs (etwa in Formularen und Eingabemasken) sind immer eine Hürde
• Für kleine Unternehmen oder private Seitenbetreiber kann das professionelle Mobile-First Design zu teuer und zeitintensiv sein
• Viele Designer sind nicht glücklich damit, erste Webseiten-Prototypen für mobile Displays zu erstellen, da dort nicht die komplette Vision für die Seite darstellbar ist
• Man muss ein anderes Nutzerverhalten (weniger Zeit auf der Webseite, kürzere Aufmerksamkeitsspanne, etc.) als Maßstab ansetzen

Wer noch nicht genug vom Thema hat, kann sich dieses Video mit weiteren Informationen zum Webdesign mit „Mobile-First“-Anspruch ansehen. Viel Spaß beim Lernen und Gestalten!