Mobile-First beim Relaunch: die Website vom Smartphone her denken

Schauen Sie sich einmal an, womit Ihre Besucher auf Ihre Website kommen. Bei den meisten Seiten ist die Antwort eindeutig: überwiegend mit dem Smartphone. Und trotzdem werden noch immer Websites zuerst für den großen Bildschirm entworfen und erst danach notdürftig fürs Handy zurechtgestutzt. Das Ergebnis fühlt sich dort auch so an, gequetscht, umständlich, langsam. Mobile-First dreht diese Reihenfolge um: Man entwirft zuerst für den kleinen Bildschirm und erweitert dann nach oben. Das klingt nach einem technischen Detail, ist aber eine Haltung, die der Realität der Besucher folgt statt der Bequemlichkeit des Gestalters. Dieser Beitrag erklärt, was dahintersteckt und worauf es beim Relaunch ankommt. Den Gesamtrahmen gibt unser Leitfaden zum Website-Relaunch.

Was Mobile-First bedeutet

Mobile-First heißt, eine Website von vornherein für das Smartphone zu denken und erst danach für größere Bildschirme zu erweitern, statt umgekehrt. Der Unterschied ist nicht nur die Reihenfolge im Werkzeug, sondern die Reihenfolge im Kopf: Was ist so wichtig, dass es auch auf den wenigen Quadratzentimetern eines Handydisplays Platz haben muss? Diese Frage zwingt zur Konzentration auf das Wesentliche. Wer dagegen am großen Bildschirm beginnt, hat Platz im Überfluss, füllt ihn, und steht später vor dem Problem, all das auf das kleine Display zu pressen.

Warum das die richtige Reihenfolge ist

Eine Beschränkung ist beim Gestalten oft ein Geschenk. Der knappe Platz des Smartphones erzwingt Entscheidungen: Was muss zuerst sichtbar sein, was darf weiter unten stehen, was kann ganz weg? Diese Disziplin kommt am Ende auch der Variante für den großen Bildschirm zugute, weil sie das Unwichtige aussortiert hat, bevor es überhaupt Platz fand. Der umgekehrte Weg (vom großen zum kleinen Bildschirm) bedeutet dagegen, ein üppiges Gebilde immer weiter zusammenzuschieben, bis es irgendwie passt. Das Ergebnis ist selten gut. Mobile-First ist deshalb kein Verzicht, sondern eine Methode, zum Kern zu kommen.

Responsive ist nicht dasselbe wie Mobile-First

Zwei Begriffe werden oft verwechselt. „Responsive" beschreibt eine Technik: Die Seite passt sich der Bildschirmgröße an, ordnet sich um, skaliert mit. „Mobile-First" beschreibt eine Reihenfolge und eine Priorität: Man beginnt beim kleinen Bildschirm. Eine Seite kann responsive sein und trotzdem für das Handy schlecht gemacht, wenn sie vom großen Bildschirm her gedacht wurde. Erst beides zusammen ergibt eine Seite, die sich überall richtig anfühlt, anpassungsfähig in der Technik und vom Mobilen her gedacht in der Gestaltung.

Was auf dem kleinen Bildschirm anders ist

Das Smartphone wird nicht mit der Maus bedient, sondern mit dem Daumen, und das ändert vieles. Bedienelemente müssen groß genug sein, um sie zuverlässig zu treffen, und dort liegen, wo der Daumen sie bequem erreicht. Es gibt kein Überfahren mit dem Mauszeiger, das auf dem Desktop Zusatzinformationen einblendet; alles muss durch Antippen erreichbar sein. Texte müssen ohne Zoomen lesbar sein. Und der Inhalt wird gescrollt, nicht überblickt, das Wichtigste gehört nach oben, weil viele nie bis zum Ende scrollen. Wer eine Seite mobil denkt, denkt automatisch in diesen Bahnen. Hinzu kommt die Frage der Reihenfolge: Auf dem schmalen Display steht alles untereinander, eines nach dem anderen, und der Besucher entscheidet in den ersten Sekunden, ob er weiterscrollt. Was zählt, gehört deshalb nach oben, die wichtigste Aussage, der Weg zum Kontakt, der eine Knopf, auf den es ankommt. Diese erzwungene Priorisierung ist anstrengender als das großzügige Verteilen auf einer breiten Fläche, aber sie schärft die ganze Seite.

Tempo zählt auf dem Handy doppelt

Auf dem Smartphone ist Geschwindigkeit noch wichtiger als am Schreibtisch. Mobile Verbindungen sind unterwegs oft langsamer und unbeständiger, und die Geduld ist kürzer, wenn man zwischen Tür und Angel etwas nachschaut. Eine Seite, die mobil zu langsam lädt, verliert ihre Besucher, bevor sie erscheint. Genau deshalb misst Google die Ladeerfahrung (die Core Web Vitals) besonders mit Blick auf die mobile Nutzung. Schlanke Bilder, wenig überflüssiges Beiwerk und sauberes Bauen zahlen sich mobil am stärksten aus. Wie Tempo und Barrierefreiheit zusammenhängen, vertieft der Beitrag Barrierefreiheit und Tempo beim Relaunch.

Auch Google schaut zuerst aufs Handy

Ein Punkt, der oft unterschätzt wird: Google bewertet Websites inzwischen vorrangig anhand ihrer mobilen Fassung. Was auf dem Smartphone fehlt oder schlecht funktioniert, wirkt sich auf die Sichtbarkeit insgesamt aus, nicht nur für Handy-Nutzer. Eine Seite, deren mobile Version eine abgespeckte Notlösung ist, verschenkt damit auch ihre Auffindbarkeit. Mobile-First ist also nicht nur eine Frage der Höflichkeit gegenüber Handy-Besuchern, sondern direkt mit der Sichtbarkeit bei Google verknüpft.

Die häufigsten Mobile-Fehler

Einige Fehler begegnen einem immer wieder. Zu kleine Schrift, die zum Zoomen zwingt. Bedienelemente, die so eng beieinanderliegen, dass man danebentippt. Aufdringliche Einblendungen, die den halben Bildschirm verdecken und sich kaum schließen lassen. Inhalte, die seitlich aus dem Bild ragen und horizontales Scrollen erzwingen. Formulare, die auf dem Handy zur Qual werden. Jeder dieser Fehler vertreibt Besucher, und jeder entsteht fast zwangsläufig, wenn eine Seite vom großen Bildschirm her gedacht und nur grob fürs Handy angepasst wird.

Auf echten Geräten testen

Wie eine Seite sich auf dem Handy anfühlt, lässt sich am Schreibtisch nur ahnen. Deshalb gehört zum Relaunch der Test auf echten Geräten, verschiedene Smartphones, verschiedene Bildschirmgrößen, idealerweise auch eine langsamere Verbindung. Erst dort zeigt sich, ob der Daumen die Knöpfe trifft, ob die Seite zügig lädt, ob das Lesen angenehm ist. Was am großen Monitor in der Vorschau gut aussieht, kann auf dem realen Gerät hakeln. Dieser Test ist Teil der Prüfung vor dem Go-Live, die der Beitrag Staging und Test vor dem Go-Live behandelt.

Der Relaunch als Umstieg auf Mobile-First

Für viele bestehende Seiten ist der Relaunch der Moment, vom alten Desktop-Denken auf Mobile-First umzusteigen. Eine Seite, die vor Jahren für den großen Bildschirm gebaut wurde, lässt sich selten elegant nachbessern, die mobile Schwäche steckt in ihrer Anlage. Der Neubau dagegen kann von Grund auf mobil gedacht werden, und das merkt man jeder Seite an. Auch die Navigation profitiert davon, vom kleinen Bildschirm her geplant zu werden, wie der Beitrag Navigation und Informationsarchitektur zeigt.

Was das für Sie heißt

Mobile-First ist keine Modeerscheinung, sondern die schlichte Anerkennung dessen, womit Ihre Besucher tatsächlich kommen. Wer eine Seite vom Smartphone her denkt, baut fast automatisch eine klarere, schnellere, fokussiertere Seite, auch für den großen Bildschirm. Wir entwerfen Websites deshalb von vornherein mobil und erweitern nach oben, statt das Handy als Nachgedanken zu behandeln. Der ehrliche erste Schritt ist ein Blick auf die eigene Seite mit dem Smartphone in der Hand: Findet man dort schnell und bequem, wofür man gekommen ist, oder merkt man der Seite an, dass sie für einen anderen Bildschirm gebaut wurde? Dieser kurze Selbstversuch sagt oft mehr als jede Statistik, denn so, wie sich die Seite für Sie anfühlt, fühlt sie sich auch für den Großteil Ihrer Besucher an.

Sie wollen eine Seite, die auf dem Smartphone überzeugt? Wir denken jeden Relaunch mobil, mehr über uns.