Design adaptativo x Design responsivo

Design adaptativo e design responsivo são coisas diferentes? Sim... e não! Saiba mais sobre ambos e tire suas dúvidas!

No início de um projeto, sempre paro pra me perguntar se usarei design responsivo ou design adaptativo. Bom, no post sobre design responsivo, comentei que ele também é conhecido como “design adaptativo” (termos em inglês, respectivamente: responsive design e adaptive design) – ou seja, disse que os dois são a mesma coisa. Pois bem, de certa forma são, e as diferenças entre os dois são tão pequenas que eu prefiro dizer que design adaptativo é design responsivo e vice-versa.

Mas vamos por partes.

» Siga-me no twitter e assine a newsletter para ler mais novidades!

O que é design responsivo?

Saiba mais: o que é design responsivo.

Pra entender design adaptativo, primeiro vamos entender design responsivo – e isso você pode ver no link acima. Em resumo: é uma ~tecnologia~ que faz com que seu site se adapte a diferentes formatos de tela, como smartphones e tablets, reorganizando todo o conteúdo para que ele “encaixe” perfeitamente no formato de tela.

design responsivo

Sim, meu site é responsivo! :D

O que é design adaptativo?

Sabe o que eu disse acima? Se aplica aqui também!

A diferença é o seguinte: enquanto o responsivo acompanha exatamente a largura do dispositivo, o adaptativo tem uma medida fixa para cada resolução diferente. Por exemplo, na maioria dos projetos de sites adaptativos que fiz (e você poderá vê-los em meu portfolio), trabalhei com as seguintes resoluções (em larguras): 1366px (desktop/laptop), 1024px (laptop/tablet), 768px (tablet/phablet), 480px e 320px (smartphone). Ou seja, cada uma dessas resoluções contava com design específico para ela. Logo, se alguém acessar um desses sites em um dispositivo com largura de 1280px, irá ver o design feito para resolução de 1024px (já que o de 1366px é maior). Se o dispositivo tiver 640px de largura, a versão exibida é a de 480px.

design adaptativo

O site da Porto Fácil é adaptativo.

Já no caso do design responsivo, como ele sempre acompanha a largura da tela, tanto no dispositivo de 1280px quanto no de 640px de largura, o site aparecerá exatamente nessas medidas. Então, podemos dizer que o design responsivo é flexível (o que é bom, porque o usuário terá sempre a sensação de a tela estar totalmente preenchida) e o design adaptativo é mais restrito (o que é bom, porque o site sempre estará bem diagramado e alinhado) – ainda assim, o design responsivo precisa de uma medida máxima e uma mínima, senão vira bagunça! Apesar dessa diferença, ambos tem a mesma finalidade: tornar o site acessível em diversas resoluções. Em ambos os casos, o design se adapta a tela. Em ambos os casos, o design responde a diferentes resoluções.

Design responsivo x Design adaptativo

Pra não restar dúvidas, veja a animação abaixo:

responsivo x adaptativo

Responsivo x Adaptativo em um gif

E também uma comparação entre os dois exemplos acima no iPhone 6 Plus:

responsivo adaptativo

Responsivo x Adaptativo em uma comparação

À esquerda, meu site – responsivo – “preenche” toda a tela do dispositivo, que é de 540px de largura. À direita, o site adaptativo aparece com margens maiores nas laterais, pois exibe o design feito para resolução de 480px de largura. Diferença quase imperceptível, né?

Qual é melhor: Design responsivo ou Design adaptativo?

A meu ver, depende do conteúdo e da estrutura do site. Alguns sites ficam melhor com uma diagramação “fixa”, fazendo o uso do design adaptativo melhor. Na maioria dos casos, ambas as soluções podem ser utilizadas – meu site mesmo era adaptativo e hoje é responsivo, com praticamente o mesmo layout.

Em relação a complexidade, o design responsivo é mais complexo por não trabalhar com medidas absolutas, e sim com porcentagens. Por outro lado, o design adaptativo acaba ficando um pouco mais pesado, pois o código é maior.

Responsivo ou adaptativo, o importante é ser acessível

Leia também: o que é versão mobile?

Ter um site responsivo/adaptativo não é mais um diferencial hoje em dia: é obrigação. Cada vez mais dispositivos móveis vem sendo usados para tudo no dia-a-dia, e a tendência é que os computadores sejam deixados de lado por muita gente.

Já parou pra pensar se você já perdeu algum cliente ou alguma venda por que seu site não funciona bem em smartphones, por exemplo? Pode acontecer!