Design responsivo: boas práticas para um site mobile first

Um site responsivo não é um site que “encolhe” no telemóvel: é um site pensado para se reorganizar com elegância em qualquer ecrã, do smartphone mais estreito ao monitor mais generoso, sem perder clareza, velocidade nem conversão. As boas práticas que fazem essa diferença são conhecidas e cabem numa lista curta: a meta tag viewport, grelhas flexíveis com unidades relativas, breakpoints definidos pelo conteúdo, imagens adaptadas a cada ecrã, navegação táctil evidente, acessibilidade e desempenho desde o primeiro esboço, e testes em dispositivos reais. Neste guia, a Cooprativa percorre cada uma delas com o detalhe que uma equipa de design e desenvolvimento usa no dia a dia, e explica porque a abordagem mobile first é hoje o ponto de partida mais sensato.

Em resumo

• Comece pelo ecrã mais pequeno: o mobile first obriga a decidir o que é essencial e enriquece a experiência à medida que o ecrã cresce.
• Use a meta tag viewport, grelhas com Flexbox ou CSS Grid e unidades relativas, e coloque os breakpoints onde o layout começa a degradar-se, não onde está um modelo de telemóvel.
• Sirva imagens do tamanho certo com srcset, sizes e picture, e trate o desempenho como parte do design, porque a rede móvel é mais lenta e mais instável.
• Garanta acessibilidade: conteúdo legível a 320 píxeis CSS sem scroll horizontal e alvos de toque com dimensão suficiente.
• Teste em dispositivos físicos e em vários navegadores: os emuladores ajudam, mas não reproduzem tudo.

Índice

• O que é design responsivo e porque pesa no negócio
• Mobile first: desenhar a partir do ecrã mais pequeno
• As boas práticas essenciais, passo a passo
• Acessibilidade e desempenho fazem parte do design
• Como testar um site responsivo
• Erros que ainda vemos com frequência
• A nossa perspetiva
• Um site que se adapta à sua marca, e ao seu público
• Perguntas frequentes
• Fontes

O que é design responsivo e porque pesa no negócio

Segundo a documentação da MDN sobre design responsivo, trata-se de um conjunto de práticas que permite às páginas alterar o layout e a aparência para se adequarem a diferentes larguras e resoluções de ecrã. Não é uma tecnologia única, é uma forma de pensar: o mesmo conteúdo, o mesmo endereço, uma composição que respira de forma diferente consoante o espaço disponível.

Para quem gere uma marca, a questão é menos técnica do que parece. O Google recomenda o design responsivo por ser o padrão mais fácil de implementar e manter, servindo o mesmo HTML no mesmo URL a todos os dispositivos, e a indexação do motor de pesquisa parte da versão móvel das páginas. Um site que falha no telemóvel falha, portanto, exatamente onde é avaliado.

Também o setor público português assume este princípio. O guia de boas práticas do Mosaico, a referência do Estado para serviços digitais, recomenda aplicações web que respondam de forma fluida e flexível às dimensões do navegador e a estratégia de progressive enhancement, para que o serviço funcione independentemente do dispositivo ou do navegador usado. Se é a fasquia para um serviço público, é razoável que seja também a fasquia para a sua marca.

Mobile first: desenhar a partir do ecrã mais pequeno

A MDN define mobile first como a prioridade dada ao design e ao desenvolvimento para ecrãs móveis: cria-se primeiro uma experiência que funciona bem num ecrã pequeno e depois enriquece-se essa experiência à medida que o ecrã aumenta. É o inverso do caminho tradicional, em que se desenhava para o desktop e se tentava, no fim, “arrumar” tudo num telemóvel.

A diferença não é cosmética. A Interaction Design Foundation descreve o mobile first como uma disciplina de produto: as restrições de espaço e de interação forçam decisões sobre prioridade, clareza e eliminação do que é dispensável. Na prática, isso traduz-se em quatro escolhas:

1. Priorizar o essencial. Que ação deve o visitante conseguir fazer em dez segundos? Pedir um orçamento, comprar, marcar uma reunião? Essa ação sobe para o topo.
2. Simplificar a navegação. Menos entradas de menu, nomes claros, caminhos curtos.
3. Organizar a hierarquia visual. Títulos, texto e botões numa ordem de leitura vertical que conta uma história.
4. Evitar dependências de hover. Menus e informações que só aparecem ao passar o rato não funcionam bem em ecrãs tácteis.

Para aprofundar a forma de ordenar conteúdos e prioridades num ecrã estreito, vale a pena ler sobre as prioridades do design mobile first aplicadas ao planeamento de layouts. E se o projeto ainda está na fase de arquitetura, o nosso guia sobre como planear um site ajuda a definir páginas, objetivos e conteúdos antes do primeiro wireframe.

As boas práticas essenciais, passo a passo

O SAPO UX resume as regras de usabilidade responsive num conjunto de hábitos que subscrevemos: planear antecipadamente as derivações do layout para todos os ecrãs, começar pelo mais pequeno, otimizar conteúdos e navegação e testar em dispositivos de vários tamanhos. Eis como isso se concretiza.

1. Declarar a viewport

Tudo começa numa linha no cabeçalho da página: meta name="viewport" content="width=device-width, initial-scale=1". Como explica o web.dev nos fundamentos do web design responsivo, esta instrução faz a página corresponder à largura do ecrã; sem ela, os navegadores móveis assumem geralmente uma largura de desktop de cerca de 980 píxeis e reduzem tudo, deixando o texto minúsculo e obrigando o utilizador a fazer zoom.

2. Construir com grelhas flexíveis e unidades relativas

Medidas fixas em píxeis são o inimigo silencioso da responsividade. A MDN recomenda unidades relativas e métodos de layout como Flexbox e CSS Grid, que são responsivos por natureza e se ajustam ao espaço disponível. Percentagens, fr, rem e em permitem que colunas, margens e tipografia acompanhem o ecrã em vez de lutarem contra ele.

Uma implementação comum, descrita na versão francesa do mesmo guia da MDN, começa com uma única coluna para ecrãs estreitos e acrescenta colunas quando há espaço suficiente. É mobile first traduzido em código: a base é simples, as camadas de complexidade chegam depois.

3. Definir breakpoints onde o design quebra

Um erro frequente é criar breakpoints para “o iPhone”, “o iPad” e “o portátil”. Os modelos mudam todos os anos; o seu conteúdo, não. A MDN aconselha a colocar os pontos de interrupção onde o design começa a degradar-se: alargue a janela do navegador devagar e, no momento em que uma linha de texto fica longa demais ou um cartão fica espremido, está ali o seu breakpoint. Na maioria dos projetos bastam três ou quatro, escritos com min-width para manter a lógica mobile first.

4. Usar container queries nos componentes

As media queries olham para o ecrã; as container queries olham para o contentor onde o componente vive. Um cartão de produto pode assim mudar de composição consoante esteja numa coluna lateral estreita ou numa área principal larga, sem depender da largura total da janela. Para sistemas de design com componentes reutilizáveis, é uma ferramenta que poupa muitas exceções.

5. Servir imagens à medida de cada ecrã

As imagens são, quase sempre, o maior peso de uma página. A MDN recomenda impedir que ultrapassem o contentor com max-width: 100% e disponibilizar ficheiros adequados a cada ecrã através de picture, srcset e sizes, para que um telemóvel não descarregue a mesma fotografia gigante que um monitor 4K. O elemento picture permite ainda uma direção de arte diferente: um enquadramento mais apertado no telemóvel, uma panorâmica no desktop.

6. Cuidar da tipografia e da leitura

Texto responsivo é texto confortável: tamanho base legível sem zoom, linhas que não ultrapassam uma largura agradável de leitura, entrelinha generosa e contraste suficiente. Unidades como rem permitem que o texto respeite as preferências de tamanho definidas pelo utilizador no próprio dispositivo, um pormenor de respeito que também é acessibilidade.

7. Desenhar navegação e alvos de toque para o dedo

O guia de componentes do Mosaico pede uma navegação móvel evidente e consistente, que não dependa de gestos ocultos e que mostre claramente onde o utilizador está, recomendando padrões conhecidos como a Tab Bar e o Navigation Drawer. A isto junta-se o espaço: botões precisam de área para o toque e links precisam de afastamento entre si, como sublinha a Stripe no seu guia de otimização móvel, que lembra também que as ações mais importantes devem estar visíveis de imediato, porque no telemóvel a atenção é curta.

Acessibilidade e desempenho fazem parte do design

Um layout que se adapta mas que é lento ou inacessível não cumpre a promessa. Por isso tratamos estas duas dimensões como critérios de design, não como tarefas de fim de projeto.

Na acessibilidade, a referência são as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2 do W3C. Três critérios tocam diretamente o design responsivo:

No desempenho, o telemóvel vive em redes mais variáveis e mais lentas. A Stripe recomenda imagens comprimidas, scripts assíncronos e a redução dos recursos que bloqueiam a renderização. Para a imagem principal de uma página, o atributo fetchpriority, combinado com preload, ajuda o navegador a descobri-la e a carregá-la mais cedo, uma técnica que o estudo de caso do YouTube no web.dev documenta, juntamente com a conclusão de que as melhorias de velocidade também se refletiram no tempo de visualização e nos utilizadores ativos diários. Velocidade não é vaidade técnica: é negócio.

Se quer saber por onde começar, o nosso artigo Comece pelo LCP explica a métrica que mede o carregamento do elemento principal e o que um gestor deve pedir à sua equipa.

Como testar um site responsivo

Testar é onde as boas intenções se confirmam. O ideal combina três camadas:

1. Ferramentas do navegador. O modo de dispositivo do Chrome DevTools e equivalentes permitem verificar rapidamente vários tamanhos. Mas a própria documentação do Chrome DevTools avisa que emuladores e simuladores não reproduzem diferenças de APIs, de suporte de CSS e certos comportamentos dos navegadores móveis, por isso servem para verificações pontuais.
2. Dispositivos reais. A MDN considera mais rigoroso testar em dispositivos físicos, cobrindo computadores, telemóveis e tablets, diferentes sistemas operativos e navegadores como Chrome, Firefox, Safari e Edge. Emuladores, máquinas virtuais e serviços na cloud são complementos úteis quando não há um laboratório completo.
3. Aparelhos modestos. O web.dev recomenda testar em dispositivos móveis de baixo desempenho, onde problemas de legibilidade, acessibilidade e velocidade aparecem primeiro. Um telemóvel de gama média com alguns anos diz mais sobre o seu público do que o topo de gama da equipa.

Uma lista de verificação prática para cada página-chave: o texto lê-se sem zoom? Há scroll horizontal em algum ponto? O botão principal está visível sem descer? Os formulários abrem o teclado certo (numérico para telefone, e-mail para e-mail)? O menu funciona com uma só mão? A página carrega aceitavelmente numa rede móvel fraca? No e-commerce, repita o exercício em todo o percurso de compra; o nosso guia de otimização do checkout detalha os pontos onde mais vendas se perdem.

Erros que ainda vemos com frequência

Reunimos outros tropeços clássicos no artigo UX/UI: 5 erros comuns em design de sites, útil para uma revisão rápida antes de um lançamento.

A nossa perspetiva

Na Cooprativa, olhamos para o design responsivo como olhamos para qualquer problema de comunicação: começa no público, não no código. Antes de discutir grelhas ou breakpoints, perguntamos quem chega ao site, em que momento do dia, com que pressa e com que intenção. A resposta quase sempre aponta para um telemóvel, uma atenção dividida e uma decisão que se toma em segundos.

É por isso que a nossa metodologia junta criatividade e tecnologia na mesma mesa desde o primeiro esboço. O designer que define a narrativa visual da marca trabalha lado a lado com quem a vai construir, para que a identidade não se perca quando o ecrã encolhe: as cores, a tipografia e o tom mantêm-se reconhecíveis, mas cada elemento ganha a sua própria coreografia em cada formato. Um site responsivo bem feito não é uma versão reduzida da marca; é a marca a falar com a mesma voz em salas de tamanhos diferentes.

E não damos o trabalho por terminado no dia do lançamento. O acompanhamento estratégico depois da entrega, a leitura dos dados reais de utilização e os ajustes que daí resultam fazem parte do processo, porque é aí que se mede o que verdadeiramente importa: reconhecimento, confiança e clientes que voltam.

— cooprativa

Um site que se adapta à sua marca, e ao seu público

Se o seu site atual se perde no telemóvel, ou se está a preparar um novo projeto e quer começar com as bases certas, a equipa da Cooprativa desenha e desenvolve experiências digitais mobile first, com UX/UI centrado no utilizador, desenvolvimento web e SEO integrados num só percurso.

Conheça o nosso serviço de design UX/UI ou descubra como trabalhamos o desenvolvimento de sites com SEO e fale connosco sobre o seu próximo projeto.

Perguntas frequentes

Qual é a diferença entre design responsivo e design adaptativo?

O design responsivo usa grelhas fluidas e unidades relativas para que o mesmo layout se reorganize continuamente em qualquer largura. O design adaptativo cria versões fixas para um número limitado de tamanhos de ecrã e escolhe a mais próxima. O responsivo é hoje a opção mais comum e a que o Google recomenda, por servir o mesmo código no mesmo URL.

Mobile first significa ignorar o desktop?

Não. Significa começar pelo ecrã mais pequeno para decidir o que é essencial e depois enriquecer a experiência à medida que o espaço aumenta. O desktop continua a receber atenção, com mais colunas, imagens maiores e funcionalidades adicionais, mas assente numa base que já funciona bem no telemóvel.

Quantos breakpoints deve ter um site?

Não há um número certo, porque os breakpoints devem surgir onde o conteúdo começa a degradar-se e não em tamanhos de aparelhos específicos. Na maioria dos projetos, três ou quatro bastam. Com Flexbox, CSS Grid e container queries, muitos componentes adaptam-se sozinhos e precisam de menos regras.

Um template responsivo é suficiente para ter boas práticas?

Um template responsivo resolve a estrutura base, mas não garante as escolhas de conteúdo, hierarquia, imagens otimizadas, acessibilidade nem desempenho. Esses resultados dependem da forma como o site é configurado e alimentado. Vale sempre a pena testar o resultado em dispositivos reais e medir a velocidade de carregamento.

Fontes

• Design Responsivo, MDN Web Docs
• Responsive web design, MDN Web Docs
• Responsive design, MDN Web Docs (francês)
• Mobile first, glossário MDN
• Getting started with CSS container queries, MDN
• Strategies for carrying out testing, MDN
• Mobile-first indexing best practices, Google Search Central
• Mosaico: boas práticas para dispositivos móveis
• Mosaico: componentes da interface
• Fundamentos do web design responsivo, web.dev
• Building a better web: a faster YouTube, web.dev
• Prework, web.dev
• Emular e testar outros navegadores, Chrome DevTools
• WCAG 2.2, W3C
• Regras e dicas de usabilidade para websites responsive, SAPO UX
• Mobile First, Interaction Design Foundation
• Otimização de dispositivos móveis, Stripe

Recomendações

• UX/UI: 5 Erros Comuns em Design de Sites
• Como planear um site: o guia prático passo a passo
• Comece pelo LCP: otimize a velocidade do site para gestores e donos