Perché le landing page si rompono su mobile

Quasi tutto il tuo traffico atterra su landing page mobile

Il traffico a pagamento da Meta, Instagram e TikTok arriva da un telefono, di solito dentro il browser interno dell’app invece che su Safari o Chrome. Quella webview è più piccola di quanto pensi, e cede spazio alle sue barre in alto e in basso. I designer continuano a rivedere le landing page mobile su un monitor da 27 pollici a tutta larghezza, le approvano, e non le aprono mai su un Android di fascia media con il wifi di un hotel. Ormai la versione desktop è l’eccezione. Disegna prima il layout da telefono e lascia che il desktop lo erediti.

L’hero si rompe per primo

Tre colonne si impilano in un nastro alto e vuoto. Un titolo impostato a 64 pixel va a capo su sei righe e spinge il pulsante fuori schermo. L’immagine larga dell’hero si rimpicciolisce finché il prodotto dentro diventa una macchia. Sezioni distanziate a 120 pixel sul desktop lasciano chi è al telefono a scorrere spazi vuoti. E le sezioni a 100vh vengono tagliate dalla barra del browser su iOS, ed è proprio per questo che sono state aggiunte le unità svh e dvh. Imposta scale tipografiche e spaziature separate per il breakpoint del telefono.

I moduli perdono gente un tap alla volta

Apple chiede aree di tocco di almeno 44 per 44 punti, e Material Design ne chiede 48dp. Un sacco di CTA mobile escono ancora alte 32 pixel, con un altro link a sei pixel di distanza. I campi sotto i 16 pixel fanno zoomare Safari su iOS appena ci entri, e il layout si sposta di lato. Il tipo di campo sbagliato tira fuori una tastiera QWERTY completa per un numero di telefono. Poi la tastiera a schermo copre il pulsante di invio, e chi sta compilando non ha idea che il modulo sia finito. Imposta i tipi di campo giusti e gli attributi di autocomplete.

Prova su un telefono vero

Conta cosa copre lo schermo di un telefono su una pagina tipica: un header fisso, un banner cookie, una barra promozionale, una bolla di chat nell’angolo e una CTA fissa in fondo. Insieme si prendono un terzo della viewport prima che compaia qualsiasi contenuto. Scegli un solo elemento persistente e togli gli altri. Poi carica la pagina sul tuo telefono, in rete mobile, partendo dal link vero dell’annuncio, dentro il browser interno dell’app. L’emulazione dispositivi di Chrome non ti farà vedere né la barra della webview né una rete lenta.