Site responsivo: o que é e porquê que o seu negócio precisa de um.

O que é um site responsivo

Um site responsivo é um site cujo layout se adapta ao ecrã em que é aberto. O mesmo endereço, o mesmo conteúdo, o mesmo site: no telemóvel o menu colapsa, as colunas empilham e as imagens encolhem; no computador tudo se estende para aproveitar o espaço. Isto faz-se com CSS (as regras de estilo do site) e chama-se responsive web design; em português, design responsivo ou web design responsivo.

O contraste é com os sites antigos, que tinham uma versão só de computador e, quando muito, uma segunda versão «móvel» num endereço separado (aqueles «m.osite.pt»). Duas versões significavam dois sites para manter, conteúdos que divergiam e um Google a indexar a versão pobre. A criação de sites responsivos resolveu isto: um só site, que se comporta bem em qualquer ecrã.

Porquê que isto importa para o seu negócio

Primeiro, porque é aí que os clientes estão. Quem procura um restaurante ao sábado à noite, um rent-a-car ao sair do avião ou o telefone de uma empresa, procura no telemóvel. Um site que obrigue a dar zoom para ler o menu está a pedir ao cliente para se esforçar; a maior parte não se esforça, sai.

Segundo, porque o Google também olha primeiro para o telemóvel. Desde a indexação mobile-first, o Google avalia e posiciona os sites pela versão móvel, não pela de computador. Se a sua versão móvel é uma débil versão reduzida do site, é essa a imagem que o Google tem de si, e é com ela que o compete nos resultados.

Terceiro, porque a velocidade anda no mesmo pacote. Um site responsivo bem construido é leve no telemóvel, e velocidade é tanto experiência de utilizador como fator de posicionamento. Site lento no móvel é o dobro do problema: chateia o cliente e desce no Google.

Como saber se o seu site é responsivo (2 minutos)

Os três testes da tabela lá em cima resolvem a dúvida sem ninguém ter de pagar nada por isso:

1. No telemóvel: abra a página principal, uma página de serviço e a página de contacto. Consegue ler sem dar zoom? Consegue clicar no telefone e no botão de contacto sem acertar três vezes?
2. No computador: estreeite a janela do navegador devagar. Num site responsivo, o conteúdo reorganiza-se à medida que a janela encolhe; num site fixo, aparece uma barra de scroll horizontal e as coisas cortam-se.
3. No PageSpeed Insights: cole o endereço do site em pagespeed.web.dev e leia o score móvel. Não precisa de 100; precisa de verde razoável e de não ver erros de usabilidade.

Se passou nos três, ótimo: confirme a cada redesign ou mudança de plataforma. Se falhou, o remédio depende do caso: às vezes é um ajuste de imagens e textos; outras vezes o site está tão datado que vale mais um redesign do que um remendo, veja como escolher quem faz o site.

O que é mobile first

Mobile first tem dois sentidos que se complementam. No desenho: é começar a desenhar pelo ecrã pequeno, onde o espaço é escasso, e só depois estender para o computador; o que obriga a priorizar o que realmente importa. No Google: é a forma de indexação descrita acima, em que a versão móvel é a referência para posicionar o site.

As duas ideias apontam para o mesmo sítio: o ecrã pequeno é o principal, não o secundário. Um site pensado primeiro para o computador e «depois adaptado» quase sempre fica pior do que um pensado ao contrário; e é por isso que o desenvolvimento de sites responsivos hoje começa pelas larguras do telemóvel.

Um site responsivo custa mais?

Não, porque responsivo já é o ponto de partida de qualquer criação de sites que se respeite. Os preços publicados neste site já são de sites responsivos: landing pages desde €800, sites institucionais desde €1.500, lojas online desde €3.000, e a assinatura mensal desde €49/mês com alojamento e manutenção incluídos. O que faz o preço variar é o âmbito (quantas páginas, que funcionalidades, quem fornece conteúdos), não a adaptação ao telemóvel.

Desconfie do oposto: quem cobrar um extra por «versão móvel» está a vender-lhe uma solução para um problema que já não devia existir. E se um prestador lhe disser que «responsivo é um adicional», é um sinal de que trabalha com técnicas datadas; o mesmo checklist do artigo sobre escolher prestador aplica-se aqui.

Se o seu site atual não é responsivo, a conta a fazer é redesign novo versus remendo. Um site de há dez anos raramente compensa ser arranjado por partes: perde-se mais tempo a contornar a base velha do que a reconstruir sobre uma moderna, e o guia de preços de criação de sites mostra o que esperar em cada âmbito.

Cinco erros comuns mesmo em sites «responsivos»

• Textos pequenos de mais no telemóvel. Responsivo não é só encolher; é reorganizar. Um corpo de texto que no computador parece elegante no telemóvel é ilegível.
• Botões colados uns aos outros. O dedo erra em alvos pequenos ou próximos. O padrão mínimo de toque confortável ronda os 44 por 44 pixels.
• Imagens pesadas. O mesmo ficheiro de 4 MB servido ao telemóvel em rede móvel é a causa clássica de site lento; compressão e formatos modernos (WebP) resolvem.
• Popups que tapam o ecrã. No computador são um incómodo; no telemóvel, onde é mais difícil fechar, são a razão de saída imediata.
• Contacto e horários escondidos. No móvel, quem procura uma empresa quer ligar ou ir lá. Telefone clicável, morada e horário visíveis sem caçar menus.

A auditoria automática deteta a parte técnica destes erros em 30 segundos e ordena o que corrigir primeiro; a parte de usabilidade confirma-se com o teste do telemóvel, que nenhuma ferramenta substitui na totalidade.