Design adaptativo

Abordagem que entrega layouts fixos diferentes pra cada tamanho de tela, em vez de um layout que flui.

Hard

O que é

Design adaptativo é a abordagem que entrega layouts distintos conforme o dispositivo ou o tamanho de tela que ele detecta. Diferente do responsivo, que se ajusta de forma fluida, o adaptativo trabalha com pontos de corte definidos e um design separado pensado pra cada um deles.

Na prática, isso significa que a versão de tablet pode usar tela dividida enquanto a de celular simplifica a navegação. A vantagem é poder desenhar cada experiência sob medida pras restrições já conhecidas, em vez de ter um layout único esticando e encolhendo pra dar conta de tudo.

O custo disso é mais trabalho, porque são várias versões pra manter. Por isso ele faz mais sentido quando os contextos de uso são bem diferentes, como um painel detalhado no desktop do escritório e uma interface enxuta pro celular usado em campo. Não à toa, muitos times acabam combinando adaptativo e responsivo.

Em uma frase

Como o uso no celular e no desktop é bem diferente, aqui faz sentido um design adaptativo.

A pergunta que ele responde

Quando vale fazer layouts separados por tela em vez de um layout só que se ajusta?

Quando usar

Faz sentido quando os contextos de uso por dispositivo são bem distintos e realmente justificam experiências separadas.

Como não usar

O cuidado é não escolher adaptativo por padrão e pagar o custo de manter várias versões quando, na verdade, o responsivo já resolveria.

Na prática

Pense num software corporativo que entrega um dashboard cheio de detalhe no desktop e uma versão bem enxuta no celular, pensada pra quem trabalha em campo e precisa de poucas informações na mão.

Não confunda com

Vale separar design adaptativo de design responsivo, porque eles lidam com a tela de jeitos diferentes. O responsivo flui de forma contínua conforme a tela muda, como um líquido que toma a forma do copo. O adaptativo entrega layouts fixos distintos por faixa de tamanho, como peças prontas pra cada situação. Um se molda; o outro escolhe entre versões.

D

Em inglês

Adaptive Design

Pronúncia

n/a

Também chamado de

design adaptativo, adaptive design, layouts por breakpoint

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre design responsivo versus adaptativo