Site responsivo: o que é e por que o seu precisa ser
Site responsivo é o site que se ajusta sozinho ao tamanho da tela: no celular o menu vira um botão, as colunas viram uma embaixo da outra e o texto continua legível sem dar zoom. É o mesmo endereço e o mesmo conteúdo em qualquer aparelho, só muda a arrumação.
Site responsivo: significado em uma frase
Responsivo vem de responder. O site responde ao tamanho da tela de quem está olhando.
Na prática, o site é montado em blocos que mudam de lugar. No computador, três cartões ficam lado a lado. No celular, eles ficam um embaixo do outro. A foto encolhe, o menu vira um ícone de três tracinhos e o botão de WhatsApp fica fácil de apertar com o dedo.
O que não muda é o conteúdo. O texto, os serviços, os preços e o contato são os mesmos nas duas versões. Isso é importante, e a gente volta nesse ponto quando falar do Google.
Existe outro jeito de atender o celular: fazer um segundo site só para ele, num endereço separado (tipo m.seusite.com.br). Esse modelo era comum há alguns anos. Hoje dá trabalho em dobro e costuma ficar desatualizado, porque alguém muda um preço num e esquece do outro.
Por que ter um site responsivo para celular
O primeiro motivo é o seu cliente. Quem procura dentista, contador ou oficina na Grande Florianópolis muitas vezes está com o celular na mão, no ônibus, no carro ou no intervalo do trabalho. Se o site abre com letra miúda e o botão some no canto, ele volta para o Google e clica no concorrente.
O segundo motivo é o próprio Google. Ele usa a versão para celular do seu site para indexar e classificar as páginas. Isso tem nome: indexação mobile-first (primeiro o celular). Está na documentação oficial do Google Search Central, que também recomenda o design responsivo como o modelo mais fácil de montar e manter.
Traduzindo: se a versão do celular esconde um serviço, corta um texto ou não carrega uma foto, para o Google aquilo não existe. Não adianta o site estar perfeito no computador do escritório.
Responsivo não é só caber na tela
Tem site que até encolhe, mas fica ruim de usar: botão colado no outro, formulário que some atrás do teclado, tabela que vaza para o lado. Responsivo de verdade é o site que dá para usar com uma mão só.
Como testar se o seu site é responsivo
Você não precisa de ferramenta paga. Pegue o seu celular, abra o site como se fosse um cliente e passe por esta lista. Se marcar três ou mais itens como problema, vale olhar com calma.
Faça o teste também no celular de alguém da família com um aparelho mais simples. O seu celular pode ser rápido e esconder um site pesado. E teste deitado: vire o celular na horizontal e veja se nada quebra.
- O texto dá para ler sem dar zoom com os dedos?
- Nada vaza para o lado, obrigando a arrastar a tela na horizontal?
- O menu abre e fecha direito com um toque?
- Os botões têm tamanho de dedo e não ficam colados uns nos outros?
- O botão de WhatsApp ou de ligar aparece sem procurar?
- O formulário dá para preencher sem o teclado tapar o campo?
- As fotos aparecem inteiras, sem cortar rosto ou produto?
- A página abre rápido no 4G, fora do Wi-Fi?
Para um olhar mais técnico, o navegador Chrome do computador tem a opção de simular telas de celular nas ferramentas de desenvolvedor (tecla F12). Serve para ver vários tamanhos sem ter vários aparelhos.
Mande o endereço no WhatsApp. A gente olha no celular e diz o que precisa mudar.
Os defeitos mais comuns em site no celular
Quando um site vai mal no celular, quase sempre o motivo está nesta tabela. Nenhum deles é difícil de arrumar, mas todos fazem você perder cliente sem perceber.
| Defeito | O que o cliente sente | Como resolve |
|---|---|---|
| Texto muito pequeno | Desiste de ler e volta para o Google | Fonte maior e linha mais curta no celular |
| Botão colado no outro | Aperta o errado e se irrita | Botões maiores e com espaço entre eles |
| Pop-up que tapa a tela | Não acha o X para fechar | Tirar o pop-up ou deixar discreto |
| Foto pesada | Página demora e ele vai embora | Imagem no tamanho certo e em formato leve |
| Conteúdo escondido no celular | Não acha o serviço que procura | Mesmo conteúdo nas duas versões |
| Tabela que vaza para o lado | Precisa arrastar a tela | Tabela com rolagem própria ou em cartões |
Fonte: Google Search Central, guia de indexação mobile-first (recomendação de manter o mesmo conteúdo no celular e no computador). As demais linhas são boas práticas gerais de uso no celular.
Responsivo e rápido: as duas coisas andam juntas
Um site pode se arrumar direitinho na tela do celular e mesmo assim perder cliente por ser lento. No celular, a pessoa muitas vezes está no 4G, com sinal oscilando, e não espera a página carregar.
O que mais pesa costuma ser a imagem. Foto tirada no celular e colocada direto no site pode ter vários megas. O certo é redimensionar para o tamanho em que ela vai aparecer e usar um formato leve, como o WebP. Outro peso comum são scripts que ninguém usa mais: chat que não é respondido, pop-up antigo, código de ferramenta que já foi cancelada.
O Google tem uma ferramenta gratuita para medir isso, o PageSpeed Insights (pagespeed.web.dev). Ele mostra a nota do celular separada da nota do computador. Comece pela do celular, que é a versão que o Google usa para avaliar o site.
Todo site novo já sai responsivo?
Quase todos os temas e construtores de site hoje dizem que são responsivos. Dizer é fácil. O problema aparece quando você coloca o seu texto, as suas fotos e os seus botões. Um tema bonito na demonstração pode ficar pesado e torto com o conteúdo real.
Por isso, na hora de contratar, não pergunte só se o site vai ser responsivo. Peça para ver no celular dois ou três sites que a empresa já entregou. Abra, role, aperte os botões. É o teste mais simples e não custa nada.
Na nossa criação de sites para empresas, cada página é desenhada primeiro para o celular e depois ampliada para o computador. Assim o que importa (o serviço, o preço e o botão de contato) nunca fica escondido.
Se o seu site é antigo e não passa no teste, nem sempre precisa jogar tudo fora. Às vezes dá para ajustar o tema. Quando o site é muito antigo ou pesado, refazer costuma sair mais barato que remendar. Mais conteúdo sobre isso fica na categoria Criação de sites do blog.
Perguntas frequentes
O que significa site responsivo?
É o site que se ajusta ao tamanho da tela. O conteúdo é o mesmo no celular, no tablet e no computador; só muda a arrumação dos blocos.
Site responsivo ajuda a aparecer no Google?
Ajuda, porque o Google usa a versão do celular para indexar e classificar as páginas (indexação mobile-first). Sozinho não coloca ninguém no topo, mas um site ruim no celular atrapalha.
Como sei se o meu site é responsivo?
Abra no celular e veja se dá para ler sem zoom, se nada vaza para o lado e se os botões são fáceis de apertar. A lista completa está neste artigo.
Site responsivo e site mobile são a mesma coisa?
Não. Site mobile é uma segunda versão, num endereço separado, só para celular. Responsivo é um site só que se adapta. O Google recomenda o responsivo por ser mais fácil de manter.
Quanto custa deixar um site responsivo?
Depende do site. Às vezes é um ajuste no tema; às vezes compensa refazer. A criação de site parte de R$ 1.000, com preço fechado antes de começar.
