locaweb
45
têm muito em comum. “De maneira
bem simplificada, o design adaptativo
seria uma variação do responsivo”,
explica Fabrício Teixeira, designer da
agência R/GA
,
que tem em seu portfólio clientes como
Google, Nike e Unilever. “A diferença é
que no adaptativo, o layout se adapta
para três ou quatro larguras de tela
específicas – e não pixel a pixel, como
no responsivo”, complementa.
Para Dani Guerrato, designer e co-
fundadora do estúdio PopUp Design
, de
São Paulo, ambas utilizam um único
conteúdo, centralizado no mesmo
código HTML em uma única URL. A
diferença está na abordagem de cada
uma. “Enquanto o design responsivo
preza por medidas relativas e grids
fluidos, o design adaptativo utiliza
medidas fixas.”
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 medida relativas,
como porcentagem e EM (unidade
de medida utilizada 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 client-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,
pois isso permite, em tese, que o
layout funcione perfeitamente em
qualquer tamanho de tela e até mesmo
nos futuros dispositivos”, diz Dani.
Utilizando uma base flexível é possível
realizar modificações grandes com
apenas algumas linhas de código.
Características
Grid flexível;
Consulta de mídia;
Imagens flexíveis;
Medidas relativas.
Vantagens
Usuário sempre terá um
design 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 (sem ferir o layout).
Desvantagens
Maior curva de aprendizagem
para o desenvolvedor iniciante;
Maior tempo de produção;
Dificuldade de implantação em
um produto existente (é necessário
reescrever o código HTML/CSS).
design
responsivo
O site do The Boston Globe é um exemplo de design responsivo: nele, a tela muda a cada
nova resolução; essa metodologia vem ganhando cada vez mais adeptos ao redor do planeta
Teixeira: "no design adaptativo, o layout
se adapta para três ou quatro larguras"
A ideia central
do design
responsivo é a
criação de um
layout que se
modifique de
acordo com
o dispositivo
do usuário
De acordo com Teixeira, da R/
GA e autor do site Arquitetura de
Informação
, “o design
responsivo é uma solução técnica que
permite também ocultar elementos
desnecessários nos dispositivos
menores, além de adaptar tamanho
de botões e links para interfaces
touch, em que o ponteiro do mouse
é substituído pelo dedo do usuário.
Outra característica é utilizar de forma
inteligente recursos mobile, como
geolocalização e mudança na orientação
do aparelho (horizontal ou vertical).”
Já no 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. O layout pode,
por exemplo, ganhar uma coluna extra
design
adaptativo
X
responsivo
