Page 49 - Locaweb - Edição 35

responsivewebdesign
locaweb49
De acordo com
os especialistas
entrevistados
pela Locaweb em
Revista, para se ter
um site responsivo,
são necessários
três ingredientes
técnicos: media
queries, layout fluido
e imagens flexíveis.
Com as media
queries do CSS3, é
possível criar regras no
CSS que só se aplicam a
determinadas situações,
como em resoluções de
tela específicas e até de
acordo com a orientação
do dispositivo ou sua
densidade de pixels.
E que valores usar
nas media queries? Lopes ensina
que há vários frameworks CSS que
trazem valores predefinidos para
os breakpoints do layout, como os
comuns 320px, 480px, 600px, 768px e
992px. Não à toa, são valores derivados
de tamanhos de iPhone, iPad e tablets
de 7 polegadas.
“Usar valores pensados em
dispositivos comuns (device driven
breakpoints) pode levar o layout
a quebrar em certas resoluções
intermediárias”, avalia. O certo é criar as
media queries a partir das necessidades
do layout (content driven breakpoints).
“Faça a página e vá redimensionando.
Nos pontos em que o layout quebrar,
coloque media queries para ajustar.”
Mas vale lembrar que só media
queries não bastam. Seria impraticável
criar media queries para cada resolução
existente. Ele sugere usar poucas media
queries e fazer o layout fluir entre os
breakpoints. O segredo é não usar pixels
nas medidas. Imagens são baseadas
em pixels e, portanto, não muito fáceis
de tornar flexíveis. “Podemos usar
porcentagens para dimensionar imagens,
mas é preciso cuidado. Aumentá-la além
do seu tamanho original deixará o layout
pixelizado. E carregar uma imagem de
alta resolução para depois diminuí-la
via código vai deixar a página muito
carregada”, avisa. “O ideal é ter várias
imagens em resoluções diferentes, uma
para cada contexto”, sugere. Com media
queries, ajustam-se as imagens vindas de
CSS via background-image.
Além disso, é importante lembrar que
muitas imagens decorativas podem (e
devem!) ser substituídas por efeitos CSS3
– sombras, bordas redondas, gradientes
etc. E ainda podemos usar SVG para
gráficos vetoriais que escalam em todo
tipo de resolução. Lopes e Teixeira
pensam de maneira semelhante no que
se refere à priorização de conteúdo. É
preciso repensar todo o conteúdo para
descobrir o que realmente importa, e
remover o excesso. “Uma página mobile
não deve ser apenas um design menor,
mas uma completa reestruturação de
conteúdo”, frisa Lopes. “Só adaptar
o design de um site já existente
dificilmente funciona”, complementa
Teixeira. Responsive design é entregar
a mesma informação – útil e priorizada –
para todo mundo.
“Otimizar para mobile não significa
diminuir funcionalidades, e sim focar”,
ressalta o instrutor. Mesmo smartphones
modernos são dispositivos limitados:
baixo poder de processamento, pouca
memória, latências das redes 3G, etc.
A regra de ouro é sempre pensar na
experiência online que o usuário vai ter e
se adaptar ao máximo a isso.
DESIGNRESPONSIVO
NAPRÁTICA
sentado no computador, é provável que
tenha tempo de ver fotos do ambiente”,
analisa. “Mas, se entra no site do mesmo
restaurante pelo celular, possivelmente
está dentro do carro e precisa confirmar
o endereço”, brinca.
São funções diferentes que o site
assume dependendo do contexto
de uso. Entender isso e pensar qual
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 inicial,
o design responsivo fica sendo apenas
uma firula tecnológica”, avalia.
Convém prestar atenção em alguns
pontos importantes. É preciso saber,
mesmo que de maneira aproximada,
qual a frequência de uso dos clientes
ou usuários de dispositivos móveis, o
tamanho do site a ser modificado e a
quantidade de informação importante
que os usuários precisam acessar. Um
arquiteto de informação, um designer
e um desenvolvedor client-side são
peças-chave. Lopes lista a priorização de
conteúdo, a organização da informação
e da usabilidade da página como tópicos
mais importantes da empreitada. “Os
elementos técnicos de um design
responsivo são relativamente fáceis de
aprender (media queries, viewport, CSS
fluido). O desafio é focar na priorização,
encontrar o conteúdo central e
desenvolver em cima dele. E a estratégia
de começar pelo mobile (‘mobile first’)
ajuda muito”, diz.
Desenvolver pensando apenas em
alguns dispositivos ou testar apenas
no próprio smartphone e entender que
está tudo certo nos demais é mais uma
falha. Muitos projetos de web móvel
são, infelizmente, focados demais em
iPhones e iPads, e, quando muito, em
Androids. Mas há Nokias, Blackberries,
Badas e Windows Phones por aí,
entre outros. “Um desenvolvedor
mobile deve encarar a flexibilidade do
design responsivo não apenas como
resoluções diferentes, mas também
como plataformas e dispositivos
diferentes”, alerta Lopes, da Caelum.
Página do CSS: é possível criar regras que
se apliquem somente a determinados casos