Como fazer um site responsivo para telemóvel

Para um site funcionar bem no telemóvel há seis coisas a fazer, e a ordem importa mais do que a lista. As duas primeiras resolvem a maior parte dos problemas, não exigem programador e podem ser feitas hoje. As restantes precisam de quem mexa no código.

A maioria dos guias apresenta oito conselhos com o mesmo peso, o que não ajuda quem tem um site meio partido no telemóvel e precisa de saber por onde começar. Esta é a ordem por retorno.

O que "responsivo" quer dizer na prática

Um site responsivo reorganiza automaticamente o texto, as imagens, os menus e os formulários conforme o tamanho do ecrã, para que se consiga ler e navegar num telemóvel sem fazer zoom, sem arrastar a página para os lados e sem falhar botões.

Repare na distinção que interessa: não é o site "abrir" no telemóvel — abre sempre. É funcionar. A diferença mede-se numa coisa só, que é se um cliente consegue fazer o que veio fazer.

1. Imagens: a correção com maior retorno

Comece aqui, sempre. Em quase todos os sites lentos em telemóvel a causa são imagens: ficheiros grandes, servidos no mesmo tamanho a um computador de secretária e a um telemóvel com dados móveis.

Três coisas a fazer, por ordem. Redimensione as imagens para o tamanho a que são realmente apresentadas — uma fotografia mostrada com 800 píxeis de largura não precisa de ter 4.000. Comprima-as antes de as carregar, com qualquer ferramenta gratuita de compressão. E ative o carregamento diferido, para que as imagens em baixo na página só carreguem quando alguém lá chega; a maioria dos sistemas de gestão de conteúdos tem esta opção ligada por omissão, mas vale a pena confirmar.

É a única correção da lista que costuma dar um ganho visível sem tocar em código, e é frequentemente suficiente para passar no teste de velocidade.

2. Texto e espaçamento

A segunda correção também não precisa de programador na maioria dos sistemas, porque é uma questão de definições.

Aumente o tamanho de letra do texto corrente até ser confortável de ler com o telemóvel na mão, sem aproximar. Dê espaço entre linhas. Corte parágrafos longos em blocos curtos e use subtítulos, porque num ecrã estreito um parágrafo de dez linhas transforma-se num muro.

E verifique o contraste: cinzento-claro sobre branco parece elegante num monitor num escritório e desaparece num telemóvel ao sol. A referência é 4,5 para 1 entre o texto e o fundo, e há verificadores gratuitos onde basta colar as duas cores — está entre os critérios do guia sobre o que faz um site de qualidade.

3. Botões e menus pensados para dedos

No telemóvel não há ponteiro, há um dedo, e um dedo é impreciso.

Os botões e as ligações devem ter cerca de 48 píxeis de lado, com espaço entre eles. Botões pequenos e colados uns aos outros são a razão pela qual as pessoas carregam no sítio errado e desistem. O menu deve ser simples, com poucas opções visíveis, e o botão de contacto deve estar sempre acessível sem obrigar a voltar ao topo.

Evite janelas que tapem o ecrã inteiro. Num computador são incómodas; num telemóvel são frequentemente impossíveis de fechar, e a pessoa fecha o site em vez da janela.

4. Formulários

Se o objetivo do site é gerar contactos, o formulário é o sítio onde o dinheiro se perde.

Peça apenas os campos de que precisa mesmo para responder. Cada campo adicional reduz o número de pessoas que chega ao fim, e o campo que ninguém preenche num telemóvel é aquele que exige escrever muito. Os campos devem ser altos e fáceis de tocar, e o botão de envio tem de ser visível sem procurar.

Um detalhe técnico que compensa pedir a quem fizer o trabalho: definir o tipo correto de cada campo, para que o telemóvel abra o teclado numérico num campo de telefone e o teclado de email num campo de email. É pequeno, e nota-se.

5. Layout fluido e pontos de corte

Aqui já é preciso alguém que mexa no código, e é a parte que verdadeiramente torna um site responsivo.

Em vez de blocos com larguras fixas em píxeis, o layout deve usar medidas flexíveis e grelhas que se reorganizem conforme o espaço disponível. Colunas lado a lado num computador passam a uma coluna única no telemóvel.

Não são precisos muitos pontos de corte. Dois ou três chegam para quase todos os projetos: telemóvel, tablet e computador. Guias que propõem dezenas de pontos de corte estão a criar trabalho de manutenção sem ganho correspondente.

6. Testar em telemóveis reais

Deixe o teste para o fim, e faça-o a sério.

Abra o site no seu telemóvel, com dados móveis em vez de Wi-Fi, e percorra o caminho de um cliente até ao contacto. Repare se precisou de fazer zoom, se arrastou a página para os lados, se falhou algum botão, se desistiu antes do fim. Peça depois a alguém que não conheça o site para fazer o mesmo, e observe sem ajudar.

Complemente com o PageSpeed Insights no separador móvel, e com as ferramentas de programador do navegador para simular ecrãs diferentes.

Um aviso: o Teste de Compatibilidade com Dispositivos Móveis do Google e o relatório de Usabilidade Móvel do Search Console foram descontinuados no final de 2023. Muitos guias ainda os recomendam, e se um artigo lhe disser para os usar, provavelmente está desatualizado noutros pontos também.

E se o site não for adaptável de todo?

Há sites onde estas correções não se aplicam, porque o layout foi desenhado para um ecrã largo e adaptá-lo não é redimensionar, é redesenhar.

Nesse caso a pergunta deixa de ser como fazer e passa a ser quanto custa, e há um limite prático a partir do qual refazer sai mais barato do que remendar. Está tratado no guia sobre quanto custa fazer um site responsivo.

Como trabalhamos isto na Fazum

Construímos a pensar primeiro no telemóvel, e não ao contrário. Isso muda decisões logo no início: o que fica no topo da página, quantas opções tem o menu, que informação sobrevive quando o espaço é pouco.

Se já tem um site e quer saber em que estado está, corremos estes seis pontos sem custo e dizemos-lhe quais se resolvem com pouco e quais exigem trabalho de fundo. Muitas vezes a resposta são duas ou três correções, e é isso que dizemos mesmo quando significa um projeto mais pequeno para nós. Quando há trabalho maior, o âmbito é construído à volta do orçamento disponível, com faseamento e condições de pagamento flexíveis.

Peça-nos uma avaliação e respondemos em 24 horas, sem compromisso.

Depois de o site funcionar bem no telemóvel, o trabalho passa a ser de conteúdos e acompanhamento, e está reunido no guia sobre o que fazer depois de se ter um site.

Perguntas frequentes

Preciso de um site separado para telemóvel?

Não. Ter um endereço distinto para a versão móvel foi prática comum há uma década e hoje cria mais problemas do que resolve — conteúdo duplicado, ligações divididas entre duas versões e o dobro da manutenção. Um único site que se adapta é a abordagem correta.

Quanto tempo demoram estas correções?

As duas primeiras — imagens e texto — são normalmente trabalho de algumas horas. As restantes dependem do estado do código existente: numa base recente são dias, num site antigo com correções acumuladas de vários fornecedores podem ser semanas, e só é possível saber depois de o ver.

O meu site abre no telemóvel. Isso não chega?

Abrir e funcionar são coisas diferentes. Um site pode abrir e obrigar a fazer zoom para ler, ter botões impossíveis de acertar e um formulário que ninguém consegue preencher com uma mão. O critério útil não é se abre, é se um cliente consegue fazer o que veio fazer sem esforço.