Design Responsivo ou Adaptativo?

Design Responsivo ou Adaptativo?

Com o crescimento da variedade de dispositivos nos quais os websites são visualizados, seria enlouquecedor desenhar múltiplas versões de um mesmo site que suprissem cada uma dessas variações de tamanho e resoluções de tela disponíveis no mercado.

Mas qual usar? Responsivo ou adaptativo? O objetivo é o mesmo: fornecer ao usuário a melhor experiência de navegação, independentemente do aparelho que ele esteja utilizando. A principal diferença é que o adaptativo se adapta para três ou quatro larguras de tela e o responsivo pixel a pixel.

A ideia central do design responsivo é a criação de um layout que se modifique, automaticamente, de acordo com o dispositivo utilizado pelo usuário. Isso é feito usando unidades de medidas relativas, como porcentagem e EM (unidade de medida usada na tipografia) para o tratamento dos elementos do layout como textos, vídeos e imagens, e aplicado na prática por meio de técnicas cliente-side, como Css3 Media Queries e, em alguns casos Javascript. Um grid flexível é fundamental tanto para a criação do layout, quanto para sua aplicação, por isso permite, em tese, que o layout funcione perfeitamente em qualquer tamanho de tela e até mesmo nos futuros dispositivos.

Múltiplas telas

Múltiplas telas

O desig responsivo é uma solução técnica que permite também ocultar elementos desnecessários nos dispositivs menores, além de adaptar tamanho de botões e links para interfaces touch.

Outra característica é utilizar de forma inteligente recursos mobile, como geolocalização e mudança na orientação do aparelho.

Características do design responsivo

  • Grid flexível;
  • Consulta de mídia;
  • Imagens flexíveis;
  • Medidas relativas.

Vantagens:

  • Usuário sempre teráum designe otimizado, independente da plataforma;
  • Reaproveitamento do layout facilita manutenção e diminui o tamanho dos arquivos;
  • Maior acessibilidade já que as medidas relativas possibilitam modificações por parte do usuário, como aumento do tamanho da fonte.

Desvantagens:

  • Maior curva de aprendizagem para o desenvolvimento iniciante;
  • Maior tempo de produção;
  • Dificuldade de implantação em um produto existente (necessário reescrever o código HTML e CCSS).

Já o design adaptativo, a intenção não é transformar completamente o layout, mas sim realizar algumas adaptações para melhorar a experiência do usuário.

Características do design adaptativo

  • Grid fixo;
  • Consulta de mídia (media queries);
  • Imagens estáticas;
  • Medidas fixas.

Vantagens:

  • Tempo de produção menor;
  • Maior controle de mudanças de design.

 

Desvantagens:

  • Não está preparado para acomodar todos os dispositivos do mercado;
  • CSS não é tão bem reaproveitado;
  • Provável “quebra” do layout (breakpoints) em alguns tipos de resoluções.

 

O design responsivo, inicialmente, foi projetado como um conjunto de técnicas utilizadas em um ambiente cliente-side. As mudanças são feitas no código CSS ou por meio de Javascript e é browser de cada usuário o responsável por interpretar o código completo e entregar o layout para cada aparelho. O desenvolvimento adaptativo, em alguns contextos, pode também significar um conjunto de técnicas de programação server-side. A abordagem em relação as imagens é um bom exemplo prático. Enquanto no design responsivo pode-se trocar imagens utilizando media queries, no desenvolvimento adaptativo essa troca pode ser realizada no próprio servidor.

Se a ideia é melhorar um site que já existe e não se tem muito tempo, o design adaptativo pode quebrar o galho. Mas se você possui tempo, invista no design responsivo.


× Whatsapp