„Mobile First“ – Responsive Design von unten

Dieser Artikel ist ursprünglich am 12. 01. 2012 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

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 eine Website nur angepasst werden soll und kein komplettes Redesign bekommen soll.

Wenn aber tatsächlich ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist die „Mobile-First“-Methode der richtige 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 können interessante Fragen auftauchen: 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. Es geht um diese 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 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 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.

Nix zu sehen, aber lange Ladezeiten

Beim klassischen Verfahren wäre 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.

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 und müssen geladen werden. Auch dann wenn sie ausgeblendet sind oder nicht gebraucht werden. Bevor die abgespeckte Website zu sehen ist, muss ALLES durch die Leitung. Bei Funkverbindungen kann das dauern.

„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.


LINKS

Mobile FirstLuke 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]


Ein Kommentar zu “„Mobile First“ – Responsive Design von unten

Die Kommentare sind geschlossen.