Page 45 - Locaweb - Edição 38

locaweb45
10 Use
‘macetes’
enovas
saídas
Lopes sugere
alguns “truques” capazes de melhorar
o resultado final do projeto. “Use ‘em’
e porcentagens em todas as medidas
no CSS e não ‘px’ com valores fixos.
Prefira ‘em’ inclusive nas media queries.
Escreva suas media queries pensando
em breakpoints de design, não em
larguras fixas de certos dispositivos. Faça
imagens, vídeos, widgets, anúncios e
outras mídias também se adaptarem
responsivamente”, diz. “Use a meta tag
viewport sempre com ‘width=device-
width’. E não esqueça do CSS @viewport
para navegadores mais novos, como o
IE 10”, complementa. Já Moraes prefere
carregar o conteúdo sob demanda. “Use
ajax para isso. Traga o conteúdo quando
o usuário pedir e lembre-se sempre da
limitação da rede.”
7 Simplifique
sempre
“Depois que o projeto
estiver pronto, dê
mais uma olhada em
cada página e comece a simplificar”,
aconselha o designer da R/GA. Retire
imagens desnecessárias, textos muito
longos e funcionalidades que ninguém
vai usar quando estiver navegando no
smartphone. Lopes acha que uma boa
opção é evitar bibliotecas JavaScript
mirabolantes que prometemmágicas
no design responsivo. “Prefira CSS
puro sempre que der e soluções
simples e leves.” Moraes segue a
mesma linha. “Lembre-se da limitação
dos dispositivos. Arquivos muito
grandes não são cacheados. Portanto,
não importe bibliotecas javascripts
gigantes para coisas simples. Vale
muito mais a pena escrever um certo
efeito na mão, no javascript puro, do
que carregar um jQuery apenas para
fazer um display: none|block”, conta.
9 fiquedeolho
nausabilidade
Não adianta fazer um site com responsive
se ele não tiver uma boa usabilidade. “Faça
botões grandes porque usamos sites nos
mobiles, com nossos dedos. Na maioria das vezes, com os
dedões”, lembra o desenvolvedor da Locaweb. Eles não são
precisos como os mouses. Deixe bons espaçamentos entre
uma área de ação e outra. “Dar um tap sem querer em um
lugar quando se queria ir a outro não é bacana”, garante.
8 Teste, teste, teste
Tenha em mãos dispositivos com resoluções
diferentes, sistemas operacionais variados (Mac,
Windows, iOS, Android...) e navegadores diferentes
(Internet Explorer, Chrome, Safari...). Teste abrir o
site em uma Smart TV, em um videogame, em um aparelho de
GPS. Moraes garante que nem sempre é possível planejar tudo
apenas no layout. Lopes concorda. “Não se esqueça de que você
está desenhando para pessoas comuns, e não para designers
e programadores. Coloque o quanto antes o seu site à prova”,
explica. “Colher feedback de usuários reais é a melhor forma de
garantir que a experiência que você desenhou será usada para
valer quando o projeto for para a rua.”
iStock.com
responsivedesign