Mobile First


Die Webseite für mobile Geräte zu optimieren ist falsch herum gedacht. Immer mehr Traffic wird von diesen kleinen und allgegenwärtigen Begleitern verursacht. Kaum noch jemand wartet mit einer Suche nach Informationen bis zu Hause, sondern bemüht direkt das Smartphone. Webdesign muss am Mobilgerät beginnen. Ich erklär' das mal.

    02. Mai 2016

Immer mehr Traffic passiert über mobile Netze. Das weist darauf hin, dass Inhalte in der Mehrzahl von mobilen Geräten aufgerufen werden. Diese verfügen über kleinere Displays und die angebotenen Inhalte müssen darauf optimiert werden, um die riesige Zielgruppe der mobilen Nutzer nicht auszusperren. Dafür benötigt es ein „responsive Design“ – ein Design, das sich an verschiedene Displaygrößen anpasst, aber denselben Content liefert. Häufig wird ein funktionelles und ansprechendes Design für den Desktop erdacht und dann in das viel zu enge Korsett von Tablets und Smartphones gepresst. Stattdessen muss ein Design an der größten Zielgruppe gemessen werden – und das sind die mobilen Nutzer.

Bestandsaufnahme & Probleme

Designbegriff

Ein stimmiges Webseitendesign soll von Anfang an durch Entscheidungsträger mitbestimmt werden. Es entsteht in der Regel vor der Klärung, welche Inhalte und Funktionen man anbieten möchte. Es werden schöne großformatige Entwürfe gezeichnet, in Photoshop in Formen und Farben gestanzt und in Besprechungen auf Beamer projiziert. Die Implementierung von Inhalten, interaktiven Möglichkeiten, Bedienkonzepten und allem anderen, was eine Webseite groß macht, erfolgt erst danach. Das ist sehr problematisch, denn ein Design soll nicht nur schön sein, es muss vor allem funktional sein. Der Benutzer soll sich zurecht finden, schnell an das Ziel seiner Suche nach Informationen gelangen und danach das unterbewusste Gefühl haben, dass sich sein Besuch gelohnt hat, damit er wieder kommt.

Bildschirmgröße

Presst man dieses lang erarbeitete und ausgeklügelte Design nun aber auf kleinere Displays wie die von Tablets und Smartphones, so kann man den Text meist nicht mehr lesen und die Seite ist eine einzige Miniatur, die sich nur über die Hälfte des Smartphones erstreckt, aber dafür winzig ausfällt. Man muss zoomen, dann durch die Elemente wischen, verliert den Überblick, trifft mit dem plötzlich viel zu großen Finger Buttons und Links nicht. Stößt man auf optimiertere Seiten, so erkennt man die Webseite oft nicht wieder, so neu und anders erscheint einem das Design. Die bekannte Desktopversion ist nicht wiederzukennen, viele Funktionen fehlen und auf jeden Fall bekommt man früh suggeriert und ist sich gewiss: Die Infos, die ich gestern am Computer fand, finde ich hier nie wieder.

Mobile Ressourcen & Bedienung

Es bleibt so viel Funktionalität beim Umbau für kleinere Geräte auf der Strecke, dass die Benutzung fummelig und unnötig kompliziert wird. Ganz zu schweigen von revolutionären und modernen Bedienungskonzepten wie Touch, Swipe und Pinch – Bedienung von Apps und Webservices mit den eigenen Fingern, die zumeist völlig vergessen oder zumindest nur unzureichend simuliert werden, anstatt diese von vornherein ins Designkonzept mit einzuarbeiten und so umzusetzen, dass sie einen Mehrwert bieten.

Lösungen

Entschlackung

Menüs mit mehrfach aufschwingenden Armen und „Untermenügruppen“, deren Namen und Titel nicht auf das schließen lassen, was den Nutzer hinter diesem Punkt erwartet, sind ein großes und allgegenwärtiges Problem. Der einfachste und doch sehr arbeitsintensive Tipp ist: Aufräumen. Weniger Menüpunkte, saubere Gliederung und Weglassen von veralteten Informationen und überflüssigen Inhalten, die dem Besucher keinen Mehrwert bieten. Das Hauptaugenmerk liegt auf der Präsentation des eigenen Kerngeschäfts und der Vermittlung EINER klaren Botschaft: Struktur und Zielführung. Tugenden, die für das Tagesgeschäft eines Unternehmen unabdingbar sind, warum also nicht auch für die Präsentation dessen in der Öffentlichkeit.

Auf einem Smartphone bietet sich weniger Abbildungsfläche, daher muss überlegt werden, welche Inhalte dort angeboten werden. Das Design sollte sich hierbei aufs Wesentliche konzentrieren. Im Idealfall erhält man so ein schlankes und übersichtliches Designkonstrukt, das sich auch auf größeren Displays umsetzen lässt. Wieso sollte ein Desktop-Benutzer nicht ähnlich reduzierte und auf das Wesentliche zugeschnittene Inhalte präsentiert bekommen? Nur weil er mehr Platz für Gestaltung und ablenkende Informationen auf seinem größeren Bildschirm hat?

Mobile Bedienung

Um mobile Bedienung im eigenen Projekt umzusetzen, muss diese von Anfang an mit im Designkonzept verankert sein. Dazu gehört natürlich auch schon ein Fallback – eine Methode, die einspringt, wenn Touchbedienung nicht verfügbar ist, wie auf den meisten Desktops. Nur wenn Touch von Beginn an berücksichtigt wird, wird es tadellos funktionieren und in der Benutzung der Webseite auch Sinn ergeben. So kann man mit dem Finger durch Bildergalerien wischen, erhält auf mobile Geräte zugeschnittene Eingabemethoden, wie die auf das Display gestreckten Auswahllisten oder den automatischen Aufruf der korrekten Tastatur, je nach Anforderung eines Eingabefeldes (z.B. steht das @ auf der ersten Seite der Tastatur neben dem Leerzeichen, wenn die Webseite zur Eingabe einer Email-Adresse auffordert und dies auch bei der Programmierung so hinterlegt wurde).

CSS3 Media Queries

In Media Queries kann das Verhalten von Designelementen einer Webseite an die Seitenbreite angepasst werden. Ein Smartphone hat eine sehr geringe Seitenbreite, ein Tablet ist breiter und ein Desktopcomputer mit HD-Bildschirm ist gigantisch breit. So kann ein auf dem Smartphone einspaltiges Layout, auf dem Tablet zweispaltig und auf dem Desktop vierspaltig angezeigt werden.

Angepasste Bilder

Via Skript lassen sich anhand der Seitenbreite auch verschiedene Versionen eines Bildes laden. Auf einem HD-Display sieht ein großformatiges Foto fantastisch aus. Auf dem Smartphone beim Einkaufsbummel würde dieses Bild aber sehr lange laden, da es auch sehr groß ist. Das Smartphone hat kleinere physische Abmessungen und benötigt so ein großes, hochauflösendes Bild gar nicht. Also kann eine kleinere, qualitativ angepasste Version geladen werden, die genauso gut aussieht und Datenvolumen des Besuchers spart.

Fazit

Für die Umsetzung von Webseiten in einer mobilen Infrastruktur gibt es immer mehr Möglichkeiten und Lösungen. Über all dem steht für mich persönlich aber ein Grundsatz: Mobile First! Entwickle dein Design zuerst für das kleinste anzunehmende Gerät und passe es dann für eine wachsende Seitenbreite variabel an.