Por que landing pages quebram no celular

A maior parte do seu tráfego cai numa landing page no celular

Tráfego pago da Meta, do Instagram e do TikTok chega pelo celular, quase sempre dentro do navegador do próprio app, e não no Safari ou no Chrome. Essa webview é menor do que você imagina, e ela entrega parte da tela para as próprias barras de cima e de baixo. Designer ainda revisa landing page de celular num monitor de 27 polegadas em largura total, aprova, e nunca abre a página num Android intermediário no wi-fi de hotel. Hoje a versão de desktop é a exceção. Desenhe o layout do celular primeiro e deixe o desktop herdar dele.

O hero quebra primeiro

Três colunas viram uma fita alta de nada. Um título de 64 pixels quebra em seis linhas e empurra o botão para fora da tela. A imagem larga do hero encolhe até o produto dentro dela virar um borrão. Seções com 120 pixels de espaçamento no desktop deixam quem está no celular rolando por buracos vazios. E seções com 100vh são cortadas pela barra do navegador no iOS, que é justamente o problema que as unidades svh e dvh vieram resolver. Defina uma escala tipográfica e um espaçamento separados para o breakpoint do celular.

Formulários perdem gente um toque por vez

A Apple pede áreas de toque de pelo menos 44 por 44 pontos, e o Material Design pede 48 dp. Um monte de CTA de celular ainda sai com 32 pixels de altura e outro link a seis pixels de distância. Campo com menos de 16 pixels faz o Safari do iOS dar zoom quando a pessoa toca, e o layout vai todo para o lado. O tipo de campo errado entrega um teclado QWERTY completo para digitar um telefone. Aí o teclado da tela cobre o botão de enviar, e o seu visitante não faz ideia de que o formulário acabou. Defina os tipos de campo e os atributos de autocomplete certos.

Teste num celular de verdade

Conte o que cobre a tela do celular numa página típica: cabeçalho fixo, banner de cookies, barra de promoção, balãozinho de chat no canto e CTA fixo no rodapé. Juntos eles tomam até um terço da viewport antes de qualquer conteúdo aparecer. Escolha um elemento fixo e derrube o resto. Depois abra a página no seu próprio celular, usando dados móveis, pelo link real do anúncio, dentro do navegador do app. A emulação de dispositivo do Chrome não mostra a barra da webview nem uma rede lenta.