Warum Landing Pages auf dem Handy kaputtgehen

Der meiste Traffic landet auf mobilen Landing Pages

Bezahlter Traffic von Meta, Instagram und TikTok kommt auf dem Handy an, meistens im eigenen Browser der App statt in Safari oder Chrome. Diese Webview ist kleiner, als du denkst, und sie gibt Bildschirmfläche an ihre eigenen Leisten oben und unten ab. Designer prüfen mobile Landing Pages trotzdem auf einem 27-Zoll-Monitor in voller Breite, geben sie frei und öffnen sie nie auf einem Mittelklasse-Android im Hotel-WLAN. Die Desktop-Version ist heute der Sonderfall. Gestalte zuerst das Layout fürs Handy und lass den Desktop davon erben.

Die Hero Section geht zuerst kaputt

Drei Spalten stapeln sich zu einem hohen Band aus Nichts. Eine Überschrift in 64 Pixel bricht auf sechs Zeilen um und schiebt den Button aus dem Bild. Das breite Hero-Bild skaliert so weit herunter, bis das Produkt darin zum Fleck wird. Abstände von 120 Pixel auf dem Desktop lassen einen Handy-Nutzer durch leere Lücken scrollen. Und 100vh-Abschnitte werden auf iOS von der Browserleiste abgeschnitten, wofür die Einheiten svh und dvh eingeführt wurden. Leg für den Handy-Breakpoint eigene Schriftgrößen und Abstände fest.

Formulare verlieren Leute, ein Tap nach dem anderen

Apple verlangt Tap-Flächen von mindestens 44 mal 44 Punkten, Material Design verlangt 48 dp. Trotzdem gehen jede Menge mobile CTAs mit 32 Pixel Höhe live, und sechs Pixel daneben sitzt der nächste Link. Eingabefelder unter 16 Pixel bringen iOS Safari beim Antippen zum Zoomen, was das Layout zur Seite kippt. Der falsche Eingabetyp liefert bei einer Telefonnummer eine volle Schreibtastatur. Danach verdeckt die eingeblendete Tastatur den Absende-Button, und dein Besucher merkt nicht, dass das Formular fertig ist. Setz die richtigen Eingabetypen und autocomplete-Attribute.

Teste auf einem echten Handy

Zähl mal, was auf einer typischen Seite den Handy-Bildschirm zudeckt: ein Sticky-Header, ein Cookie-Banner, eine Aktionsleiste, eine Chat-Bubble in der Ecke und ein Sticky-CTA im Footer. Zusammen nehmen sie ein Drittel des Viewports weg, bevor überhaupt Inhalt kommt. Nimm ein dauerhaftes Element und wirf den Rest raus. Lade die Seite dann auf deinem eigenen Handy, über Mobilfunk, aus dem echten Anzeigenlink, im In-App-Browser der App. Die Geräte-Emulation in Chrome zeigt dir weder die Webview-Leiste noch ein langsames Netz.