99takes
Ratgeber Handy

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.

Kostenlos starten 350 Credits zum Start, keine Zahlungsdaten

Stand:

Was ihr am Handy prüft

PrüfpunktWoran ihr ein Problem erkenntMessbar?
Erster BildschirmMan sieht nicht, was angeboten wird, oder der Knopf liegt unter dem ersten BildschirmTeils: ob Hauptüberschrift und Knopf oben stehen, ja; ob man es versteht, nein
TippflächenLinks und Knöpfe sind klein oder liegen dicht nebeneinander, man tippt danebenJa
LängeDie Seite wird am Handy viele Bildschirme lang, der nächste Schritt kommt erst spät wiederJa
ReihenfolgeEin Beleg, der am Desktop neben dem Knopf steht, landet am Handy weit darunterTeils
FormularFelder ohne Beschriftung, zu viele Felder, die Tastatur passt nicht zum FeldTeils: fehlende Beschriftungen, ja
KontrastGrauer Text auf hellem Grund ist draußen schwer lesbarJa
Menü und BannerCookie-Banner oder Menü verdecken den ersten BildschirmTeils
LadezeitDie Seite baut sich im Mobilfunknetz langsam aufJa, 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

Quellen (abgerufen am )

  1. W3C: Understanding Success Criterion 2.5.8, Target Size (Minimum)
  2. W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
  3. Apple Human Interface Guidelines: Accessibility
  4. Google: PageSpeed Insights