O que é
Site responsivo é aquele que usa uma única estrutura de código e um único conteúdo para todas as telas. O layout se reorganiza conforme a largura do aparelho, e imagens e fontes se ajustam junto. Quem acessa pelo computador (o desktop), pelo tablet ou pelo celular vê as mesmas informações, no mesmo endereço.
Existe outro caminho para a tela pequena, a versão mobile separada. É um segundo site, com endereço próprio para o celular, como um subdomínio que começa com m. O Google aceita esse modelo, desde que o conteúdo seja o mesmo da versão do computador.
O ponto que mais confunde é achar que responsivo quer dizer rápido, ou que responsivo e mobile-first são a mesma coisa. Responsivo descreve o layout. Mobile-first descreve como o Google rastreia e indexa. E um site pode ser responsivo e ainda assim pesado no celular.
É o site que mostra o mesmo conteúdo no computador e no celular. Como o Google indexa pela versão do celular, o que falta nela pode ficar fora do índice da busca.
Como funciona
A web.dev define o design responsivo como uma estratégia que responde às necessidades do usuário e às capacidades de cada dispositivo, e aponta três peças:
- Metatag viewport. Diz ao navegador do celular para usar a largura do aparelho como base.
- Media queries. Regras de estilo que mudam o layout conforme o tamanho da tela.
- Layouts fluidos. Medidas relativas, que acompanham a tela, no lugar de tamanhos fixos.
Na busca, o Google indexa o site pela versão do celular. A documentação do Google pede que ela tenha o mesmo conteúdo da versão do computador. Em 3 de junho de 2024, um post oficial avisou que, depois de 5 de julho de 2024, a Busca seria rastreada só pelo Googlebot Smartphone. Conteúdo que não está acessível pelo celular deixa de ser indexável.
Responsividade e velocidade são assuntos separados. O site pode se adaptar bem a todas as telas e demorar a carregar no celular. A velocidade se lê nos Core Web Vitals, e a leitura do celular merece análise à parte da leitura do computador.
Exemplos
Aprovar o site novo antes de publicar
Abra as páginas no seu próprio celular, use o menu e preencha o formulário até o fim. Depois repita no computador e compare. É nesse teste que aparecem os problemas que a janela redimensionada esconde, como botão pequeno ou formulário difícil de preencher.
Bloco que existe no computador e some no celular
A página de serviço traz um bloco de perguntas e respostas no computador, e ele foi retirado da versão do celular para a tela ficar mais limpa. Como o Google indexa pela versão do celular, esse conteúdo pode ficar fora do índice. Compare o texto das duas versões e peça que o bloco volte.
Ler o PageSpeed Insights
O relatório enviado mostra só a aba do computador, com nota alta. Rode a análise de novo e abra também a aba do celular. Um site responsivo pode estar bem numa e lento na outra.
Proposta com “versão mobile” como item à parte
Se a proposta lista a versão mobile como entrega separada, pergunte se é o mesmo site adaptado ou um segundo site com endereço próprio. No segundo caso, confira se o conteúdo é igual ao da versão do computador, como o Google pede.
Erros comuns
- Aprovar o site só redimensionando a janela do navegador. Abra o site no seu celular e use menu e formulário.
- Retirar blocos de texto da versão do celular. Compare o texto da página nos dois aparelhos e veja se falta algum bloco.
- Manter uma versão mobile separada com menos conteúdo. Procure um subdomínio como m. ou uma pasta só para o celular e compare o conteúdo das duas versões.
- Ler só a aba do computador no PageSpeed Insights. Rode a análise e abra as duas abas.
- Validar o site com o Mobile-Friendly Test. Tente abrir a ferramenta: se ela não abrir, o diagnóstico que dependia dela está desatualizado.
Perguntas frequentes
Qual a diferença entre site responsivo e versão mobile?
O responsivo é um único site que se adapta à tela. A versão mobile é um segundo site, com endereço próprio para o celular. O Google aceita a versão separada, desde que o conteúdo seja o mesmo da versão do computador.
Qual a diferença entre site responsivo e mobile-first?
Responsivo descreve o layout do site. Mobile-first descreve como o Google rastreia e indexa: pela versão do celular. Num site responsivo o conteúdo é um só, o que ajuda, desde que nenhum bloco seja retirado do celular.
O design responsivo garante boa experiência em todos os aparelhos?
Não. Ele adapta o layout, mas não garante velocidade nem que menu e formulário funcionem bem no dedo. Por isso o teste inclui o aparelho real e a leitura dos Core Web Vitals.
Como saber se o meu site é responsivo?
Abra o site no celular e veja se o texto fica legível sem zoom e se menu e formulário funcionam. Depois compare o texto da página com o do computador. Se faltam blocos, a versão do celular tem conteúdo diferente.
O que perguntar à agência ou ao desenvolvedor sobre responsividade?
Em quais aparelhos reais o site foi testado, se o conteúdo é o mesmo no celular e no computador e como estão as duas abas do PageSpeed Insights. Pergunte também se existe versão mobile em endereço separado.
Termos relacionados
Aprofunde no blog
Fontes
- Responsive web design basics. web.dev (Google).
- Mobile-first indexing best practices. Google Search Central.
- Fim do rastreamento da Busca com o Googlebot Desktop. Google Search Central Blog, 2024.
MMEscrito por Marcela Mazetto, Analista de SEO e redatora. Revisado por Guilherme Boni em . Como fazemos o glossário