Design Responsivo ou Adaptativo? -
By Marcos Paulo Furlan	Artigos, Design, Web design design, design adaptativo, design responsivo, Web design 0 Comments
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.
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;
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.
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);
Medidas fixas.
Tempo de produção menor;
Maior controle de mudanças de design.
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.
Desde o começo de 2015 e até mesmo antes dele chegar, especialistas, pesquisas e estudiosos do mercado de social...
O papel do marketing na sociedade desde o seu surgimento, trata-se de um mercado de compradores e vendedores, onde...