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!

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).

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!

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Do que você está precisando?

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

Quero um orçamento

Leia também...

...alguns textos que têm a ver com o assunto:

Design responsivo ou versão mobile: qual é a melhor opção?

Qual é a melhor solução: design responsivo ou versão mobile? Seu site precisa ser acessível em tablets e smartphones – saiba qual é a opção ideal!

Repaginação de site, ou redesign: Novo site responsivo

Casa de ferreiro, espeto de pau? Aqui não! Eu trabalho com criação e desenvolvimento de sites, então ter um site responsivo é obrigação. Confira o processo do trabalho!

O que é versão mobile? É mobile first? AMP?

Seu site não tem versão móvel? Saiba mais sobre versão mobile, suas vantagens e desvantagens. Spoiler: mobile-first não tem nada a ver com isso! AMP? Mais ou menos.

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento