Page 44 - Locaweb - Edição 38

responsivedesign
44 locaweb
4 Foqueno
tamanho
das
imagens
Carregue imagens
diferentes para cada tamanho de
tela. Se o site possui uma imagem
gigante na homepage, carregá-la
na versão mobile do site deixará o
HTML muito pesado. “Lembre-se
de salvar tamanhos diferentes de
cada imagem e, no caso de ícones,
tente trabalhar com vetores sempre
que possível”, salienta Teixeira.
Moraes, da Locaweb, assegura que
existem soluções melhores do que
apenas redimensionar as imagens.
“É possível servir outros arquivos
menores e mais compactados. Forçar
o cliente a baixar um arquivo gigante
para ver numa tela muito menor do
que um desktop não é nada legal
porque vai desperdiçar banda.”
5 Otimizeo
pesodosite
A sugestão de
Teixeira é trabalhar
com carregamento
progressivo de informações. “Alguns
sites forçam o usuário de celular a
carregar todo o conteúdo da versão
desktop, e depois ocultam alguns
conteúdos. Isso é ruim, porque o
conteúdo (e os kilobytes) já foram
carregados e não serão visualizados”,
lamenta. Lembre-se de que os
usuários de celular estão em uma
conexão 3G (e isso se estiverem com
sorte!). Lopes acha que é preciso
pensar em desempenho o tempo
todo. “Otimizar a velocidade de um
site é essencial para dispositivos
menos capacitados”, frisa. Já Moraes
indica passar o conteúdo estático
(imagens, javascritps, folhas css) por
compressores, os famosos minifiers.
Além é claro, do mod_deflate do
servidor (gzip).
3 Adoteo mobilefirst
De acordo com William Moraes, desenvolvedor
FrontEnd do site da Locaweb, pensar
primeiramente para a plataforma mobile não
deixa margem para excessos de conteúdo.
“Mobile First é uma metodologia que nos ajuda a manter o
foco, a melhorar a arquitetura da informação e a usabilidade.”
Para Lopes, a sugestão é começar pelo celular mais simples e
evoluir o design até chegar ao desktop completo.
6 Façanavegação
customizada
Desenhe a navegação para cada dispositivo ou
grupo de dispositivos. Pense em como o menu
se comporta em um desktop, em um tablet, em
um smartphone e em uma TV de 60 polegadas. Lembre-se de
que em alguns casos, o usuário está usando um mouse; em
outros, o próprio dedo, ou até mesmo o controle remoto da TV
ou do videogame. Lopes faz um alerta: “Adaptar um design
a diferentes dispositivos não é só pensar no tamanho da tela.
Pense em touch screen, recursos de hardware, orientação do
dispositivo, telas retina e muito mais”.
Shutterstock.com