Navegando em browsers WAP

O desafio era desenvolver um único site, com um único arquivo html, apenas com estilos (CSS) diferentes. Tendo uma resolução mínima sido estabelecida, parecia ser simples, não? Afinal, é só fazer “caber” um conteúdo em uma tela menor, escondendo outros... Certo?

Exemplo de site visto pelo computador e sua versão mobile: conteúdos diferentes

Desenvolver sites para dispositivos móveis hoje em dia é, no mínimo, desafiante. O primeiro erro de nós, iniciantes, é tentar fazer um site comum caber em uma tela pequena, normalmente montando scrolls verticais de dar tontura.

O fato é que não basta “miniaturizar” um site e jogá-lo em uma tripinha no canto esquerdo da tela, é necessário repensar todo seu conteúdo.

“Methodes that rework only the aesthetics of a site merely to fit it on a small screen likely fail to address the content, context and needs of mobile users”

- dotMobi Group

Não digo isso apenas pela visualização incômoda de uma tela de apenas 120px de largura, mas pela navegabilidade pouco fluída e as limitações impostas pelo keyboard de um celular.



Aprendendo com os erros

Depois de algumas tentativas e erros (e mais erros do que acertos) testando em vários sispositivos e emuladores, o melhor é deixar o projeto de lado um pouquinho e pesquisar mais. E é nessa fase que normalmente encontramos informações bem óbvias, mas que só paramos para pensar depois que já fizemos o trabalho (ver próximos parágrafos):

Escolha do seu site apenas o conteúdo absolutamente relevante para a versão mobile (em lilás)...

Celulares, PDAs e outros dispositivos móveis possuem uma capacidade de processamento naturalmente menor do que a dos computadores com que estamos acostumados. Não só isso, mas a maioria dos celulares ainda possui uma conexão equivalente a algo próximo de um modem de 56kB e os usuários pagam caro por cada KB baixado!

Em conseqüência, muitos dispositivos, alocam uma memória máxima de 20KB para cada página. Isso mesmo: se o tamanho de sua página ultrapassar esse limite ela irá, no mínimo, aparecer de forma inadequada: com conteúdo cortado ou sem imagens. Na pior das hipóteses, o que é mais comum, não irá aparecer nada.

Conteúdos considerados muito longos (que requerem muito scroll) e que ultrapassam a capacidade do aparelho, também aparecerão cortados ou o dispositivo simplesmente nem abre a página.

...e o resultado final: um site totalmente optimizado para o usuário.

Por causa disso, descobrimos que métodos que adoramos, como esconder conteúdo usados na mídia screen (sites comuns) para não aparecerem em outras (no caso handheld), não são muito eficientes. Apesar de estar “escondido” (invisível) ele ainda está lá no código, ocupando espaço, e o usuário terá de baixá-lo de qualquer forma. Isso quer dizer que, não só o usuário terá de pagar por um conteúdo que ele nem está vendo, como quer dizer que esse conteúdo irá continuar acrescentando ao peso total de sua página, ultrapassando o limite de 20KB e não carregando direito (se carregar).

“Mobile is different. Mobile browsing is much less about random surfing than it is about targetted, time & location-specific tasks”

- dotMobi group

Algo muito importante que surgiu nessa pesquisa, foi a questão da arquitetura da informação de um site especial para celular. Toda a parte de organização e tamanho de conteúdo e seu esquema de navegação devem ser diferentes.

Pessoas em um computador tem prioridades diferentes de pessoas em um celular, certo? Parece claro, mas muitos designers continuam a empurrar conteúdo desnecessário para usuários mobile. Pessoas se valem da internet em dispositivos móveis normalmente quando esta é seu único recurso disponível no momento. Podem estar no meio da rua, procurando o endereço de um restaurante ou escritório, por exemplo.

O objetivo é chegar à informação o mais rápido possível, com o mínimo de cliques. Por isso uma navegação simples, com poucos links (2 ou 3 sub-níveis, no máximo), bem no alto da página é obrigatória. Assim como os textos devem ser BEM mais curtos, alguns links e seções podem até ser retirados completamente do site e as imagens mantidas em seu mínimo.

Alguns exemplos de sites feitos para celular

O site parece estar legal, e agora?
Então você fez uma página bem optimizada, simples e leve. Seu conteúdo é direcionado completamente às necessidades do usuário móvel: poucos links, navegação básica, textos resumidos e poucas imagens pequenas são encontradas.

Tudo muito bom, mas na hora de testar em alguns simuladores percebe que nada funciona como deveria...

E é aí que entra a parte mais complicada: “Padrão” não uma palavra muito conhecida por estas bandas.

“Sadly the current state of mobile browser support for XHTML/CSS
makes web standards battle that raged a couple of years ago look
like a cakewalk”

- John Williams, Firewheel

A variedade de tamanhos, resoluções de telas, dispositivos, browsers, diferentes níveis de suporte para XHTML e CSS e a diferente renderização do conteúdo entre cada um deles é absurda, tornando a tarefa de tentar desenhar um site móvel para todos aparelhos, certamente estressante.

No fim, se você não possuir um dispositivo específico como alvo, terá de seguir uma lista de recomendações e proibições muito limitadoras para que seu trabalho renderize de forma ACEITÁVEL em uma porção significativa dos aparelhos de hoje em dia. E aposto que você já sabe que o W3C tem alguma coisa haver com isso.


Recomendações

O canto do Desenvolvedor do W3C é cheio de ferramentas e um belo guia para ajudá-lo a manter seu site sem erros ou a construí-lo direito desde o início. É um material que todos deveriam ler para começar. Outra boa dica é o canto do Desenvolvedor do grupo dotMobi que possui não apenas guias, mas uma área de testes com simuladores e várias estatísticas e validações muito úteis.

Vídeo com um usuário navegando por um browser wap

Resultados

Aqui estão alguns resultados do trabalho usando apenas 2 folhas de estilo (Css: uma para a mídia screen e uma para a mídia handheld), para modificar a apresentação da página nas diferente mídias, sobre uma mesma página de mesmo conteúdo/html.

Exemplo 1


Exemplo 2