Desenvolvendo Web Sites Para Dispositivos Móveis

A mobilidade ganhou espaço de uma forma incrivelmente rápida e surpreendente. Palms, Pockets Pcs, Cliés e até mesmo o Da Vinci, se tornaram tão populares que já é comum encontrá-los com freqüência nas ruas.

Há bem pouco tempo atrás eu sonhava com conexão sem fio. Hoje, posso parar para tomar um café e enquanto isso checar meus e-mails.
Mobilidade se tornou a “bola da Vez”. E construir um site para dispositivos movéis tem sido um desafio grande o suficiente para fazer empresas investirem cifras significantes nesse mercado.

Não é necessário conhecimento de uma linguagem de programação específica nem estudar padrões de códigos novos. Uma boa pedida é trabalhar com Web Standards. Os padrões para a Internet criados pelo W3C, como XHTML e CSS, feitos para garantir acessibilidade global.

É importante ressaltar, que assim como no mundo “desktop”, existem diversas plataformas de desenvolvimento e diferença entre elas. Para evitar transtornos, existem algumas regras em comum, que se aproximam bem mais do bom senso:

Regra 1. Layout.

As telas de Mobiles são menores. Óbvio? Eu sei, mas essencial. Três fatores que você deve levar em conta:

  1. A Tela de um PDA é menor (repita comigo!)
  2. O mecanismo de rolagem horizontal, quando existe, é incômodo o suficiente para fazer o usuário não voltar mais ao seu site.
  3. A interação entre o PDA e o Usuário é feita, na maioria das vezes, por uma Stylus (caneta), o que torna a rolagem mais incômoda ainda.

Aí está o grande desafio. Um design sucinto e essencial é a felicidade de todo mobile-user. Informações essenciais, com uma hierarquia efetiva, e que exorcizem a rolagem horizontal de tela. O ideal é trabalhar com uma única coluna. Na impossibilidade, dê atenção para a disposição das tags <div> no código.

Regra 2. Pense Pequeno.

Pense pequeno e atinja o mundo.
Lembre-se que o PDA user vive em um mundo “small”: Small-Screen, small bandwidth, small-speed display. Acessibilidade é ter a opção de escolher entre abrir ou não uma imagem de 800×600 pixels. Limite a rolagem de barra, se possível não as utilize. Seu código deve ser o menor e mais semântico possível. Você deve ser capaz de “ver” o site olhando para o código fonte. Neste aspecto, novamente o Web Standards podem ser uma mão na roda.

Regra 3. Pedras no caminho:

  • Não usar frames: Elas sempre terão borda e ocuparam mais espaço.
  • Não usar pop-ups: A tela de um PDA exibe uma única janela de cada vez, é será extremamente incômodo ter pop-ups nesta situação.
  • Não use links que levam para o mesmo lugar, que apenas recarregam a página, lembre-se que banda é preciosa, use e abuse do cache, mas lembre-se que o usuário pode desativá-lo.
  • Não use imagens grandes: Se minha tela é pequena, eu quero ver coisas pequenas.
  • Não use listas com mais de 5 sub-niveis: eu já não disse que minha tela é pequena?
  • Evite usar efeitos dinâmicos, eles podem ser bonitos no Desktop, porém no meu dispositivo pode ser um incômodo. Se ainda assim utilizá-los, certifique-se que a navegação não é afetada quando desativados.
  • Evite Imagens Maps: Além de complexas irão consumir mais banda
  • Não use Plugins: Existem Plugins como o Flash o Adobe Acrobat Reader para Dispositivos Móveis, mas eles dificilmente conseguem fazer o download, executar o aplicativo e exibir sua página.

Regra 4. Pouca Banda, muito conteúdo.

Hoje temos uma grande disponibilidade de velocidade em alguns dispositivos, mas a maioria ainda conta com uma conexão semelhante a um modem de 56Kbps. E ainda assim, pagam por dados trafegados. Isso quer dizer que quanto mais conteúdo e menos código melhor. Seja ponderado e evite textos e códigos que não sejam essenciais para o usuário.

Regra 5. Tableless e Web Standards

Essa não é uma regra, mas uma recomendação.
Porque Web Standards? Simples. Porque é bom e todo mundo gosta.
Os Web Standards pregam (entre outros fatores) a semântica e organização do código. Esses fatores podem em inúmeras vezes salvar seu site de uma má reputação, e garantir que ele seja acessado por qualquer dispositivo, isso, qualquer um: Dispositivos Móveis, Desktop, Celulares, WebTV´s, e etc. Garante também que seu site seja acessível mesmo que o usuário desative a formatação e exibição de imagens, por exemplo. Sempre, separe o conteúdo da formatação, deixando que o CSS cuide do visual.
Em suma:

  1. Web Standards reduzem o consumo de Banda. Lembre-se que na maioria das situações os usuários de mobile pagam por dados trafegados.
  2. Web Standards fazem seu site ser acessado mesmo com alguns recursos divulgados.
  3. Tabelas tornam boa parte do espaço de tela inutilizável com bordas e em um suposto redimensionamento de tela, pode trazer problemas.
  4. Web Standards anda de mãos dadas com acessibilidade. Mantendo sua página pequena, leve, funcional e acessível.
    Uma boa dica de site para aprender estas coisas é o Tableless (http://www.tableless.com.br).

Lembre-se sempre (S-E-M-P-R-E) de usar os atributos “title” e “alt”. Assim, se o usuário quiser economizar banda (lembre-se que eles pagam por isso), ele pode desativar o recurso de carregamento de imagens e ainda assim navegar. Para imagens que não serão úteis para o usuário, utilize alt´s vazios. Limpe o código: pode ser entendiante mas é realmente um diferencial. Além de tornar seu site mais rápido, o usuário pagará menos por isso. E sem esquecer da Semântica! Um titulo entre as TAGS <h1></h1> por exemplo serão destacados mesmo com a formatação desativada.

Regra 6. Escrever é simples…

Lembre-se Que os PDAs possuem no máximo 4 fontes por padrão. Algumas fontes podem ser instaladas. Mas isso não garante que seu usuário tenha e quer dizer que seu site pode aparecer “diferente” no PDA. As indicadas: Courier, Tahoma e Arial

Regra 7. Figuras e mais figuras.

Trabalhe com imagens já moldadadas no tamanho final para a tela.
Caso não seja possível, certifique-se de que a imagem original não é “gigante”. Lembre-se que as imagens são carregadas antes de serem redimensionadas. Ainda assim, quando redimensionadas, perdem a qualidade. Se o usuário ver que seu site possui muitos gráficos, ele pode desativar o download de imagens e você tem que estar certo de que continuará acessível mesmo assim.

Regra 8. Âncoras para que te quero.

Utilize ancoras… Na verdade abuse de ancoras… Esbanje ancoras no seu Site… Elas facilitam a navegação, não exigem muito trabalho e nem muita digitação. Lembre-se de identificá-las corretamente. Utilize “id” inteligentes e descritivos.

Regra 9. 1, 2,3… Testando!

A melhor forma de conferir como funciona um web site em um PDA, é ter um PDA. Se você ainda não tem (onde você tem andado nos últimos anos?), o ideal é usar emuladores. Todos os OS mobiles possuem emuladores. Você pode encontrá-los aqui: Emulador de PalmOS e Emulador de Windows Mobile ,

Regra 10. Aperfeiçoe o seu WYSIWYG!

Alguns programas WYSIWYG tendem a colocar código não essencial. Quando utilizá-los lembre-se de fazer uma revisão e se necessário filtre o código. Se você ainda não escreve código no EditPlus ou no Notepad, vale a pena estudar um pouco para aprender.

Trazer a WEB para o PDA e algo gratificante e interessante. Por ser uma tecnologia emergente, a melhor forma de realizar algo proveitoso é botar a mão na massa, acompanhar as novidades e manter se antenado no mundo mobile. O número de usuários vem aumentando consideravelmente, mobilidade pode ser sinônimo de Cotidiano em pouco tempo. E acessibilidade estará de mãos dadas com ela.