A mobilidade ganhou espaço de uma forma incrivelmente rápida e surpreendente. Palms, Pockets Pcs e Cliés já são vistos com freqüência nas ruas.

Mobilidade é a bola da vez. Construir um site para dispositivos móveis é um grande desafio, capaz de levar empresas a investir cifras significantes.

Para construir um site assim não é necessário conhecer 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.

No mundo mobile, assim como no mundo desktop, existem diferentes plataformas de desenvolvimento. Mas algumas regras em comum, bem próximas do bom senso, devem ser consideradas.

1. Layout

As telas de dispositivos móveis são menores. Óbvio? Sim, mas essencial. Três fatores devem ser levados em conta:

1. A tela de um PDA é menor (só para lembrar!)

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 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.

2. Pense pequeno

Lembre–se que o usuário de PDA vive em um mundo “pequeno”: a tela é pequena, a banda é estreita, a tela não tem muita velocidade. Acessibilidade é escolher entre abrir ou não uma imagem de 800×600 pixels. Limite a rolagem de barra, se possível não 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 os Web Standards podem ser uma mão na roda.

3. Evite os obstáculos

• Não use frames. Sempre terão borda e ocuparão mais espaço.
• Não use pop–ups. A tela de um PDA exibe uma única janela de cada vez; é extremamente incômodo ter pop–ups nesta situação.
• Não use links que levam para o mesmo lugar e apenas recarregam a página. Lembre–se que banda é preciosa. Use e abuse do cache, mas considere também que o usuário pode desativá–lo.
• Evite imagens grandes. Se a tela é pequena, eu quero ver coisas pequenas.
• Não use listas com mais de cinco sub–níveis. Eu já não disse que a tela é pequena?
• Evite efeitos dinâmicos. Eles podem ser bonitos no desktop, porém no dispositivo pode ser um incômodo. Se ainda assim utilizá–los, certifique–se que a navegação não é afetada quando desativados.
• Evite Image Maps. Além de complexos, 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.

4. Pouca banda, muito conteúdo

Hoje temos maior disponibilidade de velocidade em alguns dispositivos, mas a maioria ainda conta com uma conexão semelhante a um modem de 56Kbps. E paga pelos dados trafegados. Assim, 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.

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 inúmeras vezes salvar seu site de uma má reputação e garantir que ele seja acessado por qualquer dispositivo. Isso mesmo, qualquer um: dispositivos móveis, desktop, celulares, WebTVs…

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 e deixe que o CSS cuide do visual. Em suma:

– Web standards reduzem o consumo de banda. Na maioria das situações os usuários de mobile pagam por dados trafegados.

– Tabelas tornam boa parte do espaço de tela inutilizável com bordas e em um suposto redimensionamento de tela, que pode trazer problemas.

– Web standards andam de mãos dadas com acessibilidade. Mantém sua página pequena, leve, funcional e acessível.

– Uma boa dica de site para aprender estas coisas é o Tableless. Veja também as matérias linkadas ao lado.

Lembre–se sempre (S–E–M–P–R–E) de usar os atributos “title” e “alt”. Assim, se o usuário quiser economizar banda (ele paga por isso), 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 alts vazios. Limpe o código: pode ser trabalhoso, 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 título entre as tags h1 e /h1 por exemplo será destacado mesmo com a formatação desativada.

6. Escrever é simples…

PDAs possuem no máximo quatro fontes por padrão. Algumas fontes podem ser instaladas. Mas isso não garante que o usuário tenha. Ou seja, seu site pode aparecer “diferente” no PDA. As indicadas: Courier, Tahoma e Arial

7. Figuras e mais figuras

Trabalhe com imagens já moldadas 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. E quando redimensionadas, perdem a qualidade. Se o usuário considerar que seu site possui muitos gráficos, ele pode desativar o download de imagens. E você tem que garantir que continuará acessível mesmo assim.

8. Âncoras

Utilize âncoras… Na verdade, abuse de âncoras… 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.

9. Testando!

A melhor forma de conferir como funciona um website em um PDA, é ter um PDA. Se você ainda não tem, o ideal é usar emuladores. Todos os OS mobiles possuem emuladores. Você pode encontrá–los aqui: Emulador de Palm OS e Emulador de Windows Mobile.

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 é 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 e mobilidade pode ser um sinônimo para cotidiano em pouco tempo. E acessibilidade estará de mãos dadas com ela. [Webinsider]

Thiago Rigonatti

<strong>Thiago Rigonatti</strong> (rigonatti@mobilelife.com.br) é consultor especializado em mobilidade e administra o <strong><a href="http://www.mobilesite.com.br/" rel="externo">Mobile Life</a></strong>