Die meisten Websites werden am Rechner entworfen, auf einem Bildschirm mit anderthalb Metern Diagonale, und danach für das Handy zurechtgestutzt. Besucht werden sie dann zu drei Vierteln vom Handy, oft unterwegs, mit einer Hand, bei schlechtem Empfang.
Mobile First dreht die Reihenfolge um. Nicht als Technikentscheidung, sondern als Entscheidung darüber, was wichtig genug ist, um auf einen kleinen Bildschirm zu kommen. Wer mit 390 Pixeln Breite anfängt, muss sich früh festlegen, und genau das macht die Seite besser.
Das Wichtigste in Kürze
Die Reihenfolge ist entscheidend: erst das Handy entwerfen, dann den großen Bildschirm auffüllen.
Was auf dem Handy nicht in die ersten zwei Bildschirmhöhen passt, wird von den meisten nie gesehen.
Ladezeit ist auf dem Handy ein Inhaltsproblem, kein Technikproblem.
Tippziele unter 44 Pixeln Kantenlänge werden regelmäßig danebengetippt.
Google bewertet seit Jahren die mobile Fassung einer Seite, nicht die für den Rechner.
Warum die Reihenfolge den Unterschied macht
Wer am großen Bildschirm beginnt, hat Platz für alles: drei Spalten nebeneinander, ein großes Bild, eine Navigation mit neun Punkten, drei Handlungsaufforderungen. Beim Übertragen auf das Handy wird all das untereinander gestapelt. Aus einer übersichtlichen Seite werden vier Bildschirmhöhen Scrollstrecke, bevor überhaupt etwas Konkretes kommt.
Beginnt man umgekehrt, muss man sich sofort entscheiden. Was steht ganz oben? Welche eine Handlung soll der Besucher ausführen? Diese Entscheidung ist unbequem, und sie ist der eigentliche Gewinn. Der große Bildschirm verzeiht Unentschlossenheit, der kleine nicht.
Praxistipp: Halten Sie Ihre eigene Seite auf dem Handy hoch und zählen Sie, wie oft Sie wischen müssen, bis die Telefonnummer erscheint. Alles über zwei Mal ist zu viel.
Was in die ersten beiden Bildschirmhöhen gehört
Auf 390 Pixeln Breite und ungefähr 700 Pixeln Höhe passt erstaunlich wenig. Diese Fläche entscheidet trotzdem darüber, ob jemand bleibt. Hinein gehören vier Dinge:
Was Sie anbieten, in einem Satz ohne Fachbegriffe
Für wen und wo, damit die Zuordnung sofort klingt
Eine Handlung: anrufen, schreiben, Termin buchen
Ein Beleg, der das Versprechen stützt, etwa eine Bewertung oder eine Zahl
Alles andere, die Firmengeschichte, das Team, die Auszeichnungen, kommt danach. Nicht weil es unwichtig wäre, sondern weil es die Entscheidung nicht auslöst.
Ladezeit ist auf dem Handy ein Inhaltsproblem
Im WLAN fällt ein 4 Megabyte großes Hintergrundbild nicht auf. Im Mobilfunknetz auf dem Land dauert es sechs Sekunden, und in diesen sechs Sekunden ist der Besucher weg. Die häufigsten Bremsen sind nicht exotisch:
Bilder in Originalgröße aus der Kamera, oft mehrere Megabyte
Schriften, die von fremden Servern nachgeladen werden
Videos, die im Hintergrund automatisch starten
Werkzeuge für Analyse, Chat und Einwilligung, die alle gleichzeitig laden
Praxistipp: Prüfen Sie Ihre Startseite einmal mit gedrosselter Verbindung. In den Entwicklerwerkzeugen jedes Browsers lässt sich eine langsame Verbindung simulieren. Was dann passiert, erleben Ihre Kunden täglich.
Tippen ist ungenauer als Klicken
Ein Mauszeiger ist ein Pixel groß, eine Fingerkuppe ungefähr vierzig. Deshalb gelten für Schaltflächen auf dem Handy andere Regeln als am Rechner. Als Faustwert haben sich 44 mal 44 Pixel etabliert, mit genügend Abstand zum nächsten Element.
Besonders unangenehm sind zwei Fehler: Links, die direkt untereinander stehen und sich fast berühren, und Schaltflächen ganz oben am Bildschirmrand, die man mit einer Hand nicht erreicht. Das Wichtigste gehört in die untere Hälfte, dorthin, wo der Daumen von selbst hinkommt.
Formulare sind der häufigste Absprungpunkt
Jedes zusätzliche Feld kostet Anfragen. Auf dem Handy gilt das doppelt, weil Tippen mühsam ist. Ein Kontaktformular für einen lokalen Betrieb braucht selten mehr als drei Felder: Name, Erreichbarkeit, Anliegen.
Dazu kommen technische Kleinigkeiten mit großer Wirkung: das richtige Tastaturfeld für Telefonnummern und E-Mail-Adressen, automatische Vervollständigung erlauben, und keine Pflichtfelder, deren Sinn sich dem Besucher nicht erschließt.
Praxistipp: Bieten Sie neben dem Formular immer einen zweiten Weg an. Viele Menschen rufen lieber an oder schreiben eine Nachricht, als ein Formular auszufüllen.
Was Google daraus macht
Google bewertet seit Jahren vorrangig die mobile Fassung einer Seite. Was auf dem Handy fehlt, existiert für die Bewertung praktisch nicht, auch wenn es am Rechner sichtbar ist. Das betrifft besonders Inhalte, die auf kleinen Bildschirmen ausgeblendet werden.
Dazu kommen die Kennzahlen zur Nutzererfahrung: wie schnell der erste sichtbare Inhalt erscheint, wie stark das Layout beim Laden springt und wie schnell die Seite auf die erste Berührung reagiert. Alle drei sind auf dem Handy schlechter als am Rechner, und alle drei lassen sich mit weniger Ballast verbessern.
Wichtige Erkenntnisse
Punkt | Was zu tun ist |
Reihenfolge | Erst die Handyfassung entwerfen, dann erweitern |
Oben | Angebot, Ort, Handlung und ein Beleg in die ersten zwei Bildschirmhöhen |
Bilder | Vor dem Hochladen verkleinern, kein Motiv über 300 Kilobyte |
Bedienung | Tippziele mindestens 44 Pixel, Wichtiges in die untere Hälfte |
Formulare | Drei Felder genügen, dazu immer ein zweiter Kontaktweg |
Was das in der Praxis heißt
Mobile First ist keine Technikentscheidung, die man an eine Agentur delegiert, sondern eine inhaltliche. Die Frage lautet nicht, wie sich das Layout anpasst, sondern was wichtig genug ist, um auf den kleinen Bildschirm zu kommen.
Wer das einmal ernsthaft durchdenkt, hat danach auch eine bessere Seite für den Rechner. Der umgekehrte Weg funktioniert nicht: Aus einer überladenen Seite für den großen Bildschirm wird durch Stapeln keine gute Handyseite.
Wie wir das machen
Wir bauen Seiten von der Handyfassung aus und prüfen jede Änderung auf drei Bildschirmbreiten, bevor sie live geht. Die laufende Betreuung sorgt dafür, dass es auch nach dem Start so bleibt.
Was das kostet, steht offen auf der Paketseite. Wenn Sie wissen wollen, wie Ihre Seite heute auf dem Handy dasteht, sehen wir uns das im Erstgespräch gemeinsam an.
Nützliche Quellen
Häufige Fragen
Brauche ich eine eigene mobile Website?
Nein. Eine Seite, die sich an die Bildschirmbreite anpasst, ist heute Standard und einer getrennten mobilen Fassung überlegen, weil nur eine Seite gepflegt werden muss.
Wie teste ich meine Seite richtig?
Auf einem echten Gerät, nicht nur im verkleinerten Browserfenster. Am besten auf einem älteren Telefon und außerhalb des eigenen WLAN.
Ist eine App die bessere Lösung?
Für die allermeisten lokalen Betriebe nicht. Eine App muss installiert werden, eine Website nicht. Der Aufwand steht selten im Verhältnis.
Was ist mit älteren Besuchern?
Für sie zählt vor allem Schriftgröße und Kontrast. Unter 16 Pixel Grundschrift wird es für viele mühsam, und graue Schrift auf hellgrauem Grund ist der häufigste Fehler.
Passend dazu
Wie eine Seite entsteht, die auf dem Handy funktioniert, steht im Paket Rheinseiten. Passend dazu: Ladezeit verbessern.
