Normalerweise 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 wenig Geld da ist oder die Website aus anderen Gründen kein komplettes Redesign bekommen soll.

Wenn aber tatsächlich ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist der “Mobile-First”-Gedanke ein sehr spannendes und produktives Denkmodell.

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 taucht eine interessante Frage auf: Wenn man Inhalt A und Inhalt B weglassen kann, wie wichtig sind diese Inhalte für eine Desktop-Version? Brauchen wir wirklich 5 Bilder auf der Startseite und 10 Teaser in der Randspalte?

“Mobile First” befasst sich an dieser Stelle mit den gleichen Fragen wie die Content-Strategie. Eigentlich könnte es “Content First” statt “Mobile First” heißen. Denn es geht um die Auseinandersetzung mit diesen Fragen:

• Was sind die zentralen Inhalte (Aussagen, Angebote) der Seite?
• Welche Elemente kann ich auf keinen Fall weglassen?
• Welches sind die Bereiche, die in allen Situationen (Mobile und Desktop) ohne Abstriche funktionieren müssen?

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. Webdesigner und Kunde betrachten Skizzen und Wireframes auf einem Smartphone-Screen. Und der ist ziemlich klein. Man kommt also nicht darum herum, zu entscheiden, wie man den wenigen Platz am besten nutzen kann.

Auf der großen Leinwand verliert man das fast immer aus den Augen. Und trifft falsche Entscheidungen. Das Dumme ist, dass Fehler, die an dieser Stelle passieren, in der Regel erst viel später spürbar werden. Wenn beispielsweise die Nutzerzahlen nicht stimmen oder die Website die Erwartungen nicht erfüllt.
Erst beim zweiten Blick, mit ausreichend Abstand, wird klar, dass der Fokus der Informationen vielleicht nicht stimmt oder dass die Besucher einfach nicht finden, was sie suchen.

Das Prinzip “Mobile First” hilft dabei, nicht in diese Falle zu tappen. Und erspart im besten Fall die eine oder andere kostspielige Überarbeitung.

“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 ganz einfache, schlichte HTML-Version für mobile Telefone. 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.

Beim klassischen Verfahren ist es genau umgekehrt: Man beginnt bei den großen Screens 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.

Nix zu sehen, aber lange Ladezeiten

Verkleinert man eine “große” Website so, dass sie auf einen kleinen Bildschirm passt, dann ist zwar wenig zu sehen, aber im Hintergrund werkelt ein technischer Wasserkopf. Die Folge: Die Seite lädt und lädt.
Sämtliche Daten, alle Scripts, alle Bilder sind immer noch da. Bevor die abgespeckte Website zu sehen ist, muss erst Mal der gesamte Overhead durch die Leitung. Bei Funkverbindungen kann das dauern.

Jedes Element, das nachträglich per CSS ausgeblendet wird, wird im Hintergrund geladen. Dasselbe gilt für Scripts, die nicht gebraucht werden. Auch Bilder werden zuerst in ihrer ursprünglichen Größe geladen und erst dann optisch verkleinert.
All das kann man mit Workarounds per JavaScript umgehen. Aber nicht alle Smartphones verstehen JavaScript und MediaQueries sowieso nicht.

Geräte-Funktionen einbeziehen

Mit “Mobile First” kann man mobile Geräte besser nutzbar machen. Smartphones und Tablets brauchen zum Beispiel andere Navigationsprinzipien. Buttons müssen groß genug sein, damit sie mit dem Finger angeklickt werden können, Dropdownmenüs müssen so funktionieren, dass sie nicht vom Hover-Effekt abhängig sind, den es auf mobilen Geräten nicht gibt.
Außerdem kann man spezielle Geräte-Funktionen wie zum Beispiel die Steuerung über Gesten (z.B. Wischen zum Blättern) gezielt ansprechen und ins Designkonzept einbeziehen.

Die Bedürfnisse der “Mobile User”

Die mobile Version einer Website sollte alles bieten, was die Besucher erwarten und suchen. Oft landet man aber auf mobilen Seiten, auf denn die Designer genau das, was man sucht, weggelassen haben.
Mit “Mobile-First” passiert das nicht so leicht. Denn hier ist von Anfang an klar, was der Schwerpunkt der Seite sein soll. Die Chance, dass alle wichtigen Informationen erhalten bleiben und nicht in einer nachträglichen Anpassungsaktion wegrationalisert werden, ist zumindest sehr viel größer.

“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 ganz viel Potenzial verschenken. Abgesehen davon, dass eine Seite mit sehr wenigen – und dadurch relativ großflächigen – Elementen auf einem großen Bildschirm schnell unattraktiv aussieht.

“Mobile-First” ist in meinen Augen kein Designprinzip, es ist ein content-strategischer Ansatz. Das Design setzt nur die inhaltlichen Entscheidungen um.
“Mobile First” zwingt dazu, sich auf die Inhalte zu konzentrieren. Eine solide Strategie dafür entwickelt sich leichter, wenn man “von unten nach oben” denkt und an der Stelle anfängt, wo alles auf das Wesentliche reduziert ist.

Foto: Diego David Garcia via Flickr

---

LINKS

Luke Wroblewski
Mobile First
A Book Apart eBook
9$

Vorträge von Luke Wroblewski (Videos)
Luke Wroblewski’s Talk at Breaking Development 2011 in Dallas
Luke Wroblewski on Designing for Mobile First (Workshop O’Reilly Media 29,90$)

Mobile First Frameworks
320 and up
Gridless

Beispiel-Seiten
mediaqueri.es
Viele schöne Websites im Responsive Design

---

Wie hat Dir der Artikel gefallen?
[kkratings]

---