Pourquoi les landing pages cassent sur mobile

La majorité de votre trafic arrive sur mobile

Le trafic payant venu de Meta, Instagram et TikTok arrive sur un téléphone, en général dans le navigateur intégré à l’application plutôt que dans Safari ou Chrome. Cette webview est plus petite que vous ne le pensez, et elle sacrifie de l’écran à ses propres barres du haut et du bas. Les designers continuent de relire les landing pages mobiles sur un écran de 27 pouces en pleine largeur, de les valider, et de ne jamais les ouvrir sur un Android de milieu de gamme connecté au wifi d’un hôtel. Aujourd’hui, c’est la version desktop qui est l’exception. Dessinez d’abord la mise en page téléphone et laissez le desktop en hériter.

Le hero casse en premier

Trois colonnes s’empilent en un long ruban de vide. Un titre réglé à 64 pixels part sur six lignes et pousse le bouton hors de l’écran. La grande image du hero rétrécit jusqu’à transformer le produit en tache. Des sections espacées de 120 pixels sur desktop laissent le visiteur mobile scroller dans des trous vides. Et les sections en 100vh se font couper par la barre du navigateur sur iOS, ce que les unités svh et dvh sont venues corriger. Réglez des échelles typographiques et des espacements à part pour le point de rupture téléphone.

Les formulaires perdent les gens un clic à la fois

Apple demande des zones tactiles d’au moins 44 sur 44 points, et Material Design en demande 48 dp. Beaucoup de CTA mobiles sortent encore avec 32 pixels de haut et un autre lien à six pixels de distance. Des champs en dessous de 16 pixels font zoomer iOS Safari à la sélection, ce qui décale toute la mise en page. Un mauvais type de champ affiche un clavier alphabétique complet pour un numéro de téléphone. Ensuite, le clavier à l’écran recouvre le bouton d’envoi, et votre visiteur n’a aucune idée que le formulaire est terminé. Réglez les bons types de champs et les bons attributs autocomplete.

Testez sur un vrai téléphone

Comptez ce qui recouvre l’écran d’un téléphone sur une page classique : un en-tête fixe, un bandeau cookies, une barre promo, une bulle de chat dans le coin et un CTA fixe en bas. Ensemble, ils peuvent prendre un tiers de l’écran avant le moindre contenu. Gardez un seul élément permanent et supprimez le reste. Chargez ensuite la page sur votre propre téléphone, en données mobiles, depuis le vrai lien de l’annonce, dans le navigateur intégré de l’application. L’émulation d’appareil de Chrome ne vous montrera ni la barre d’outils d’une webview, ni un réseau lent.