O que é design responsivo e por que ele pesa na conversão do site

Design responsivo é a forma de construir um site em que a mesma página se adapta à tela de quem acessa. No computador, o conteúdo aparece em três colunas com o menu aberto no topo. No celular, as colunas se empilham, o menu se recolhe, as imagens encolhem e os botões ficam do tamanho de um dedo. O endereço e o código são os mesmos, e o que muda é a disposição.

Tecnicamente, isso se faz com três recursos de CSS e HTML. Larguras definidas em proporção da tela, em vez de valores fixos em pixels. Regras condicionais (as media queries) que mudam o layout a partir de certas larguras. E imagens servidas em mais de um tamanho, para que o celular baixe um arquivo menor. Uma linha no cabeçalho da página, a tag de viewport, avisa o navegador do celular para respeitar a largura do aparelho. Sem ela, o site aparece miniaturizado e o visitante precisa dar zoom para ler.

Do "adaptar para o celular" ao mobile-first

Durante anos, o site era desenhado para o computador e depois ajustado para telas menores. A ordem se inverteu. Em muitos segmentos o celular responde pela maior parte das visitas, e no tráfego vindo de anúncios em redes sociais chega a ser quase a totalidade. Projetar em mobile-first significa desenhar primeiro a tela pequena, decidir o que é essencial ali e só depois expandir para o desktop.

O Google seguiu o mesmo caminho com a indexação mobile-first: o robô que lê e avalia as páginas usa a versão para celular como referência. Se um texto, uma imagem ou um bloco de links existe só na versão de computador, para efeito de busca ele pode simplesmente não contar. O Google também recomenda o design responsivo como a forma mais simples de manter um site único, em comparação com versões separadas em endereços do tipo "m.exemplo.com.br".

Onde entram os Core Web Vitals

Core Web Vitals são três medidas que o Google usa para avaliar a experiência de uso de uma página com dados de visitantes reais. Elas fazem parte dos sinais de ranqueamento e têm ligação direta com responsividade.

O INP substituiu a métrica anterior de interatividade, o FID, em 2024. Os três números aparecem no PageSpeed Insights, ferramenta gratuita do Google, e no relatório de Core Web Vitals do Search Console, separados entre celular e computador. É comum um site passar no desktop e reprovar no celular, onde o aparelho é mais fraco e a conexão é pior.

O efeito na conversão

Faça a conta com um exemplo. Uma empresa paga R$ 2 por clique em uma campanha e leva mil visitantes por mês a uma página de captura. Nove em cada dez chegam pelo celular. Se nessa tela o formulário tem campos pequenos, o teclado cobre o botão de envio e a página demora a abrir, a empresa está pagando R$ 1.800 por mês para mostrar uma página ruim a novecentas pessoas. Corrigir a página custa uma vez, e o desperdício se repete todo mês.

Responsividade, porém, resolve só uma parte. Uma página pode se encaixar perfeitamente na tela e continuar confusa, com o botão principal escondido lá embaixo e um formulário de doze campos. Esse segundo problema é de experiência do usuário: decidir o que a pessoa precisa ver e fazer, e em que ordem. O layout responsivo garante que a página funcione em cada tela, e o trabalho de UX garante que ela faça sentido.

O que conferir no seu site

• Abra as páginas principais no seu próprio celular, com a rede móvel em vez do wi-fi do escritório. Preencha o formulário até o fim.
• Botões e links com área de toque folgada e espaço entre eles. Dois links colados geram toque errado.
• Texto legível sem zoom, com contraste suficiente para ler na rua.
• Imagens em formato moderno, como WebP, e em tamanhos diferentes para cada tela.
• Largura e altura declaradas nas imagens e nos vídeos incorporados, para o layout não pular.
• Formulário curto, com o tipo de campo certo: o campo de telefone deve abrir o teclado numérico, o de e-mail, o teclado com arroba.
• Telefone e WhatsApp clicáveis, para iniciar a ligação ou a conversa com um toque.
• Menu enxuto. O menu recolhido economiza espaço, mas esconde opções. As duas ou três ações mais importantes merecem ficar sempre visíveis.
• Pop-ups que cobrem a tela inteira no celular atrapalham a leitura e podem pesar contra a página na busca.
• Teste nas duas orientações, em pé e deitada, e em pelo menos um aparelho mais antigo.

Sites feitos em construtores e temas atuais já nascem responsivos, e isso cria uma falsa segurança. O tema se adapta, mas o conteúdo que a empresa coloca dentro dele (a tabela larga, a imagem de 4 MB, o formulário importado de outra ferramenta) é o que costuma quebrar. A cada página nova ou campanha no ar, repita o teste no celular e rode o PageSpeed Insights. Leva dez minutos e evita descobrir o problema pelo relatório de conversões do mês seguinte. Para entender o impacto na busca orgânica, veja também por que o SEO é importante.