Design responsivo

Fazer a interface adaptar layout e conteúdo automaticamente a cada tamanho de tela.

Hard

O que é

Design responsivo é a abordagem de criar interface que se adapta sozinha ao tamanho de tela, à capacidade do aparelho e ao jeito de interagir, pra dar uma boa experiência em qualquer lugar que a pessoa acesse. É o oposto de desenhar só pro desktop e tratar o mobile como sobra.

O custo de ignorar isso cresce junto com o uso mobile. Quando você desenha só pro computador, perde quem não consegue usar bem no aparelho preferido e ainda compete em desvantagem com produto que funciona em todo lugar.

Na prática, é layout que se reorganiza por breakpoint, texto que mantém a legibilidade e imagem que escala mantendo proporção. E técnicas mais novas, como container query, deixam o componente se adaptar ao próprio espaço, não só à tela inteira, o que dá ainda mais flexibilidade.

Em uma frase

Vamos pensar em design responsivo desde o começo, porque a maior parte do tráfego entra pelo celular.

A pergunta que ele responde

Como faço a mesma interface funcionar bem tanto no monitor grande quanto no celular?

Quando usar

Ajuda em qualquer produto web ou app acessado em telas de tamanhos diferentes, o que hoje quer dizer quase todos.

Como não usar

O cuidado é não desenhar só pro desktop e remendar o mobile lá no fim, porque isso trata a maior parte do tráfego como se fosse exceção.

Na prática

Imagine um layout de três colunas no desktop que, no celular, vira uma coluna só, mantendo a hierarquia e a ordem de leitura. O conteúdo se reorganiza sem perder o sentido.

Não confunda com

Vale separar design responsivo de design adaptativo. O responsivo é fluido: ele ajusta o layout de forma contínua conforme a tela muda, como um líquido que toma a forma do copo. O adaptativo entrega layouts fixos, prontos pra faixas específicas de tela, trocando de um pro outro em pontos definidos. Um flui; o outro encaixa peças prontas.

D

Em inglês

Responsive Design

Pronúncia

rés-pon-siv di-záin

Também chamado de

design responsivo, responsivo, responsive

Origem

n/a

Fonte

Saiba mais

Ethan Marcotte, Responsive Web Design