Mobile First Webdesign: Warum das Handy zuerst kommt

Die meisten Websites entstehen bis heute in derselben Reihenfolge: Zuerst wird die große Fassung für den Bildschirm gezeichnet, mit breitem Kopfbereich, drei Spalten und einer Menüleiste. Ganz am Schluss fragt jemand, wie das Ganze auf dem Handy aussieht — und dann wird gestaucht, gequetscht und ausgeblendet.

Mobile First Webdesign dreht diese Reihenfolge um. Der Entwurf beginnt beim kleinsten Bildschirm und wächst nach oben. Das klingt nach einem Detail für Gestalter, ist aber eine geschäftliche Entscheidung: Es verändert, welche Inhalte überhaupt auf die Seite kommen — und es entscheidet mit darüber, wie Google Ihre Seite bewertet.

Der Unterschied zum oft genannten Begriff „responsiv“ ist wichtig. Responsiv heißt, dass sich eine Seite an die Bildschirmbreite anpasst. Mobile First heißt, in welcher Reihenfolge man sie entwirft. Man kann eine responsive Seite bauen, die auf dem Handy trotzdem unbrauchbar ist.

Google bewertet die Handy-Fassung Ihrer Seite

Das ist die Tatsache, die dem Thema sein Gewicht gibt. Google erfasst Websites vorrangig so, wie sie einem Besucher mit dem Smartphone erscheinen. Was auf der Handy-Fassung nicht vorhanden ist, existiert für die Bewertung praktisch nicht.

Die Folge ist unangenehm für alle, die es sich früher einfach gemacht haben. Wer Textblöcke auf dem kleinen Bildschirm ausblendet, weil sie stören, blendet sie auch für die Suchmaschine aus. Wer die Handy-Fassung auf eine dünne Kurzversion eindampft, bewirbt sich bei Google mit dieser Kurzversion.

Dazu kommt der zweite Hebel: Die Messwerte, an denen Google die Nutzererfahrung festmacht, werden ebenfalls mit den Bedingungen eines Handys erhoben — also mit weniger Rechenleistung und langsamerer Verbindung als im Büro. Eine Seite, die auf dem Rechner in einer Sekunde steht, kann dort deutlich schlechter abschneiden.

Mobile First Webdesign statt „sieht auf dem Handy auch okay aus“

Diesen Satz hören wir oft, und er stimmt meistens sogar. Die Seite ist nicht kaputt. Nichts überlappt, nichts ragt heraus. Sie ist nur nicht für das Handy gemacht, sondern für das Handy zurechtgebogen — und der Unterschied zeigt sich nicht im Aussehen, sondern in der Reihenfolge.

Wenn eine dreispaltige Fläche auf dem Handy zu drei Blöcken untereinander wird, entsteht daraus eine Reihenfolge, die vorher niemand entschieden hat. Der Besucher liest dann zuerst das Referenzlogo, dann den Firmenslogan und irgendwann, weit unten, was Sie eigentlich anbieten. Auf dem großen Bildschirm stand das nebeneinander und war gleichzeitig sichtbar.

Ein zweites Erkennungszeichen: Auf dem Handy ist der sichtbare Bereich ohne Scrollen sehr klein. Was dort steht, entscheidet, ob jemand bleibt. Wenn diese Fläche von einem großen Kopfbild, einem Zustimmungsfenster und einer Sprechblase belegt ist, bleibt für Ihre Aussage nichts übrig.

Was auf kleinen Bildschirmen zuerst weg muss

Der wertvollste Teil von Mobile First ist der Zwang zur Entscheidung. Auf einer breiten Fläche kann man alles unterbringen und muss nie Prioritäten setzen. Auf einem Handybildschirm geht das nicht. Was hier fast immer als Erstes fällt:

• Dekorative Bilder ohne Aussage. Das Symbolfoto vom Händedruck kostet Ladezeit und Platz und sagt nichts, was der Text nicht besser sagt.
• Mehrfach wiederholte Kontaktknöpfe. Einer, der immer erreichbar ist, ersetzt fünf verstreute.
• Lange Vorreden. Der erste Satz muss benennen, was Sie tun und für wen — nicht die Firmengeschichte einleiten.
• Große Kopfbereiche. Ein Logo, das ein Drittel des Bildschirms belegt, verschiebt jede Aussage nach unten.
• Breite Tabellen. Preisübersichten mit sechs Spalten funktionieren auf dem Handy nur, wenn sie in einzelne Blöcke zerlegt werden.

Das Interessante daran: Fast alles, was auf dem Handy im Weg ist, war auch auf dem großen Bildschirm überflüssig. Man hat es dort nur nicht gemerkt, weil Platz war. Deshalb wird eine Seite, die vom Handy her entworfen wurde, in der Regel auch am Rechner klarer.

Bedienbarkeit mit dem Daumen

Am Rechner arbeitet der Besucher mit einem Zeiger, der pixelgenau trifft. Am Handy arbeitet er mit einem Daumen, oft einhändig, oft in Bewegung, manchmal mit Handschuhen auf der Baustelle. Das verändert die Anforderungen an jedes anklickbare Element.

Praktisch bedeutet das: Knöpfe brauchen eine Mindestgröße, die man auch unruhig trifft, und Abstand zueinander, damit man nicht versehentlich den Nachbarn erwischt. Zwei Textlinks direkt untereinander sind auf dem Handy eine Falle. Und der wichtigste Knopf gehört in den unteren Bereich des Bildschirms, weil der Daumen dort von selbst liegt — nicht in die obere rechte Ecke, wohin er sich strecken muss.

Genauso wichtig sind Zustände, die man am Rechner gar nicht kennt. Es gibt kein Überfahren mit der Maus. Alles, was erst beim Darüberfahren erscheint, existiert auf dem Handy nicht. Wer sein Untermenü so gebaut hat, hat auf dem Handy schlicht kein Untermenü.

Warum Menüs die häufigste Schwachstelle sind

Wenn wir eine bestehende Seite prüfen, ist das Menü der Punkt, an dem am häufigsten etwas nicht stimmt. Das hat einen einfachen Grund: Am Rechner sind alle Bereiche gleichzeitig sichtbar, am Handy stecken sie hinter einem Symbol. Aus einer Übersicht wird eine Tür, die man erst öffnen muss.

Die typischen Fehler sind immer dieselben: Das Menü öffnet sich langsam oder gar nicht, weil es an einem Skript hängt, das noch lädt — ein Problem, das direkt mit der Ladezeit durch JavaScript zusammenhängt. Oder es öffnet sich, füllt aber den Bildschirm mit vierzehn Einträgen ohne Ordnung. Oder es lässt sich nicht mehr schließen, weil das Schließkreuz außerhalb des sichtbaren Bereichs liegt.

Ein gutes Handy-Menü hat wenige, verständlich benannte Einträge, öffnet sofort, lässt sich mit einer Hand schließen und macht sichtbar, wo man sich gerade befindet. Diese Ordnung ist keine Gestaltungsfrage, sondern eine Frage der Struktur — sie steckt bereits im HTML, das die Bedeutung der Inhalte festlegt.

Was Mobile First Webdesign im Ablauf ändert

Für Sie als Auftraggeber ändert sich vor allem, was Sie zuerst zu sehen bekommen. Bei einem Entwurf nach Mobile-First-Prinzip liegt Ihnen die schmale Fassung als Erstes vor. Das fühlt sich ungewohnt an, weil sie klein und nüchtern wirkt — und genau das ist der Sinn: Wenn die Aussage in dieser Fassung trägt, trägt sie überall.

Der zweite Unterschied liegt in der Abnahme. Sie sollte nicht am Konferenzbildschirm stattfinden, sondern auf zwei, drei echten Geräten. Die Gestaltungsregeln, die dabei greifen, sind dieselben, die auch die Darstellung auf jedem Gerät steuern — der Entwurf entscheidet nur, in welcher Richtung sie gedacht wurden.

Und der dritte Unterschied betrifft die Frage, wann sich eine Überarbeitung überhaupt lohnt. Eine Seite, die am Handy scheitert, scheitert an ihrem wichtigsten Publikum. Das ist eines der klareren Anzeichen dafür, dass ein Relaunch fällig ist.

Häufige Fragen

Meine Kunden sitzen am Schreibtisch — brauche ich Mobile First trotzdem?

Ja, aus zwei Gründen. Erstens bewertet Google die Handy-Fassung unabhängig davon, wer Ihre Kunden sind. Zweitens beginnt auch im geschäftlichen Umfeld die Suche oft unterwegs — und die Entscheidung, ob jemand Sie in die engere Wahl nimmt, fällt häufig schon dort.

Braucht man eine eigene mobile Website?

Nein, und das wäre auch keine gute Idee. Getrennte Fassungen bedeuten doppelte Pflege, und in der Praxis läuft eine davon immer hinterher. Der heutige Weg ist eine einzige Seite mit einer einzigen Adresse, die sich anpasst — entworfen vom kleinen Bildschirm aufwärts.

Darf ich auf dem Handy Inhalte ausblenden, damit es aufgeräumter wirkt?

Vorsichtig. Inhalte, die nur auf dem großen Bildschirm erscheinen, werden für die Bewertung schwächer gewichtet. Zulässig und sinnvoll ist es, Inhalte einzuklappen — der Besucher kann sie öffnen, und sie sind trotzdem in der Seite vorhanden. Der Unterschied zwischen „zusammengeklappt“ und „nicht vorhanden“ ist hier entscheidend.

Wie prüfe ich meine eigene Seite in fünf Minuten?

Halten Sie Ihr Handy einhändig und rufen Sie Ihre Startseite auf. Zählen Sie, wie oft Sie wischen müssen, bis Sie lesen, was Sie anbieten. Öffnen und schließen Sie das Menü nur mit dem Daumen. Versuchen Sie zuletzt, ohne Umweg eine Anfrage zu starten — wenn eines davon hakt, haben Sie Ihre Prioritätenliste.

Was Sie jetzt tun können

Machen Sie den Fünf-Minuten-Test von oben und geben Sie Ihr Handy anschließend einer Person, die Ihre Seite nicht kennt. Bitten Sie sie, eine Anfrage zu stellen, und sagen Sie nichts dazu. Was diese Person nicht findet, findet Ihr Kunde auch nicht.

Wenn dabei mehr auffällt als Kleinigkeiten, ist der Neuentwurf vom Handy her meist der ehrlichere Weg als das Nachbessern an zwanzig Stellen. Bei jeder Website, die wir erstellen, beginnen wir mit der schmalen Fassung — und erst danach mit der breiten.