Responsividade mobile

Layout e conteúdo que se adaptam sozinhos a cada tamanho de tela, mantendo clareza e uso.

Hard

O que é

Responsividade mobile é a abordagem, de design e técnica, que faz o site ou app adaptar layout, conteúdo e função pra qualquer tamanho de tela, do monitor grande ao celular pequeno. Na prática, a página se reorganiza sozinha pra continuar legível e usável.

Muito produto trata isso como detalhe final, quando na verdade deveria ser uma das primeiras restrições, já que a maior parte do tráfego web hoje vem de celular. Layout quebrado, texto ilegível e botão minúsculo no mobile fazem a pessoa ir direto pro concorrente.

Responsividade bem feita não é só encolher conteúdo, porque é repensar a experiência pra contextos diferentes de tela, interação e atenção. E vale o argumento prático: um site só, que funciona em todo lugar, sai mais barato de manter do que versões separadas.

Em uma frase

A responsividade dessa página está furada, no celular o botão de compra fica minúsculo e o texto corta.

A pergunta que ele responde

Como eu faço o mesmo site funcionar bem do monitor grande ao celular pequeno?

Quando usar

Use em qualquer produto web que precisa funcionar bem em telas de tamanhos diferentes.

Como não usar

O cuidado é não só redimensionar o mesmo conteúdo e achar que resolveu, sem repensar o que o contexto mobile de fato pede.

Na prática

Pense em quem entra pelo celular e encontra o botão de compra minúsculo e o texto cortado. A pessoa abandona, e a venda some sem o time perceber de cara o que aconteceu.

Não confunda com

Vale separar responsividade de mobile design. A responsividade adapta o mesmo layout a vários tamanhos, enquanto o mobile design repensa a experiência pra realidade do celular. A primeira ajusta o que existe, o segundo redesenha pensando no contexto.

D

Em inglês

Mobile Responsiveness

Pronúncia

n/a

Também chamado de

responsividade, design responsivo

Origem

n/a

Fonte

Saiba mais

Ethan Marcotte, Responsive Web Design