Design responsivo não é o site “caber” na tela do celular. É a página ser legível, tocável e rápida no aparelho e na rede que a pessoa tem — e ser essa versão, não a de computador, a que o Google lê para indexar o site. Um layout que encolhe e continua exigindo zoom, ou que esconde metade do conteúdo para caber, é responsivo no código e quebrado na prática.
Nos portais que a Auin opera, o celular não é a maioria por pouco: no OCP News, cerca de 80% dos acessos vêm de aparelho móvel. Em portal regional a proporção costuma ser essa ou maior. O que se decide olhando o site num monitor de 27 polegadas é decidido para a minoria dos leitores.
A parte que virou assunto de indexação, não de design
O Google indexa a versão móvel da página. Isso deixou de ser transição e virou o funcionamento normal da busca, e traz uma consequência que pega muito site bem-intencionado: conteúdo que o layout esconde no celular, para efeito de busca, praticamente não existe.
O caso mais comum não é malícia, é economia de espaço. Alguém decide que a coluna lateral com o texto institucional “não cabe no celular” e a esconde com uma regra de CSS. No computador o texto está lá; no índice do Google, não. O mesmo vale para bloco que só aparece depois que o visitante toca em “ler mais” — aí depende de o robô executar o script e simular o toque, e nem sempre vale contar com isso.
O que quebra de verdade num site de conteúdo
Depois de anos consertando isso em portal grande, os problemas se repetem, e nenhum deles é “o site não é responsivo”:
- O anúncio que empurra o texto. O espaço do anúncio é reservado depois que ele carrega, então o parágrafo que a pessoa estava lendo desce meia tela no meio da leitura. É a maior fonte de CLS ruim em portal, e o conserto é reservar a altura antes, não depois.
- O cabeçalho fixo que come a tela. Barra fixa em cima, barra de compartilhamento embaixo e um aviso de cookies no meio: sobra um terço da tela para a matéria. Em aparelho pequeno isso é a diferença entre ler e desistir.
- A imagem de 3 MB servida para uma tela de 360 px. O WordPress gera os tamanhos e monta o
srcsetsozinho; quem perde isso costuma ser o construtor de página ou o tema que insere a imagem à mão. - O alvo de toque pequeno demais. Link de menu com 20 px de altura funciona no mouse e erra no polegar. A régua prática é 44 px, com espaço entre um alvo e o outro.
- A tabela e o iframe. São as duas coisas que estouram a largura e fazem o site inteiro rolar de lado. Tabela pede rolagem própria; iframe pede proporção declarada.
- A fonte que chega depois. O texto aparece numa letra e troca para outra meio segundo depois, mudando a quebra de linha inteira. Resolve-se servindo a fonte do próprio domínio e declarando o comportamento de troca.
Como se confere, e por que o emulador não basta
Reduzir a janela do navegador testa o layout e mais nada. Ele não testa toque, não testa rede ruim e não testa o processador de um aparelho de entrada, que é onde o script de terceiro cobra caro.
A conferência que pega problema é esta:
- Abrir num aparelho de verdade, com rede móvel de verdade. De preferência num aparelho antigo, não no melhor da casa.
- Medir a rolagem lateral em 360, 390 e 768 px de largura. Não é olhar: é comparar a largura do documento com a da janela. Elemento escondido com
visibilitycontinua ocupando área de rolagem, e um menu fechado ancorado no lugar errado derruba a página inteira de lado. - Ler os Core Web Vitals de campo, separados por celular. O número de laboratório num computador rápido não descreve o leitor.
- Conferir se tudo que existe no computador existe no celular. Procurar por regra de CSS que esconde bloco inteiro em tela pequena é o atalho para achar conteúdo perdido do índice.
Responsivo, adaptativo e aplicativo
Três coisas diferentes, e a confusão custa dinheiro. Responsivo é um site só, um endereço só, que se reorganiza pela largura disponível — é o padrão, e é o que o Google prefere porque não há duas versões para divergirem. Adaptativo é servir versões diferentes do mesmo endereço conforme o aparelho; funciona, mas dobra o que precisa ser mantido e é onde nascem as divergências entre o que o leitor vê e o que o robô lê.
E aplicativo não substitui nenhum dos dois: ele serve a quem já é leitor fiel, com notificação e leitura offline, enquanto o site responsivo continua sendo a porta por onde chega quem vem da busca e das redes. Quando faz sentido ter os dois é assunto da página de desenvolvimento de aplicativo.
Perguntas frequentes
O que é design responsivo?
É um site único, num endereço único, cujo layout se reorganiza conforme a largura disponível: o que no computador são três colunas vira uma no celular, com texto legível sem zoom e alvos de toque grandes o suficiente para o polegar. O contrário de responsivo não é “site de celular separado” — é a página que encolhe sem se reorganizar e obriga a pessoa a ampliar para ler.
Meu site é responsivo. Ainda preciso me preocupar com celular?
Precisa, porque responsivo resolve o layout e não resolve peso, toque nem estabilidade. Os problemas que sobram são imagem grande demais para a tela, script de terceiro que trava a página em aparelho de entrada, anúncio que empurra o texto durante a leitura e conteúdo escondido no celular — este último some do índice do Google, que indexa a versão móvel.
Esconder conteúdo no celular prejudica o SEO?
Prejudica quando o conteúdo é removido do HTML ou escondido por CSS: o Google indexa a versão móvel, então o que não está lá tende a não contar. Conteúdo que existe no HTML e está apenas recolhido atrás de um acordeão costuma ser considerado, mas depende de execução de script e é aposta desnecessária. A saída é reorganizar o conteúdo para caber, não escondê-lo.
Preciso de um aplicativo se o site já é responsivo?
Não para ser encontrado — quem chega da busca e das redes chega no site, e é o site que precisa estar bom no celular. O aplicativo serve a outra coisa: leitor recorrente, notificação de matéria urgente, leitura offline e assinatura. É investimento para reter quem já vem, não para atrair quem ainda não veio.
