Waarom mobiele landing pages stukgaan

Het grootste deel van je verkeer komt binnen op mobiel

Betaald verkeer van Meta, Instagram en TikTok komt binnen op een telefoon, meestal in de browser van de app zelf in plaats van in Safari of Chrome. Die webview is kleiner dan je denkt, en hij staat schermruimte af aan zijn eigen balken boven en onder. Ontwerpers bekijken mobiele landing pages nog steeds op een 27-inchmonitor op volle breedte, keuren ze goed, en openen ze nooit op een middenklasse-Android op hotelwifi. De desktopversie is inmiddels de uitzondering. Ontwerp eerst de indeling voor de telefoon en laat desktop daaruit volgen.

De hero gaat als eerste stuk

Drie kolommen stapelen zich op tot een hoog lint met niets erin. Een kop van 64 pixels loopt door tot zes regels en duwt de knop van het scherm af. De brede hero-afbeelding schaalt terug tot het product erin een vlek wordt. Secties met 120 pixels ruimte op desktop laten een telefoongebruiker door lege gaten scrollen. En secties van 100vh worden op iOS afgeknipt door de browserbalk, en daar zijn de eenheden svh en dvh voor bedacht. Stel aparte typografieschalen en witruimte in voor het breakpoint van de telefoon.

Formulieren verliezen mensen, tik voor tik

Apple vraagt om tapgebieden van minstens 44 bij 44 punten, en Material Design vraagt om 48dp. Er gaan nog steeds genoeg mobiele cta’s live met een hoogte van 32 pixels en een andere link op zes pixels afstand. Velden onder 16 pixels laten iOS Safari inzoomen zodra je erin klikt, en dan schuift de hele indeling opzij. Het verkeerde invoertype geeft je een volledig qwerty-toetsenbord voor een telefoonnummer. Daarna dekt het toetsenbord op het scherm de verstuurknop af, en heeft je bezoeker geen idee dat het formulier af is. Zet de juiste invoertypes en autocomplete-attributen.

Test op een echte telefoon

Tel eens op wat er op een gemiddelde pagina over een telefoonscherm ligt: een sticky header, een cookiebanner, een promobalk, een chatbubbel in de hoek en een sticky cta onderaan. Samen kunnen die een derde van de viewport innemen voordat er ook maar één stuk inhoud verschijnt. Kies één element dat blijft staan en gooi de rest eruit. Laad de pagina daarna op je eigen telefoon, via mobiele data, via de echte advertentielink, in de in-app browser van die app. De apparaatemulatie in Chrome laat je geen webview-balk zien en ook geen traag netwerk.