Landingpage mobil optimieren: was ihr am Handy prüft, bevor ihr umbaut
Eine Landingpage mobil zu optimieren heißt vor allem: den ersten Bildschirm, die Tippflächen, die Länge, die Reihenfolge und das Formular am Handy prüfen. Dort ist der Bildschirm kleiner und der Daumen ungenauer als eine Maus, und was am Desktop nebeneinander steht, rutscht untereinander.
Stand:
Was ihr am Handy prüft
| Prüfpunkt | Woran ihr ein Problem erkennt | Messbar? |
|---|---|---|
| Erster Bildschirm | Man sieht nicht, was angeboten wird, oder der Knopf liegt unter dem ersten Bildschirm | Teils: ob Hauptüberschrift und Knopf oben stehen, ja; ob man es versteht, nein |
| Tippflächen | Links und Knöpfe sind klein oder liegen dicht nebeneinander, man tippt daneben | Ja |
| Länge | Die Seite wird am Handy viele Bildschirme lang, der nächste Schritt kommt erst spät wieder | Ja |
| Reihenfolge | Ein Beleg, der am Desktop neben dem Knopf steht, landet am Handy weit darunter | Teils |
| Formular | Felder ohne Beschriftung, zu viele Felder, die Tastatur passt nicht zum Feld | Teils: fehlende Beschriftungen, ja |
| Kontrast | Grauer Text auf hellem Grund ist draußen schwer lesbar | Ja |
| Menü und Banner | Cookie-Banner oder Menü verdecken den ersten Bildschirm | Teils |
| Ladezeit | Die Seite baut sich im Mobilfunknetz langsam auf | Ja, aber mit eigenen Werkzeugen wie PageSpeed Insights |
Welche Normen es für Tippflächen und Kontrast gibt
Für Tippflächen verlangt WCAG 2.2 im Erfolgskriterium 2.5.8 (Stufe AA) mindestens 24 × 24 CSS-Pixel oder genug Abstand zu den Nachbarn; Links im Fließtext sind ausgenommen. Apples Richtlinien empfehlen mindestens 44 × 44 pt.
Für den Kontrast verlangt WCAG 2.2 im Erfolgskriterium 1.4.3 (Stufe AA) bei Text mindestens 4,5 : 1, bei großem Text 3 : 1.
Die Normen sind eine Untergrenze. Wer Knöpfe für den Daumen baut, liegt besser darüber, gerade beim wichtigsten Knopf der Seite.
In welcher Reihenfolge ihr vorgeht
- Messt zuerst Aufbau, Tippflächen, Kontrast und Länge am Handy. Das geht schnell und hängt nicht vom Geschmack ab.
- Klärt dann den ersten Bildschirm: zwei bis vier Entwürfe nebeneinander, gelesen von Leuten aus eurer Zielgruppe. Was verstehen sie in fünf Sekunden, wo würden sie tippen?
- Kürzt danach. Was am Desktop als dritte Spalte niemanden stört, ist am Handy ein eigener Bildschirm, und jeder Abschnitt ohne Nutzen schiebt den nächsten Schritt weiter nach unten.
- Zum Schluss entscheidet der Markt: die neue Handy-Fassung gegen die alte, ausgewertet mit euren echten Zahlen, getrennt nach Gerät.
Die Handy-Fassung mit 99takes prüfen
In Claude gebt ihr die Adresse der Seite. 99takes öffnet sie am Desktop und am Handy und misst, was im ersten Bildschirm steht. Dazu kommen Hauptüberschriften, Knöpfe je Bildschirm, Kontrast im Fließtext, Tippflächen, Formularfelder ohne Beschriftung und die Länge. Das kostet 1 Credit und braucht keine Zielgruppe.
Für den ersten Bildschirm vergleicht 99takes zwei bis vier Entwürfe am Handy, als Adresse, als HTML-Entwurf oder als Screenshot, bei einer Handybreite, die ihr einstellt. Personas eurer Zielgruppe sagen, was sie verstehen, wo sie tippen würden und was sie zögern lässt. Das kostet 12 Credits für zwei Entwürfe mit 12 Personas, 24 für vier. Wie die ganze Seite am Handy wirkt, beantwortet der Design-Check: bis 12 Credits, dazu 2 bis 3 für Vorschläge zum Umbau.
Was diese Prüfung nicht ersetzt
- Ladezeit und Core Web Vitals misst PageSpeed Insights von Google, nicht 99takes.
- Eine Aufnahme bei fester Breite zeigt nicht jedes Gerät, jeden Browser und jede eingestellte Schriftgröße.
- Eure echten Zahlen ersetzt sie auch nicht: Wer Traffic hat, sieht in Analytics, getrennt nach Gerät, wo Besucher am Handy abspringen.
Häufige Fragen
Wie groß müssen Knöpfe am Handy sein?
WCAG 2.2 verlangt für Bedienelemente mindestens 24 × 24 CSS-Pixel oder genug Abstand (Stufe AA). Apples Richtlinien empfehlen mindestens 44 × 44 pt. Für den wichtigsten Knopf der Seite lohnt es sich, darüber zu liegen. Prüft auch den Abstand zu benachbarten Links, sonst trifft der Daumen leicht den falschen.
Wie lang darf eine Landingpage am Handy sein?
Eine feste Grenze gibt es nicht. Entscheidend ist, ob jeder Bildschirm etwas beiträgt und ob der nächste Schritt immer wieder erreichbar ist. Die Länge in Bildschirmen zu messen, zeigt, wie weit Leser scrollen müssen.
Prüft 99takes auch die Ladezeit?
Nein. Dafür gibt es PageSpeed Insights von Google. 99takes misst Aufbau, Tippflächen, Kontrast und Länge und lässt Personas eurer Zielgruppe die Seite am Handy ansehen und lesen.
Kann ich einen Handy-Entwurf prüfen, der noch nicht online ist?
Ja, für den ersten Bildschirm und den Design-Check als HTML-Entwurf oder als Screenshot. Die Messung des Aufbaus braucht eine öffentlich erreichbare Adresse.
Weiterlesen
Eure Seite am Handy messen lassen
Konto anlegen, 99takes in Claude verbinden und die Adresse eurer Seite nennen.
Kostenlos starten