segunda-feira, 26 de agosto de 2013

Dicas para programação de sites mobile

Aqui vão as minhas dicas para quem esta iniciando neste maravilhoso e complicado mundo de site mobile:

- É possível implementar aplicações responsivas (onde a página se ajusta, através de folhas de estilos, conforme o tamanho da tela/navegador), porém é um pouco difícil de se fazer, se as telas de desktop e de mobile forem muito diferentes (Quer mais informações? Entre no site da wikipédia: http://pt.wikipedia.org/wiki/Web_Design_Responsivo).

- Evitem usar muitas imagens "pesadas" para web-mobile, para que o usuário não sinta uma "lentidão" no sistema.

- Efeitos visuais não são recomendáveis, pois alguns aparelhos de baixo processamento não suportam muito bem isso (travam, ficam lentos, etc.).

- Evitem usar tamanhos fixos no estilo e nos elementos, tentem usar o máximo possível de porcentagem ou "em".

- Se sua aplicação checar se o navegador é mobile via User-Agent (cabeçalho da página web onde pode-se identificar o navegador e sistema operacional que requisitou esta), vocês podem emular isso via plugins, como este:

 - Se necessário, não esqueçam da meta tag viewport:

- Se vocês não tiverem dispositivos para seus testes, pode-se emular alguns destes via web, através do site:
 http://www.mobilephoneemulator.com/ (Não é 100% confiável, mas é alguma coisa).
     
Obs.: Recomendação para esta ferramenta: para melhor emulação, abram esta url no Google Chrome (para testes no Android) e/ou no Safari (para testes no iPhone).

- Em testes finais, sempre usem dispositivos reais.

- Se for necessário implementar algum efeito visual, testem no pior dispositivo possível (com o menor processamento, tela pequena e pouca memória).

- Sei que isso vale mais para desenvolvimento nativo, mas sempre deem uma olhada nos guidelines disponíveis para Android (http://developer.android.com/design/index.html) e para iOS (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html), pois estes dão dicas legais para quem esta começando. :)

Espero que isso ajude alguém...

Até mais!

Um comentário:

Anônimo disse...

Muito boa dica,
Vlw man