Recentemente foi publicado um artigo no blog do Google dando dicas de como projetar mobile sites para que estes sejam mais rápidos e acessíveis. O artigo original em inglês pode ser acessado aqui.
Faremos aqui um overview dessas dicas:
- Fornecer uma ligação entre a versão mobile e a versão para desktop a fim de evitar que os usuários naveguem com seus dispositivos móveis em sua versão desktop sem saberem que existe uma versão mobile trabalhada especialmente para eles.
- Usar uma URL simples e anunciá-la. De preferência curtas e fáceis de digitar.
Exemplos: m.yoursite.com, mobile.yoursite.com ou yoursite.com/mobile.
(mais dicas de como escolher a URL móvel neste artigo)
- Trabalhar a interface de forma a evitar o mínimo de digitação e com componentes visuais que facilitam a interação do usuário e que juntos sejam visualmente agradáveis em um formato pequeno.
O Gmail, por exemplo, fornece uma versão mobile que é mais acessível para dispositivos móveis.
- Pensar no ambiente em que seu mobile site será acessado, pois normalmente o acesso se dá em ambientes não tão confortáveis como em computadores desktop, as informações devem ser encontradas de forma rápida e fácil com conteúdos claramente identificados e sucintos.
- Formatar seu mobile site para visualização em diversos navegadores móveis e diferentes tamanhos de telas disponíveis no mercado de dispositivos móveis. Existem diversos navegadores, com diferentes características e formas de carregar páginas. Se você tiver uma audiência internacional, certifique-se de que seu projeto é flexível o bastante para atender os diferentes dispositivos nesses países.
- Reduzir o número de vezes que seu mobile site deve fazer uma requisição ao servidor. Evitar a abertura de novas conexões/requisições HTTP, que são freqüentemente o mais importante fator de poupança dos recursos do dispositivo.
- Em vez de ter um arquivo CSS que importa vários outros, ou um arquivo JavaScript que carrega outros pedaços de código, consolidar todas as dependências da sua página em um único arquivo. Reduzir a página para um único arquivo (e, portanto, uma única requisição) irá produzir um aumento na velocidade.
- Diminuir a quantidade de código. Quanto menos código, menor a quantidade de dados transferidos e mais rápido sua página carregará.
- Baixar os conteúdos de forma gradativa. Não carregar imagens que nunca serão vistas pelo usuário final e no caso de uma galeria de imagens, considerar o carregamento da imagem anterior e da próxima para aumento da velocidade da interface, mas nunca baixar imagens que estão “fora de alcance”.
- Usar novas funcionalidades do HTML a fim de melhorar a interação com o usuário. Navegadores HTML5 (Mobile Safari, Android) podem usar a cache para reduzir o tempo de inicialização da página e habilitar os recursos offline.
- Usar CSS3 ao invés de imagens sempre que possível. Navegadores HTML5 que suportem CSS3 (novamente, o Mobile Safari, Android) podem usar atributos de cantos arredondados, degrades, sombras, transformações de texto, telas e muito mais. Usando CSS para criar sua página em vez de imagens pode reduzir a transferência de dados.
- Se o seu mobile site deve atingir a grande maioria dos usuários, portanto ele deverá ser compatível com os mais variados dispositivos móveis. Em geral, quanto menos complexo o código, mais compatível ele será.
- Algumas advertências são dadas tais como o fato de que Flash ainda não é suportado pela grande maioria de dispositivos móveis e, portanto não é aconselhado usar. Muitos BlackBerrys não têm CSS e JavaScript habilitados por padrão e deve se considerar que a maioria dos usuários não irá descobrir que precisam destes recursos ou como podem ativá-los. JavaScript em dispositivos com processadores mais lentos podem ser difíceis de executar.
- A última dica dada pelo artigo já é bastante conhecida pelos desenvolvedores: Teste, teste e teste! Em especial no mundo do desenvolvimento mobile com tantos dispositivos diferentes é especialmente importante os testes. Navegadores mobile podem redimensionar textos e imagens e interpretar CSS de formas diferentes dos navegadores de desktop. Ler uma página de um mobile site em um dispositivo móvel pode dar uma sensação completamente diferente da leitura em um desktop. De forma alguma se deve assumir que a interação com o PC é equivalente à interação com os dispositivos móveis.
