Resposta rápida
Uma landing page mobile-first é projetada primeiro para a tela do celular e depois expandida para o desktop. Prioriza CTA visível sem rolagem, botões de 48px, formulário curto e carregamento abaixo de 3 segundos no 4G. Ser responsiva não basta: a página precisa ser fácil de ler e tocar com uma mão. Teste no aparelho real, não só no modo responsivo.
Mais de 70% do tráfego de campanhas de Meta Ads e Google Ads chega pelo celular. Se a landing page não está otimizada para mobile, você está desperdiçando a maior parte do seu investimento em tráfego.
“Responsivo” não é suficiente. Uma página que “não quebra” no celular é diferente de uma página que converte no celular.
O problema das landing pages que “funcionam” mas não convertem no mobile
Um layout responsivo garante que a página não fica torta no celular. Mas não garante:
- Que o texto está legível sem zoom
- Que os botões são fáceis de tocar com o polegar
- Que o formulário é preenchível sem frustração
- Que a página carrega em menos de 3 segundos no 4G
- Que o CTA está visível sem precisar rolar muito
Esses são os pontos onde a maioria das landing pages perde conversão no mobile.
Velocidade: o fator mais crítico para mobile
No mobile, as pessoas têm menos paciência para esperar. Dados do Google mostram que 53% dos visitantes mobile abandonam páginas que levam mais de 3 segundos para carregar.
Metas de velocidade para landing page mobile:
- LCP (maior elemento visível): abaixo de 2,5 segundos
- INP (resposta a interações): abaixo de 200ms
- Score no Google PageSpeed Insights (mobile): acima de 80
Entenda cada métrica em Core Web Vitals: o que são.
Principais causas de lentidão no mobile:
- Imagem hero pesada sem compressão
- Vídeo de fundo (use poster estático no mobile)
- Scripts de terceiros (pixel, chat, analytics) carregando de forma bloqueante
- Fonte carregando de outra origem antes do conteúdo
Solução rápida: use o Google PageSpeed Insights (pagespeed.web.dev) para identificar o que está pesado. As sugestões são específicas e acionáveis.
Layout para mobile-first
Design top-to-bottom, não left-to-right
No desktop, você tem espaço para duas colunas (texto à esquerda, imagem à direita). No mobile, tudo vira uma coluna. Projete pensando no mobile como padrão, não como versão adaptada. A estrutura ideal de uma landing page segue a mesma lógica de ordem e prioridade.
Hierarquia recomendada no mobile:
- Headline (grande, impactante, primeira coisa que se vê)
- Subtítulo de apoio (máximo 2 linhas)
- CTA principal (visível sem scroll)
- Imagem ou vídeo de suporte
- Benefícios em lista
- Prova social
- Formulário ou CTA secundário
O CTA deve estar “above the fold” no mobile
No celular, “above the fold” é a tela de 360x640px que o usuário vê sem rolar. Esse espaço é menor do que parece. Priorize:
- Headline direta
- Uma frase de apoio
- Botão de CTA bem visível
Se o usuário precisar rolar para ver o CTA pela primeira vez, você já perdeu parte das conversões.
Sticky CTA (botão fixo na tela)
Para landing pages longas, um botão de CTA fixo na parte inferior da tela no mobile (“sticky bottom CTA”) mantém o caminho para conversão sempre visível, independente de onde o visitante está na página.
Implementação simples em CSS:
.sticky-cta-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: #fff;
box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
z-index: 100;
}
Botões e CTAs para toque
Touch targets (áreas tocáveis) precisam ser grandes o suficiente para o polegar. Google e Apple recomendam mínimo de 44x44px, mas para botões de CTA principais, use 48px a 56px de altura.
Erros comuns:
- Botão de texto com padding muito pequeno
- Botões muito próximos uns dos outros (fácil de tocar errado)
- Link de texto (sem botão) para o CTA principal
As regras de CTAs que convertem valem para qualquer tela, mas no mobile a margem de erro é menor.
Formulários no mobile
Formulários no mobile têm problemas específicos:
- Teclado virtual toma metade da tela
- Campos pequenos são difíceis de selecionar
- Erros de digitação são mais comuns
Boas práticas:
- Campos com altura mínima de 48px
- Espaçamento generoso entre campos
- Tipo de teclado correto:
type="email"para e-mail (abre teclado com @),type="tel"para telefone (abre teclado numérico) - Autofill ativo (atributos
autocompletecorretos) - Formulário de no máximo 3 a 4 campos para mobile
Para reduzir abandono, siga as boas práticas de formulários que convertem também no celular.
Conteúdo adaptado para mobile
Textos mais curtos: Blocos de texto longos no desktop viram paredes de texto no mobile. Para cada seção, reduza para o essencial. Se precisar de mais detalhes, use acordeão (elementos expansíveis).
Imagens otimizadas por breakpoint:
Não use a mesma imagem de 1920x800px no desktop e no mobile. Use imagens menores e comprimidas para mobile com srcset ou configuração de imagem responsiva. Veja o guia de otimização de imagens para web.
Vídeo de fundo: desative no mobile Vídeo de fundo consome dados e processamento. No mobile, substitua por imagem estática de boa qualidade.
Teste sua landing page no celular de verdade
Não confie apenas no modo responsivo do Chrome DevTools. Teste no celular real:
- Abra no próprio celular
- Envie o link para alguém com Android e iPhone diferente do seu
- Observe onde a pessoa hesita ou fica confusa
O Google também oferece o teste de usabilidade em dispositivos móveis no Search Console.
Checklist de QA mobile antes de publicar
| Item | Meta | Como verificar |
|---|---|---|
| Carregamento no 4G | Abaixo de 3 segundos | PageSpeed Insights no modo mobile |
| CTA inicial | Visível sem rolagem | Abrir em tela de 360x640 |
| Botões | 48px ou mais de altura | Medir no DevTools e testar com o polegar |
| Formulário | 3 a 4 campos e teclado correto | Preencher no celular real |
| Texto | Legível sem zoom | Ler sem ampliar a tela |
| Imagens | Tamanho correto por breakpoint | Conferir o srcset no DevTools |
Passe por essa lista antes de subir qualquer campanha. Corrigir depois que o tráfego começou custa mais caro, porque cada dia no ar com uma página ruim é verba de anúncio desperdiçada.
Sua landing page converte no celular ou perde leads todo dia?
Criamos landing pages mobile-first com velocidade, CTAs otimizados para toque e formulários que convertem no celular.
Criar landing page mobile-firstFontes e referências
- web.dev: Core Web Vitals: métricas de experiência de página e metas oficiais.
- web.dev: Largest Contentful Paint: como medir e melhorar o LCP.
- web.dev: Interaction to Next Paint: como medir e melhorar o INP.
- web.dev: Cumulative Layout Shift: como medir e reduzir o CLS.
Para se aprofundar
FAQ
Devo criar versões separadas para mobile e desktop?
Não é mais necessário com CSS moderno e design responsivo bem feito. O que você deve fazer é projetar mobile-first (começar pelo mobile, depois expandir para desktop) em vez de desktop-first (começar pelo desktop, depois adaptar para mobile). A segunda abordagem costuma resultar em experiência mobile ruim.
AMP (Accelerated Mobile Pages) ainda vale a pena para landing pages?
Não para a maioria dos casos. AMP foi criado pelo Google para acelerar páginas, mas tem restrições de funcionalidade (JavaScript limitado) que prejudicam landing pages com formulários complexos e pixel de rastreamento. Com boa otimização de velocidade convencional, você consegue resultados similares sem as restrições do AMP.
Como medir a performance mobile da landing page?
Google PageSpeed Insights (pagespeed.web.dev) para velocidade e Core Web Vitals. Google Analytics 4 para comparar taxa de conversão e bounce rate entre mobile e desktop. Se a taxa de conversão no mobile for mais de 40% menor que no desktop, há problema de UX mobile a corrigir.
Quanto tempo leva para otimizar uma landing page existente para mobile?
Para ajustes básicos (compressão de imagens, tamanho de botões, velocidade): 2 a 4 horas de trabalho técnico. Para redesign mobile-first completo: 1 a 2 semanas. O impacto na conversão justifica o investimento.