Anja Putzger unterrichtet seit 4 Jahren Webdesign an einer Berliner Weiterbildungseinrichtung. Jeder neue Kurs beginnt mit derselben Frage an die Teilnehmenden: Was ist der Unterschied zwischen Mobile-First und Responsive Design?
Die haufigste Antwort: gar keiner.
Responsive Design beschreibt das Ergebnis: eine Webseite, die sich an verschiedene Bildschirmgrossen anpasst. Mobile-First beschreibt den Prozess: den Startpunkt des Entwurfs auf kleinen Bildschirmen setzen. Eine Seite kann responsive sein, ohne Mobile-First entwickelt worden zu sein.
Wie der Unterschied sichtbar wird
Anja zeigt ihren Kursteilnehmenden zwei Projekte. Das erste wurde Desktop-first entworfen und spater per CSS-Mediaqueries fur kleine Bildschirme angepasst. Das zweite wurde mit 320 Pixel Breite begonnen und schrittweise erweitert. Beide Seiten sehen auf dem Smartphone ahnlich aus. Aber der Code des ersten Projekts ladt auf mobilen Geraten Ressourcen, die dort nie gebraucht werden, darunter Bilder mit einer Breite von 1400 Pixeln.
Das zweite Projekt ladt im mobilen Netz im Schnitt 2,3 Sekunden schneller. Fur Nutzer mit schlechter Verbindung ist das ein messbarer Unterschied.
Responsive Design sagt nichts uber Ladezeiten aus. Mobile-First, wenn korrekt umgesetzt, sehr wohl.