Oft geht der Weg andersherum: An die fertige Website wird eine mobile Version „angedockt“. Rein technisch ist das machbar und in vielen Fällen auch die einzig gangbare Lösung – wenn eine Website nur angepasst werden soll und kein komplettes Redesign bekommen soll.

Wenn aber ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist die „Mobile-First“-Methode der bessere Weg.

Was bedeutet Mobile First?

Angenommen, es gäbe ganz viele Smartphones und kaum Desktop-Computer (was global gesehen tatsächlich so ist). Dann müsste eine Website mit ganz wenig Platz auskommen. Man müsste alles Nebensächliche weglassen und sich ganz auf das konzentrieren, was wirklich wichtig ist.

Dabei tauchen interessante Fragen auf: Wenn man Inhalt A und Inhalt B in der mobilen Ansicht weglassen kann, wie wichtig sind diese Inhalte für eine Desktop-Version? Brauchen wir wirklich 5 große Bilder auf der Startseite und 10 Teaser?

Auch die Desktop-Version profitiert

Beim Konzipieren einer Website verliert man leicht den Überblick. Es gibt einfach zu viele Funktionalitäten und Nice-To-Haves, die den Spieltrieb anregen. Kunden wie Webdesigner sind gleichermaßen gefährdet.

„Mobile First“ ist eine große Hilfe, weil man sich um zentrale Fragen nicht herummogeln kann. Wenn man Skizzen und Wireframes auf einem Smartphone-Screen betrachtet – und der ist ziemlich klein – kommt man also nicht darum herum, zu entscheiden, wie man den wenigen Platz am besten nutzen will.

Auf der großen Leinwand trifft man schnell falsche Entscheidungen. Fehler, die an dieser Stelle passieren, werden in der Regel erst viel später spürbar. Wenn beispielsweise die Nutzerzahlen nicht stimmen oder die Website die Erwartungen nicht erfüllt.
Erst beim zweiten Blick wird klar, dass der Fokus der Informationen vielleicht nicht stimmt oder dass die Besucher einfach nicht finden, was sie suchen.

„Die erste MediaQuery ist keine MediaQuery“ (Bryan Rieger)

Es gibt nach wie vor viele Mobiltelefone, die die modernen CSS-Anweisungen nicht lesen können. Sie profitieren ganz besonders vom „Mobile-First“-Konzept. Bryan Rieger zeigt in seiner Präsentation Rethinking the Mobile Web sehr eindrücklich, mit wie vielen verschiedenen smarten und weniger smarten Telefonen die Leute im Internet surfen.

Für „Mobile First“ brauchen die mobilen Geräte nicht viel zu können. Denn auch der Coding-Prozess dreht sich um: Am Anfang steht eine reduzierte Version für kleine Bildschirme. Darauf bauen dann alle weiteren Ansichten auf. Schritt für Schritt wird die Display-Größe per MediaQueries erweitert, Funktionen und Layoutelemente kommen nach und nach dazu.

Nix zu sehen, aber lange Ladezeiten

Beim klassischen Verfahren wäre es genau umgekehrt: Man beginnt beim großen Screen und arbeitet sich Schritt für Schritt zu immer kleineren Displays vor. Elemente werden ausgeblendet, Spalten verschwinden. Bis am Ende die Version fürs Smartphone übrig bleibt.

Verkleinert man auf diese Weise eine „große“ Website, dann ist mobil zwar wenig zu sehen, aber im Hintergrund werkelt ein technischer Wasserkopf. Die Folge: Die Seite lädt und lädt. Bei Funkverbindungen kann das dauern. Sämtliche Daten, alle Scripts, alle Bilder sind immer noch da und müssen geladen werden. Auch dann wenn sie ausgeblendet sind oder nicht gebraucht werden.

 

„Mobile First“ in der Praxis

Was bedeutet das fürs Design? Muss man sich jetzt zwingen, das gesamte Design am Smartphone-Screen auszurichten? Ich glaube nicht.
Eine Desktop-Version, die so streng reduziert wäre, dass sie im Prinzip wie eine mobile Website aussieht, würde ihr Potenzial verschenken. Abgesehen davon, dass eine Seite mit sehr wenigen – und dadurch relativ großflächigen – Elementen auf einem großen Bildschirm unattraktiv aussehen würde.

„Mobile-First“ ist in meinen Augen ein content-strategischer Ansatz. Das Design setzt die inhaltlichen Entscheidungen um.
„Mobile First“ zwingt dazu, sich auf die Inhalte zu konzentrieren.