O que é design responsivo ou adaptativo?

Design adaptativo e design responsivo são coisas diferentes? Sim... e não! Saiba mais sobre ambos, além de saber a diferença sobre versão mobile, e tire suas dúvidas!

  • Facebook
  • Twitter
  • Whatsapp

No início de um projeto, sempre paro pra me perguntar se usarei design responsivo ou design adaptativo no processo de criação.

Você certamente já ouviu falar sobre design responsivo (também chamado de “design adaptativo” — termos em inglês: responsive design e adaptive design).

Vamos manter contato?

Assine a newsletter do blog preenchendo o formulário!
Se precisar de algo, solicite um orçamento. É sem compromisso!
Se não quiser nada disso, sem problemas! Continue lendo o post abaixo :D

A essa altura do campeonato, se você trabalha com internet (ou apenas acompanha as novidades), você já deve estar cansado de saber o que é design responsivo. E apesar de chamarem também de design adaptativo, são coisas diferentes. Levemente diferentes, mas diferentes!

Mas muita gente ainda desconhece ambos, mesmo já tendo acessado sites responsivos. Então decidi escrever esse artigo pra explicar de forma simples não só o que é esse tal de design responsivo ou adaptativo, mas por que ele é importante para seu negócio.

Se você está precisando de um serviço com design responsivo, aproveite e me peça um orçamento! Eu trabalho com isso :D

O que é design responsivo?

Pra entender design adaptativo, primeiro vamos entender design responsivo. 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

Mas isso ainda pode gerar confusões!

Sabe quando você abre um site em seu smartphone e ele aparece de uma forma diferente de quando você abre em seu notebook, por exemplo? Isso pode significar uma dessas duas coisas:

Versão mobile

O site tem uma versão mobile, ou seja: quando você o acessa através de seu smartphone, o site detecta que um usuário está usando um dispositivo com uma tela pequena — então é exibida uma versão “compacta” do site (normalmente boa parte do conteúdo é resumido ou removido de vez dessa versão, deixando o site mais “limitado”).

Alguns sites têm duas versões mobile: uma para smartphones e outra para tablets.

versão mobile

Versão “original” e versão mobile da loja online Ponto Frio.

Ah, não confunda com mobile-first: São coisas diferentes! Saiba mais sobre versão mobile e mobile-first clicando no link.

Site responsivo

O site responsivo se adapta a qualquer tamanho de tela, exibindo exatamente o mesmo conteúdo tanto em monitores grandes quanto em smartphones pequenos (uma coisa ou outra pode ser removida ou resumida para melhorar a navegação, mas normalmente o conteúdo é o mesmo).

Ou seja, se você está em seu notebook ou computador de mesa agora, você pode abrir um site responsivo em seu navegador e brincar de redimensionar a largura do browser (arraste o canto lateral direito, por exemplo, do seu navegador, deixando-o menor aos poucos — quando um site é responsivo, ele irá acompanhar a largura do site, diminuindo aos poucos).

Faça o teste, ó: https://www.fabiolobo.com.br

design responsivo

Sim, meu site é responsivo! :D

Aqui vai um vídeo — em inglês — que resume bem a ideia:

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.

Por que ter um site com design responsivo ou adaptativo?

Bom, são várias vantagens. Se você não tem um site responsivo nem adaptativo, as vantagens são infinitas! Um dos pontos mais importantes é: se seu site não é responsivo, quando alguém acessá-lo pelo smartphone, a navegação será bem complicada.

O usuário precisa dar zoom para ler o conteúdo, arrastar a tela várias vezes até encontrar o que precisa e, muitas vezes, o site vai apresentar vários bugs. Certamente você já deve ter perdido algum cliente por causa disso… e nunca saberá.

site não responsivo

Se meu site não fosse responsivo, ele seria assim. Veja como a navegação no smartphone fica prejudicada!

Outra vantagem que sempre costumo citar: vamos supor que você é um arquiteto e está na casa de um cliente para orçar um projeto. Seu cliente pede para que você mostre alguns de seus trabalhos, e normalmente você tem duas opções: carregar sempre seu notebook ou então uma pasta com fotos.

Com um site responsivo você poderia apresentar seu portfolio no seu próprio celular (ou então seu próprio cliente poderia acessar seu site do smartphone dele), o que é bem mais prático.

Praticidade é uma palavra forte na web: um usuário deve navegar em seu site com a maior facilidade possível. E design responsivo só tem a contribuir, nesse caso.

Responsivo ou adaptativo, o importante é ser acessível

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!

Qualquer coisa, sinta-se à vontade para me pedir um orçamento quando quiser.

Esses dias uma pessoa me solicitou um orçamento, através de seu smartphone, quando estava dentro do ônibus. Com o crescimento de dispositivos móveis, a oportunidade também se tornou móvel. Então, não fique parado!

  • Facebook
  • Twitter
  • Whatsapp

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Comente!

Espaço reservado apenas para comentários sobre o post. Então, se você deseja um orçamento, por favor, entre em contato para que possamos conversar.

Quem é Fabio Lobo?

fabio lobo

Sou eu! Quer saber ainda mais sobre mim?

Bom, a maioria dos trabalhos que faço — na área de web design e desenvolvimento front-end — é com WordPress, com foco em usabilidade, facilidade e performance (tudo isso com design responsivo, é claro!). Também sou fundador de outros projetos, como a WOWF e a FicaOn.

Quer saber mais sobre esse tal de Fabio Lobo? Veja meu currículo ou siga-me nas redes sociais acima. Ah! Você também pode acessar meu blog, que é focado em web design e desenvolvimento.