O que é site responsivo e por que todo site precisa ser

Site responsivo é um site que se ajusta à tela de quem acessa. No computador, o conteúdo aparece em colunas, com menu aberto no topo. No celular, as mesmas informações se empilham numa coluna só, o menu se recolhe num botão, as imagens encolhem e os botões ficam grandes o bastante para o dedo. O endereço é um só e o conteúdo é o mesmo; muda a disposição.

Quando este assunto surgiu, era tratado como novidade. Hoje é o padrão de qualquer site bem-feito, e a pergunta útil passou a ser outra: o seu site, além de responsivo no papel, funciona de verdade no celular?

Como funciona

O layout responsivo é construído com medidas flexíveis e com regras de CSS que se aplicam conforme a largura da tela. Abaixo de certa largura, três colunas viram uma, a barra lateral desce para o fim da página, a tabela ganha rolagem horizontal. O navegador recebe o mesmo HTML em qualquer aparelho e aplica as regras correspondentes.

Você consegue ver isso num computador. Abra um site, diminua a janela do navegador arrastando a borda e observe: se os blocos se reorganizam, ele é responsivo. Se aparece uma barra de rolagem horizontal e parte do conteúdo some para o lado, não é.

Site responsivo e site mobile são coisas diferentes

Antes de o layout responsivo se popularizar, a solução para o celular era criar um segundo site, em geral num endereço como m.empresa.com.br, com menos conteúdo e outro visual. O servidor identificava o aparelho e redirecionava.

Esse modelo dá trabalho em dobro. Cada mudança de preço, texto ou produto precisa ser feita em dois lugares, e com o tempo as versões ficam diferentes. Para o Google são dois endereços a rastrear, e qualquer falha no redirecionamento vira erro para o visitante. Por isso o site mobile separado caiu em desuso, e quem ainda tem um deve planejar a migração. Comparamos as duas abordagens com mais detalhe em site responsivo x site mobile.

O que acontece quando o site não é responsivo

O visitante desiste

Quem chega pelo celular a uma página feita só para computador precisa dar zoom para ler, arrastar a tela para os lados e acertar links minúsculos. A maioria fecha a aba. Para uma empresa em que boa parte dos acessos vem do celular, o que vale para praticamente todo negócio local e para qualquer um que anuncie em rede social, isso significa perder o visitante antes de ele ler a oferta.

O Google passa a enxergar menos

O Google rastreia e avalia os sites usando a versão para celular das páginas, prática que ele chama de indexação mobile-first. Se no celular o seu site esconde conteúdo, carrega devagar ou tem elementos que não cabem na tela, é essa versão que entra na avaliação, mesmo para quem busca pelo computador. A documentação do Google sobre indexação mobile-first detalha as recomendações.

O anúncio fica mais caro

Quase todo clique vindo de Instagram, Facebook e de boa parte das campanhas de Google Ads acontece no celular. Se a página de destino é ruim de usar, você paga pelo clique e o visitante sai sem pedir orçamento. As plataformas de anúncio também consideram a experiência na página ao decidir quanto cobrar e com que frequência exibir a peça. Um site que não funciona no celular encarece toda a mídia.

Responsivo não quer dizer bom no celular

Muito site passa no teste de redimensionar a janela e ainda assim atende mal. Os problemas que mais encontramos:

• imagens enormes, feitas para monitor, que demoram a carregar em rede móvel;
• pop-up que cobre a tela inteira e cujo botão de fechar fica fora da área visível;
• formulário com dez campos e teclado errado (teclado de letras num campo de telefone);
• botões e links colados uns nos outros, que fazem a pessoa tocar no item errado;
• telefone escrito como texto, sem link para ligar ou abrir o WhatsApp com um toque;
• texto em fonte pequena, com pouco contraste.

Nenhum desses itens quebra o layout. Todos derrubam a taxa de conversão.

Como testar o seu site em cinco minutos

1. Pegue o seu celular, com a rede móvel ligada em vez do wi-fi, e acesse o site como um cliente faria. Tente completar a ação principal: pedir orçamento, comprar, ligar.
2. Peça o mesmo a alguém que nunca usou o site e observe onde a pessoa trava.
3. Rode o endereço no PageSpeed Insights, ferramenta gratuita do Google, e leia o relatório da aba de dispositivos móveis. Ele aponta o que deixa a página lenta.
4. No Google Search Console, confira o relatório de Core Web Vitals para saber quais páginas têm problemas de experiência com usuários reais.
5. No GA4, compare a taxa de conversão de celular e de computador. Uma diferença muito grande a favor do computador costuma indicar um obstáculo na versão para celular.

Quanto custa ter um site responsivo

Em site novo, nada a mais. Os temas atuais de WordPress, as plataformas de loja virtual e os construtores de site já entregam layout responsivo, e qualquer desenvolvedor trabalha assim por padrão. Ao contratar, inclua no escopo a aprovação do layout no celular antes da versão para computador, e não depois. Reunimos outras recomendações em 6 dicas de como fazer um site responsivo.

Em site antigo, feito com largura fixa, adaptar costuma sair mais caro do que refazer. Se o seu ainda está nessa situação e você investe em anúncios, trate a troca como prioridade antes de aumentar a verba: cada real colocado em mídia continua levando gente para uma página que ela abandona.