Por qué se rompen las landing pages en móvil

La mayor parte de tu tráfico cae en móvil

El tráfico de pago de Meta, Instagram y TikTok llega en un móvil, y normalmente dentro del navegador de la propia app en vez de Safari o Chrome. Esa vista web es más pequeña de lo que crees, y encima cede pantalla a sus propias barras de arriba y de abajo. Los diseñadores siguen revisando las landing pages de móvil en un monitor de 27 pulgadas a pantalla completa, las aprueban, y nunca las abren en un Android de gama media con el wifi de un hotel. La versión de escritorio es ya la excepción. Diseña primero la maqueta del móvil y deja que el escritorio herede de ahí.

El hero se rompe el primero

Tres columnas se apilan en una cinta alta de nada. Un titular a 64 píxeles se parte en seis líneas y empuja el botón fuera de la pantalla. La imagen ancha del hero se reduce hasta que el producto de dentro se convierte en un borrón. Secciones separadas 120 píxeles en escritorio dejan al usuario de móvil bajando por huecos vacíos. Y las secciones a 100vh se cortan con la barra del navegador en iOS, que es justo lo que vinieron a arreglar las unidades svh y dvh. Define escalas de texto y espaciados propios para el punto de ruptura del móvil.

Los formularios pierden gente toque a toque

Apple pide zonas de toque de al menos 44 por 44 puntos, y Material Design pide 48 dp. Un montón de CTA de móvil siguen saliendo con 32 píxeles de alto y otro enlace a seis píxeles de distancia. Los campos por debajo de 16 píxeles hacen que Safari en iOS haga zoom al enfocar, lo que descoloca la maqueta de lado. El tipo de campo equivocado saca un teclado QWERTY completo para un número de teléfono. Y luego el teclado en pantalla tapa el botón de enviar, y tu visitante no tiene ni idea de que el formulario está terminado. Pon los tipos de campo correctos y los atributos autocomplete.

Prueba en un móvil de verdad

Cuenta lo que ocupa la pantalla de un móvil en una página normal: una cabecera fija, un banner de cookies, una barra de promoción, una burbuja de chat en la esquina y un CTA fijo abajo. Juntos pueden llevarse un tercio de la ventana antes de que aparezca nada de contenido. Elige un elemento fijo y quita el resto. Después carga la página en tu propio móvil, con datos, desde el enlace real del anuncio, dentro del navegador interno de la app. La emulación de dispositivos de Chrome no te va a enseñar la barra de una vista web ni una red lenta.