Design responsivo é uma forma de construir sites em que a mesma página adapta o layout à tela em que é aberta, do celular pequeno ao monitor largo. Em vez de manter um site mobile e outro desktop, um site responsivo usa layouts flexíveis, imagens flexíveis e media queries de CSS para reorganizar o mesmo conteúdo para cada tamanho de tela. Hoje é o jeito padrão de fazer sites e a abordagem que o Google recomenda.
De onde veio o design responsivo
O termo foi criado pelo designer Ethan Marcotte no artigo “Responsive Web Design”, publicado na A List Apart em maio de 2010. O iPhone tinha três anos, e muitas empresas mantinham um site mobile separado, geralmente num subdomínio “m.”, ao lado do site principal. Marcotte propôs um único site que responde ao dispositivo, baseado em três ingredientes:
- Grid fluido: larguras em unidades relativas (porcentagens) em vez de pixels fixos.
- Imagens flexíveis: imagens que se ajustam dentro do contêiner.
- Media queries: regras de CSS que só valem quando a tela atende a uma condição, como uma largura mínima.
Essas três ideias ainda descrevem como um site responsivo funciona, embora as ferramentas de CSS tenham evoluído muito desde então.
Os princípios básicos
O conteúdo se reorganiza, não some
Uma página responsiva mostra o mesmo conteúdo em todos os dispositivos, só que organizado de outro jeito. Três colunas no desktop viram uma só no celular, o menu horizontal vira um botão e uma tabela grande rola dentro do próprio bloco. Esconder conteúdo importante no mobile é um erro comum, ainda mais porque o Google indexa a versão mobile das páginas.
O layout é fluido entre os breakpoints
O layout estica e encolhe junto com a tela e só muda de estrutura em algumas larguras chamadas breakpoints, ou pontos de quebra. Escolher bem essas larguras é um assunto à parte: veja breakpoints responsivos.
Mobile first
A maioria dos sites responsivos hoje é feita com a abordagem mobile first: o CSS base é o layout do celular, e as media queries acrescentam complexidade para telas maiores. Isso costuma gerar um CSS mais simples e páginas mobile mais rápidas. Mais em design mobile first.
Toque e densidade de tela também fazem parte
Design responsivo não é só largura. O celular é usado com os dedos, tem tela de alta densidade e alterna entre retrato e paisagem. Um site responsivo tem áreas de toque grandes o bastante para o polegar, imagens nítidas em telas de alta densidade e layouts que aguentam a rotação.
Design responsivo vs design adaptativo
| Design responsivo | Design adaptativo | |
|---|---|---|
| Layout | Um layout fluido que muda nos breakpoints | Vários layouts fixos, um por tipo de dispositivo |
| Entre tamanhos | Estica de forma contínua | Pula para o layout fixo mais próximo |
| Detecção do dispositivo | Não precisa; o CSS reage ao viewport | Geralmente pelo user agent no servidor |
| Manutenção | Um só código | Vários templates para manter sincronizados |
| Uso hoje | Quase todos os sites | Alguns sites e apps grandes com necessidades mobile muito diferentes |
“Adaptativo” às vezes é usado como sinônimo de responsivo. A diferença que importa é outra: layout fluido ou fixo, adaptação via CSS ou via servidor.
Como o design responsivo é feito hoje
O CSS moderno deixa o responsivo muito mais fácil do que em 2010:
- A meta tag viewport diz ao navegador do celular para usar a largura do dispositivo. Sem ela, nada mais funciona. Veja a meta tag viewport.
- Flexbox e CSS Grid criam layouts que quebram linha sozinhos.
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))gera uma grade de cards que vai de uma a quatro colunas sem nenhuma media query. - Media queries mudam o layout nas larguras escolhidas e também reagem à orientação, ao modo escuro, à redução de movimento e ao tipo de entrada. Sintaxe e exemplos: guia de media queries CSS.
- Container queries deixam um componente reagir à largura do próprio contêiner em vez da tela inteira, então um card fica certo tanto na barra lateral quanto na coluna principal.
- Tipografia fluida com
clamp()ajusta o tamanho dos títulos de forma contínua. - Imagens responsivas com
srcsetesizesdeixam o navegador baixar um arquivo do tamanho certo para a tela.
Frameworks como Tailwind CSS e Bootstrap juntam essas técnicas com breakpoints prontos.
Exemplos de padrões responsivos
- Column drop: as colunas vão descendo uma a uma conforme a tela estreita.
- Menu off-canvas: em telas pequenas, o menu desliza da lateral ao tocar num botão.
- Conteúdo prioritário: no celular, a ação principal (busca, “Reservar”) sobe para o topo.
- Tabelas responsivas: a tabela rola na horizontal dentro do contêiner ou cada linha vira um card.
- Direção de arte: um recorte diferente da imagem no celular com o elemento
<picture>.
Como testar um site responsivo
Teste em várias larguras, não só “celular” e “desktop”. Arraste o viewport responsivo no Chrome DevTools para achar onde o layout quebra e depois confira aparelhos específicos com o user agent real e a densidade de pixels de cada um. Uma visualização mobile em um clique, como a Mobile View Extension, ajuda nessa etapa, porque mostra a mesma página em modelos de aparelhos sem abrir o DevTools. Termine em celulares de verdade. O método completo está em como testar a responsividade de um site.
Perguntas frequentes
Qual é o principal objetivo do design responsivo?
Dar a cada visitante uma página legível e fácil de usar, com o mesmo conteúdo, seja qual for o tamanho da tela, a partir de um único código.
Responsivo é o mesmo que mobile friendly?
Design responsivo é uma forma de deixar o site adequado para celular, e a mais comum. Mas um site pode ser responsivo e ainda assim ruim no celular, por exemplo se os botões forem pequenos demais ou se ele carregar devagar. Veja como deixar um site responsivo.
Quem inventou o design responsivo?
Ethan Marcotte apresentou o termo e a abordagem em 2010, num artigo da A List Apart.