46
locaweb
design
adaptativo
X
responsivo
à esquerda para aproveitar melhor o
espaço de monitores grandes ou ter
a navegação colapsada em um menu
único próprio para atender às telas
pequenas de smartphones. “O objetivo
do design adaptativo é tentar emular o
aspecto visual e a navegação do design
responsivo, mas sem abandonar as
medidas fixas”, sentencia a designer,
que também é desenvolvedora
front-end. A largura das colunas e
margens do grid é sempre a mesma
(geralmente determinada em pixels),
texto e imagens dificilmente recebem
qualquer tratamento especial. Ou
seja, o esqueleto do layout continua
o mesmo e o código HTML/CSS é
desenvolvido como nos métodos
tradicionais, declarando na folha de
estilo primeiramente os estilos para
desktop e só depois são descritas as
adaptações de dispositivos móveis
utilizando Media Queries (em oposição
a técnicas "mobile first").
O design responsivo, inicialmente,
foi projetado como um conjunto de
técnicas utilizadas em um ambiente
client-side. As mudanças são feitas no
código CSS ou por meio de JavaScript
e é o 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 a imagens
é um bom exemplo prático. Enquanto
Características
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;
Pode realizar um "upgrade"
em um layout já existente.
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.
design
adaptativo
no design responsivo pode-se trocar
imagens utilizando media queries, no
desenvolvimento adaptativo essa troca
pode ser realizada no próprio servidor
(impedindo que o usuário realize
downloads desnecessários).
“Se a ideia é melhorar um site que já
existe e você não possui muito tempo,
o design adaptativo pode quebrar
um galho, já que não é necessário
desenvolver novamente o código
CSS do zero. Mas se você possui uma
quantidade maior de tempo, investir
no design responsivo pode garantir
uma melhor visualização em uma
gama maior de aparelhos”, avalia Dani.
“Nada impede você, no entanto, de
utilizar o melhor de dois mundos e
combinar técnicas das duas esferas.”
O site Screaming Frog é uma página que adotou o design adaptativo: a plataforma
somente muda em determinados breakpoints e, em resumo, não abandona as medidas fixas
Teixeira acredita que o mais
importante é entender quais são as
necessidades do usuário em cada
dispositivo. Um site adota funções
diferentes dependendo do contexto
de uso. Basta pensar no exemplo de
um site de um cinema: em casa, você
pode até ler a resenha do filme. No
carro, quer saber o horário da sessão.
Entender esse contexto e pensar qual
o conteúdo mais relevante para cada
caso é um trabalho que deve ser feito
a quatro mãos pelo desenvolvedor e
pelo designer. “Sem esse pensamento,
o design responsivo fica sendo apenas
uma firula tecnológica”, avalia. Os
aliados para essa descoberta são o
arquiteto de informação, o designer e o
desenvolvedor client-side.
O objetivo do
adaptativo
é emular o
aspecto visual
e a navegação
do design
responsivo, sem
abandonar as
medidas fixas
