Criando layouts para dispositivos móveis
Autor: raph | Publicado: 2011-09-01T17:32:00-03:00



div.fonte-h4cont h4 {margin:0;padding:0 0 4px 0;font-weight:bold;font-size:100%;}


Recentemente escrevi um artigo onde pesquisei sobre as melhores pr&aacute;ticas na cria&ccedil;&atilde;o de layouts de sites e aplica&ccedil;&otilde;es a serem visualizados por dispositivos m&oacute;veis (mobile), achei por bem compartilhar esta informa&ccedil;&atilde;o aqui no blog:
1. Realize uma pesquisa sobre os  hardwares mais utilizados por sua audi&ecirc;ncia
O mercado de  dispositivos m&oacute;veis &eacute; recente, mas encontra-se em franca ascens&atilde;o. Uma das  maiores dificuldades para cria&ccedil;&atilde;o de layout mobile &eacute; a enormidade de  dispositivos diferentes que se encontram no mercado atualmente, e sua variedade  de resolu&ccedil;&atilde;o de tela.
Vejamos alguns  exemplos de resolu&ccedil;&atilde;o de tela (largura vs. altura, em pixels): 101x80 (muitos  celulares da Sony Ericsson); 128x128 (alguns celulares da Samsung); 120x160  (muitos celulares da Motorola); 320x480 (iPhone); 480x640 (HTC Touch Pro);  320x480 (Palm Pre); 360x480 (BlackBerry Storm); 800x480 (HTC Venus); 800x640 ou  superior (engloba a grande maioria dos tablets, como o iPad).
Em meio a tantas  possibilidades de resolu&ccedil;&atilde;o de tela, o mercado parece ter chegado a uma  conven&ccedil;&atilde;o &ndash; uma resolu&ccedil;&atilde;o padr&atilde;o que teoricamente deveria servir para a maioria  dos dispositivos m&oacute;veis. Essa resolu&ccedil;&atilde;o tamb&eacute;m &eacute; seguida por diversos softwares  de aplicativos para mobile: 320x480 &ndash; ou  seja, 320 pixels de largura por 480 pixels de altura.
Dessa forma, a  menos que esteja criando um site espec&iacute;fico para uma certa gama de dispositivos  m&oacute;veis, recomendamos que use layouts que fiquem ao menos bem estruturados e  naveg&aacute;veis mesmo quando limitados a uma resolu&ccedil;&atilde;o de 320x480 pixels. 
2. Simplifique seu layout
A regra de ouro  para layout criados para dispositivos m&oacute;veis &eacute; que eles devem ser simples,  minimalistas e focados na funcionalidade. Cada p&aacute;gina geralmente dever&aacute; conter  apenas uma lista ou um texto de detalhes (conforme o tradicional &ldquo;lista e  detalhes de not&iacute;cias&rdquo;), os menus n&atilde;o devem ser muito extensos, as imagens  pequenas, e os efeitos de drop-down com mouseover limitados ao m&aacute;ximo.  Apenas os bot&otilde;es devem ser proporcionalmente maiores, pelo menos em rela&ccedil;&atilde;o aos  layouts tradicionais, pois devemos lembrar que em dispositivos com tela  sens&iacute;vel ao toque, muitas vezes os cliques ser&atilde;o feitos com o pr&oacute;prio dedo do  usu&aacute;rio &ndash; e a &aacute;rea de clique deve ser, portanto, maior.
3. Valide seu c&oacute;digo
Conforme se torna cada  vez mais dif&iacute;cil testar nosso c&oacute;digo nos diversos dispositivos m&oacute;veis do  mercado, torna-se ainda mais importante termos um c&oacute;digo que siga os padr&otilde;es estabelecidos.  Assim reduziremos muito a probabilidade de nosso site mobile n&atilde;o funcionar  neste ou naquele dispositivo m&oacute;vel de que nunca ouvimos falar &ndash; ou que ainda  sequer foi lan&ccedil;ado<!-- (ver a se&ccedil;&atilde;o 2 deste artigo)-->.
4. Inclua um link para o site  tradicional
&Eacute; recomend&aacute;vel  incluir um link para a vers&atilde;o do site com o layout tradicional, normalmente no  rodap&eacute;. Muitas vezes o usu&aacute;rio estar&aacute; usando um tablet (como o iPad, por  exmplo), e prefere visualizar o site em sua vers&atilde;o tradicional.
5. Crie um CSS exclusivo para a  vers&atilde;o mobile
Embora seja vi&aacute;vel  criarmos um CSS que atenda tanto a vers&atilde;o tradicional quanto a m&oacute;bile, na  pr&aacute;tica do mercado rapidamente se constatou que &eacute; muito mais simples a  separa&ccedil;&atilde;o de ambos os layouts em arquivos CSS espec&iacute;ficos. Muito embora seja  interessante que as cores gerais e fam&iacute;lias de fontes sejam pr&oacute;ximas do layout  tradicional, o layout mobile tem caracter&iacute;sticas muito espec&iacute;ficas para que  fa&ccedil;a sentido o uso do mesmo CSS da vers&atilde;o tradicional do site.
6. Evite o scroll horizontal no site
Muitas vezes os  dispositivos m&oacute;veis tem uma tela pequena, e devem ser manuseados com os  pr&oacute;prios dedos do usu&aacute;rio. Nesse sentido, &eacute; ideal evitar a todo custo que o  site na vers&atilde;o mobile possua quaisquer barras de scroll horizontais &ndash; o ideal &eacute;  seguir o padr&atilde;o de quase todo dispositivo m&oacute;vel e usar apenas barras de scroll  verticais. Isso, na pr&aacute;tica, significa que devemos evitar ao m&aacute;ximo que qualquer  elemento do nosso layout &ldquo;estoure&rdquo; os 320 pixels de largura, largura padr&atilde;o  para resolu&ccedil;&otilde;es de tela de dispositivos m&oacute;veis<!--(ver 5.1)-->. Esta recomenda&ccedil;&atilde;o  pode ser revista para, por exemplo, um portal que deva ser acess&iacute;vel apenas por  &lsquo;tablets&rsquo;, que apresentam maior resolu&ccedil;&atilde;o. 
7. Evite o uso de pop-ups ou links  que abrem em novas janelas
A navega&ccedil;&atilde;o atrav&eacute;s de  dispositivos m&oacute;veis n&atilde;o costuma funcionar muito bem com pop-ups ou links  abrindo em novas janelas. Se for estritamente necess&aacute;rio o uso desses links, &eacute;  recomend&aacute;vel que alerte que ele abrir&aacute; nova janela com alguma mensagem curta,  ou &iacute;cone, ao lado do link.
8. Limite o uso de imagens
Layouts para mobile  devem usar o menor n&uacute;mero de imagens poss&iacute;veis. Tamb&eacute;m &eacute; preciso tomar cuidado  em especial com o tamanho dos arquivos de imagem, visto que no geral a  qualidade da conex&atilde;o de dispositivos m&oacute;veis ser&aacute; inferior, e as imagens n&atilde;o  podem ser muito pesadas (em Kbytes). O ideal &eacute; usar apenas a logomarca, alguns  &iacute;cones de navega&ccedil;&atilde;o e imagens de fundo para bot&otilde;es e outros elementos. &nbsp;Em uma interface de lista de not&iacute;cias, por  exemplo, &eacute; recomend&aacute;vel que existam imagens apenas nos 3 primeiros itens,  deixando o restante dos itens da lista apenas com o t&iacute;tulo (e eventualmente a  descri&ccedil;&atilde;o).
9. Evite ao m&aacute;ximo o uso de flash e  javascript
Nem todos os  dispositivos m&oacute;veis suportam flash e javascript. Conforme os layouts para  mobile tendem a favorecer uma navega&ccedil;&atilde;o simples e funcional, o uso desse tipo  de tecnologia pode e deve ser evitado. O caso do flash &eacute; mais grave, visto que  at&eacute; o momento os iPhones e iPads n&atilde;o s&atilde;o compat&iacute;veis com flash (assim como  alguns dispositivos m&oacute;veis que vem com o sistema operacional Android, pelo  menos na vers&atilde;o nativa). &nbsp;Algumas  anima&ccedil;&otilde;es e v&iacute;deos podem ser criados utilizando a nova tecnologia do HTML5, Canvas, que &eacute; compat&iacute;vel com diversos  dispositivos m&oacute;veis modernos (maiores informa&ccedil;&otilde;es sobre a Canvas aqui: http://en.wikipedia.org/wiki/Canvas_element)

***
Cr&eacute;dito da imagem: Rafael Arrais (exemplo de layout para uma aplica&ccedil;&atilde;o de uma seguradora de sa&uacute;de fict&iacute;cia)