Site responsivo: o que é e como saber se o seu site funciona bem no celular

Resposta curta: site responsivo é o site que se ajusta sozinho ao tamanho da tela: no computador, o conteúdo pode aparecer em colunas; no celular, ele se reorganiza numa coluna só, com texto legível e botões fáceis de tocar, sem você precisar dar zoom nem arrastar a tela para o lado. Hoje isso é o mínimo esperado, por dois motivos: boa parte dos seus visitantes chega pelo celular, e o Google usa a versão de celular do site para decidir o que mostrar nas buscas. Para testar, abra o site no seu próprio celular, fora do Wi-Fi, e tente fazer o que um cliente faria: ler um serviço, achar o endereço e tocar no botão de contato.

Quando alguém me pede para avaliar um site, a primeira coisa que eu faço é abrir no celular. É ali que aparecem os problemas que o dono não vê, porque ele costuma editar e conferir o site no computador do escritório.

Neste artigo eu explico o que é um site responsivo, por que ele importa para o Google e para os clientes, como testar o seu site sem ser programador e o que pedir para quem cuida dele.

O que é um site responsivo?

É um site feito para “responder” ao tamanho da tela de quem está visitando. Em vez de existir uma versão para computador e outra para celular, existe um site só, com o mesmo endereço e o mesmo conteúdo, que muda a arrumação conforme a tela.

Na prática, num site responsivo bem feito:

• o texto aparece num tamanho confortável sem precisar de zoom;
• as colunas viram uma coluna só no celular, na ordem certa de leitura;
• as imagens diminuem para caber na tela, sem cortar a parte importante;
• o menu vira um botão (aquele ícone de três tracinhos) que abre e fecha sem travar;
• os botões têm tamanho de dedo, com espaço entre eles para ninguém tocar no errado;
• nada obriga a arrastar a tela para o lado.

O contrário disso é o site “de computador” encolhido: a página aparece minúscula no celular e o visitante precisa dar zoom e arrastar para ler.

Qual a diferença entre site responsivo e versão mobile?

Antigamente era comum ter duas versões do site: a normal e uma “versão mobile”, muitas vezes num endereço separado, como m.seusite.com.br. A versão de celular costumava ficar desatualizada ou com menos conteúdo.

O site responsivo resolve isso com uma versão só. O Google, na documentação oficial do Google Search Central, aponta o design responsivo como a configuração mais fácil de implementar e manter, justamente porque o conteúdo é o mesmo em todos os aparelhos. Já “mobile first” é uma forma de planejar: pensar primeiro no celular e depois ampliar para telas maiores. É assim que eu trabalho.

Por que o site precisa funcionar bem no celular?

Porque o cliente está no celular

Quem pesquisa “dentista em Botafogo” ou “advogado trabalhista no Centro” geralmente está com o celular na mão. Se o site abre torto, a pessoa volta para a busca e escolhe o próximo resultado, e você nem fica sabendo que perdeu aquele contato.

Porque o Google olha primeiro a versão de celular

O Google usa o que ele chama de indexação mobile-first: o robô que visita o seu site para decidir como ele aparece nas buscas se comporta como um celular. Em 2023, o Google anunciou no blog oficial do Search Central que a mudança para a indexação mobile-first estava concluída, e informou depois que páginas que não podem ser acessadas pelo celular deixam de ser indexadas.

Isso tem uma consequência prática importante: o que não aparece na versão de celular tende a não contar para o Google. Se o seu site esconde no celular a lista de serviços, o texto sobre a região que você atende ou os links para as páginas internas, o Google pode simplesmente não levar esse conteúdo em conta. Num site responsivo, como o conteúdo é o mesmo, esse problema praticamente não existe.

Se o seu site ainda nem aparece nas buscas, o motivo pode ser outro; o passo a passo está no artigo sobre como fazer o site aparecer no Google.

Como saber se o meu site é responsivo?

Você não precisa de ferramenta paga nem de conhecimento técnico. Faça estes testes, nesta ordem.

1. Teste no seu celular, como um cliente

Desligue o Wi-Fi e abra o site pela internet móvel. Depois, tente:

1. ler a página inicial sem dar zoom;
2. abrir o menu e entrar na página de um serviço;
3. encontrar o endereço, a região de atendimento ou o horário;
4. tocar no botão de WhatsApp ou de contato e ver se ele abre a conversa certa;
5. girar o celular na horizontal e ver se a página continua organizada.

Se em algum desses passos você precisou arrastar a tela para o lado, tocou no lugar errado ou desistiu, o site tem problema.

2. Peça para outra pessoa testar

Peça para duas ou três pessoas abrirem o site em celulares diferentes, incluindo um aparelho mais simples, com tela menor. Quem não conhece o site percebe dificuldades que você já se acostumou a contornar.

3. Use as ferramentas gratuitas do Google

• PageSpeed Insights (pagespeed.web.dev): cole o endereço e veja o resultado na aba Celular. Além da velocidade, ele aponta problemas como texto pequeno demais e botões muito próximos.
• Google Search Console: se o site está cadastrado, a ferramenta de inspeção de URL mostra como o robô do Google, que se comporta como um celular, enxerga a página.
• No computador, pelo Chrome: clique com o botão direito na página, escolha “Inspecionar” e ative o ícone de celular e tablet no canto da tela. Dá para ver o site em vários tamanhos de tela. É uma simulação, não substitui o celular de verdade.

Vale saber: o antigo “Teste de compatibilidade com dispositivos móveis” do Google foi desativado no fim de 2023. Se você encontrar um tutorial mandando usar essa ferramenta, ele está desatualizado.

Quais são os problemas mais comuns no celular?

Estes são os que eu mais encontro quando avalio sites de pequenos negócios:

• Texto pequeno ou com pouco contraste, como cinza-claro sobre fundo branco, que some sob a luz do sol.
• Botão de WhatsApp em cima de outro conteúdo, cobrindo o texto ou o botão de aceitar cookies.
• Pop-up que ocupa a tela inteira e não tem um “fechar” fácil de tocar.
• Tabelas e imagens largas demais, que obrigam a arrastar para o lado.
• Menu que não abre ou não fecha, geralmente por causa de um plugin ou código desatualizado.
• Site lento na rede móvel, que também é um problema de celular. Eu falo disso em detalhe no artigo sobre site lento.

Como deixar o meu site responsivo?

Depende de como o site foi feito.

Se o site usa um construtor ou o WordPress com um tema recente, ele provavelmente já é responsivo, e o problema está em detalhes: uma imagem enorme, um plugin que quebra o menu, um bloco montado só pensando no computador. Muitos construtores têm um botão para ver e ajustar a versão de celular. Vale revisar página por página.

Se o site é antigo, feito antes de o celular dominar, ou se usa uma versão mobile separada, normalmente não compensa remendar. Adaptar um site que nasceu para tela grande costuma dar mais trabalho do que refazer com uma estrutura pensada para o celular desde o começo.

Ao conversar com quem vai cuidar do site, peça que:

• o site seja planejado e testado primeiro no celular;
• o conteúdo seja o mesmo no celular e no computador, sem esconder textos ou links;
• os botões de contato fiquem fáceis de tocar e não cubram outros elementos;
• as imagens sejam otimizadas para carregar rápido na rede móvel;

Se você está escolhendo quem vai fazer o site, o artigo sobre como escolher um desenvolvedor de sites traz outras perguntas que vale fazer antes de contratar.

Perguntas frequentes

Site responsivo é a mesma coisa que aplicativo?

Não. O site responsivo abre no navegador do celular, pelo mesmo endereço do computador, sem instalar nada. O aplicativo precisa ser baixado de uma loja de apps. Para a maioria dos pequenos negócios e profissionais liberais, um bom site responsivo resolve o que o cliente precisa: conhecer o serviço e entrar em contato.

Site que não é responsivo perde posição no Google?

Pode perder. Como o Google usa a versão de celular para indexar e classificar as páginas, um site difícil de usar no celular parte em desvantagem, e o conteúdo que não aparece no celular tende a não ser considerado. Além disso, o visitante que desiste antes de ler já é um cliente perdido, independentemente do Google.

Resumo

Site responsivo é aquele que se reorganiza sozinho para qualquer tamanho de tela, com o mesmo endereço e o mesmo conteúdo. Ele importa porque os clientes procuram serviços pelo celular e porque o Google usa a versão de celular do site para decidir como ele aparece nas buscas. Para testar, use o seu celular fora do Wi-Fi, peça ajuda a outras pessoas e confira o PageSpeed Insights. Se o site é antigo e foi feito para tela grande, refazer costuma sair melhor do que remendar.

Se você quer saber se o seu site funciona bem no celular ou ter um site pensado para o celular desde o começo, veja como eu trabalho na criação de sites.