Site responsivo é o site que se ajusta sozinho ao tamanho da tela: o mesmo endereço e o mesmo conteúdo aparecem organizados no computador, no tablet e no celular, sem o visitante precisar dar zoom ou arrastar a página para o lado. Hoje, isso não é diferencial de agência, é o mínimo que um site precisa entregar.
Falo disso com experiência de quem viveu a virada: entre 2015 e 2017, nós da Vale da Web reprogramamos mais de 100 sites de clientes, a maioria feita entre 2010 e 2014. Eram sites que não funcionavam bem no celular, justamente o tipo de site que o Google passou a desfavorecer nas buscas pelo celular em 2015.
Neste guia eu explico o que é um site responsivo, a diferença para o design adaptativo e para o site mobile separado, o que o Google faz com um site que falha no celular e como você testa o seu em 2 minutos, sem instalar nada.
O que é um site responsivo
Um site responsivo tem um único código e um único endereço, e o layout se reorganiza conforme a largura da tela. No computador, o menu aparece completo no topo e o conteúdo se divide em colunas. No celular, o menu vira um ícone, as colunas se empilham, as imagens encolhem junto com a tela e os botões ficam grandes o bastante para o dedo.
O que muda é a arrumação, não o conteúdo. A regra que eu uso para avaliar qualquer projeto é esta: quem abre o site no celular precisa encontrar a mesma informação de quem abre no computador, só que numa ordem que funcione numa tela de poucos centímetros.
O que é responsividade
Responsividade é a capacidade de uma página responder ao espaço disponível na tela. O termo vem do inglês responsive web design, nome dado pelo designer Ethan Marcotte num artigo publicado na A List Apart em maio de 2010. A proposta dele era deixar de desenhar páginas com largura fixa e passar a desenhar páginas que se adaptam ao aparelho de quem visita.
Design responsivo: como funciona na prática
Você não precisa saber programar para contratar um site, mas vale conhecer as quatro peças do design responsivo, porque são elas que separam um site bem feito de um site que só “abre” no celular:
- Grade flexível: as colunas são medidas em proporção da tela, e não em pixels fixos, então esticam e encolhem.
- Imagens flexíveis: a foto nunca fica maior que a tela e, num site bem feito, o celular recebe uma versão mais leve dela.
- Pontos de quebra: regras de código (as media queries) que definem a partir de qual largura o layout muda, por exemplo de três colunas para uma.
- Meta viewport: uma linha no código que avisa o navegador do celular para usar a largura real do aparelho, em vez de mostrar a versão de computador em miniatura.
Na prática, o que eu mais vejo dar errado não é a técnica, é o conteúdo colocado depois: tabela larga que estoura a tela, banner com texto dentro da imagem que fica ilegível, janela que cobre o botão de fechar. Por isso um site pode ser tecnicamente responsivo e, ainda assim, ruim de usar no celular.
Responsivo, adaptativo e site mobile: a diferença
Existem três jeitos de fazer um site funcionar no celular, e eles são confundidos o tempo todo. A dúvida que eu mais ouço é a diferença entre site responsivo e site mobile, mas o adaptativo entra na mesma conversa:
- Site responsivo: um código e um endereço, com layout fluido que se ajusta a qualquer largura.
- Design adaptativo: alguns layouts fixos, desenhados para tamanhos de tela pré-definidos (celular, tablet e computador). O site identifica o aparelho e entrega a versão mais próxima.
- Site mobile separado: um segundo site, feito só para celular, geralmente num subdomínio como m.seusite.com.br, para onde o visitante de celular é redirecionado.
| Critério | Site responsivo | Design adaptativo | Site mobile separado |
|---|---|---|---|
| Estrutura do layout | Um layout fluido que se molda a qualquer tela | Alguns layouts fixos, um para cada faixa de tela | Dois sites, cada um com o seu layout |
| Desenvolvimento e manutenção | Um código só: cada ajuste vale para todas as telas | Cada versão precisa ser mantida | Tudo em dobro: dois layouts, dois desenvolvimentos e custo duplicado |
| Desempenho | Rápido quando imagens e código são otimizados para o celular | Pode entregar só o necessário a cada aparelho, mas depende de como foi feito | Leve no celular, com um redirecionamento a mais na entrada |
| Experiência do usuário | Transição suave entre os tamanhos de tela | Saltos entre um layout e outro; telas fora do padrão ficam mal atendidas | Pode ser boa, mas o conteúdo das duas versões costuma ficar diferente |
| SEO | Um endereço por página, o modelo que o Google recomenda | Exige configuração extra para o Google enxergar a versão de celular | Exige ligar cada página à sua versão mobile; um erro divide ou perde o sinal |
O site mobile separado foi a saída de muitas empresas grandes antes de 2015 e hoje é um modelo legado. Segundo a documentação de indexação mobile do Google Search Central, o Google recomenda o design responsivo por ser o mais fácil de implementar e de manter. Para um site institucional, de serviços ou de profissional liberal, eu não vejo motivo para fazer diferente.
Por que o Google exige site que funcione no celular
Duas datas explicam a regra do jogo.
Em 21 de abril de 2015, o Google começou a aplicar a atualização de compatibilidade com dispositivos móveis: páginas que funcionam bem no celular passaram a ganhar posição nas buscas feitas pelo celular. Os critérios divulgados eram quatro: texto legível sem zoom, links e botões com espaço para o toque, nenhum conteúdo que não roda no celular e nenhuma rolagem para o lado.
Em 31 de outubro de 2023, o Google anunciou que a indexação mobile-first estava concluída. Na prática, para indexar e classificar as páginas, o Google usa a versão que aparece no celular, e não a do computador.
O que acontece com o SEO quando o site falha no celular
Junte as duas datas e a consequência fica clara. Se um texto, uma seção ou um link aparece no computador e some no celular, o Google tende a ignorá-lo, porque é a versão de celular que ele lê. E se a página obriga o visitante a dar zoom, quem chega pela busca no celular vai embora e procura o concorrente.
Vale uma ressalva honesta: ser responsivo não coloca ninguém na primeira página sozinho. O próprio Google disse, em 2015, que a intenção da busca continua sendo um sinal muito forte. O ponto é o inverso: um site que falha no celular desperdiça todo o resto do trabalho de SEO, do conteúdo aos links. Se quiser entender esse resto, expliquei em outro artigo o que é SEO e como ele funciona.
Foi por esse motivo que reprogramamos aqueles mais de 100 sites entre 2015 e 2017. Várias empresas preferiram esperar, e os sites que continuaram sem versão para celular foram caindo nas buscas nos anos seguintes.
Como saber se o seu site é responsivo em 2 minutos
Como saber se um site é responsivo? Você não precisa de ferramenta paga nem de técnico: faça dois testes, nesta ordem.
Teste 1: no seu celular
Abra o site no navegador do celular e confira cada ponto:
- Dá para ler o texto sem dar zoom?
- A página cabe na largura da tela, sem rolagem para o lado?
- Botões e links são fáceis de tocar, sem acertar o vizinho por engano?
- O menu abre, fecha e leva às páginas certas?
- Imagens, tabelas e vídeos cabem na tela?
- O formulário de contato e o botão de WhatsApp funcionam?
Se a resposta for não em qualquer item, o seu site tem um problema no celular, mesmo que alguém tenha garantido que ele é responsivo. Repita o teste na página inicial, numa página de serviço e no contato, porque cada tipo de página costuma quebrar num ponto diferente.
Teste 2: no Google Chrome do computador
- Abra a página no Chrome e pressione F12, ou clique com o botão direito e escolha Inspecionar.
- Clique no ícone de celular e tablet, no canto superior das ferramentas, para ligar o modo de dispositivo.
- Escolha um modelo de celular na lista do topo, ou arraste a borda da página para estreitar a tela, e veja se o layout se reorganiza sem cortar nada.
O próprio Google avisa que o modo de dispositivo do Chrome é uma aproximação: ele simula a tela, mas não um aparelho de verdade. Por isso o teste no seu celular vem primeiro e vale mais que o do computador.
Para quem procura a ferramenta antiga: o Teste de compatibilidade com dispositivos móveis do Google saiu de cena em dezembro de 2023, como registra o histórico de atualizações da documentação do Google Search Central. Tutorial que ainda manda usar essa ferramenta está desatualizado.
O que fazer se o seu site não é responsivo
Se o site falhou nos testes, existem dois caminhos: ajustar o site atual ou fazer um site novo.
Ajustar pode valer quando o site é recente, foi feito numa plataforma atual e o problema está em poucos pontos, como uma tabela larga ou um banner. Nesse caso, o primeiro contato deve ser com quem fez o site, que conhece o código, e vale ver o que mais dá para melhorar o site no mesmo pacote de ajustes.
Quando o site inteiro não se adapta, a minha recomendação é outra: na grande maioria dos casos, sai melhor fazer um site novo do que converter o antigo. Um site que não é responsivo hoje quase sempre é antigo, e o layout vem acompanhado de outros problemas: plataforma desatualizada, lentidão, textos que não falam com o cliente de hoje e nenhum cuidado com SEO. Converter só o layout é reformar a fachada e manter a estrutura com defeito.
Foi o que aprendi nas reprogramações de 2015 a 2017 e é o que eu recomendo para quase todo cliente que chega com um site antigo. Para planejar o investimento, explico os valores de mercado e os nossos no guia sobre quanto custa um site.
Exemplos de sites responsivos
O exemplo mais à mão é esta página: abra o artigo no celular e no computador e compare como o menu e as imagens se reorganizam.
Na Vale da Web, todos os sites que entregamos são responsivos. No nosso portfólio de sites profissionais, abra qualquer projeto no celular e observe três coisas que todo bom exemplo tem:
- O menu vira um ícone, mas continua levando às mesmas páginas.
- As colunas de serviços se empilham sem esconder informação.
- O botão de contato continua visível e fácil de tocar em qualquer tela.
Site responsivo é o mínimo, não o diferencial
Quando uma proposta apresenta “site responsivo” como vantagem, desconfie. É como uma construtora anunciar que a casa vem com telhado. O ponto que eu defendo com todo cliente é que ser responsivo é o ponto de partida, e o que faz um site trazer clientes vem depois: textos que respondem às dúvidas de quem compra, páginas pensadas para as buscas certas, velocidade, imagens nomeadas com texto alternativo e um caminho curto até o contato.
Na Vale da Web, todo site nasce responsivo e com SEO desde o projeto. O site pré-personalizado começa em R$ 3.000 e o personalizado, com a redação dos textos incluída, em R$ 8.000. Os dois têm mensalidade de R$ 95, que inclui hospedagem no Brasil e suporte para modificações rápidas de até 15 minutos por mês, não cumulativo, e o projeto pode ser pago à vista ou parcelado.
Se o seu site falhou no teste, solicite um orçamento e conheça a nossa criação de site profissional.
Perguntas frequentes sobre site responsivo
Todo site feito em WordPress é responsivo?
Não necessariamente. A maioria dos temas atuais é responsiva, mas o resultado depende de como as páginas foram montadas: uma tabela larga, um construtor mal configurado ou um banner com texto na imagem quebram a experiência no celular mesmo num tema responsivo. Faça o teste de 2 minutos em cada tipo de página.
Site responsivo é a mesma coisa que aplicativo?
Não. O site responsivo abre no navegador, pelo mesmo endereço, sem instalar nada. O aplicativo precisa ser baixado na loja do celular e é outro projeto, com outro custo. Para apresentar a empresa e receber contatos, o site responsivo resolve.
Quanto custa deixar um site responsivo?
Depende de como o site atual foi feito, por isso não existe um valor fixo. Se ele é antigo, na maioria dos casos um site novo compensa mais do que a conversão. Na Vale da Web, o site novo começa em R$ 3.000, mais R$ 95 por mês.
Ser responsivo garante uma boa posição no Google?
Não garante. Funcionar bem no celular é condição para competir, porque o Google indexa a versão de celular das páginas, mas a posição depende também do conteúdo, da intenção da busca e da autoridade do site.
Ainda vale a pena ter um site mobile separado?
Para um site novo, não. O Google recomenda o design responsivo por ser o mais simples de implementar e manter, e um site separado dobra o trabalho e o custo de cada atualização.
Resumo: site responsivo em 5 pontos
- Site responsivo é um site com um único código e um único endereço, que reorganiza o layout para qualquer tela.
- Design adaptativo usa layouts fixos por tamanho de tela; o site mobile separado é um segundo site, com custo em dobro.
- A indexação pela versão de celular começou em 2016 e, desde 2023, vale para praticamente todos os sites.
- Dá para testar o seu site em 2 minutos: no celular primeiro, depois no modo de dispositivo do Chrome.
- Se o site inteiro falha no celular, na maioria dos casos um site novo sai melhor que a conversão.
Se você quer um site que funcione em qualquer tela e apareça no Google, fale com a Vale da Web e veja como funciona a nossa criação de site profissional.
