Como fazer páginas para celulares, especificamente, não é uma coisa que eu costumo fazer, tive algumas dúvidas e precisei fazer algumas pesquisas. Felizmente, encontrei este documento que me serviu como uma excelente base técnica.

Uma outra versão?

Talvez você esteja se perguntando se realmente há a necessidade de se fazer uma segunda versão de alguma página só para exibí-la num celular. A resposta é: depende. =)

No caso dos celulares, existe uma série de limitações que poderão requerer que você construa uma segunda versão do seu conteúdo. Uma versão mais simples e mais leve.

Se você já ouviu (ou leu) o slogan da Sun (referindo-se ao Java): “Write once, run anywhere” e concorda com ele, deve estar meio contrariado quanto a possibilidade de uma versão alternativa para o conteúdo.

Vou destacar alguns pontos do documento do W3C que vão permitir a você, decidir por ter ou não, uma segunda versão. Por isso eu disse que depende! =)

Tipos de celulares

Se sua página visa apenas pessoas que conseguem rodar o Opera Mini em seus celulares, ótimo e fácil! O Opera Mini é uma versão do famoso navegador Opera desenvolvida para celulares.

Seguindo a mesma linha do browser versão desktop, a versão para celular segue com grande fidelidade os padrões definidos pelo W3C.

Você pode, inclusive, aplicar estilos CSS nas suas páginas. Se você aplicar o tipo de mídia “handheld” você poderá aplicar estilos CSS que vão estilizar apenas aparelhos móveis.

Se você irá atender com sua página celulares menos poderosos, com navegadores simples conhecidos por: WAP browsers, você terá algumas limitações e preocupações extras.

Tamanho da tela

Este é um fator que você precisa considerar em qualquer tipo de celular. Como você deve saber, o tamanho da tela de um celular é bem menor se compararmos com o tamanho dos monitores atuais.

Com uma tela menor, temos uma menor área útil disponível. Isto significa que textos longos, imagens grandes, terão sua visualização, e talvez até entendimento, prejudicados.

Algumas sugestões simples do documento já mencionado são bem úteis aqui (uma tradução livre e adaptada):

• Providencie apenas uma navegação simples no topo da página;
• Tenha bom senso entre ter uma página com muitos links ou ter de passar por várias páginas para alcançar um link;
• Use uma linguagem simples e clara;
• Mantenha o contexto da página relacionado somente ao que foi pedido;
• Use tamanhos relativos para definir eventuais medidas para seu documento; (salvo imagens, comentado logo mais)
• Estruture seu código (markup) de uma forma clara, lógica e válida.

Memória interna

Este fator aplica-se muito mais a aparelhos simples, com uma capacidade de memória reduzida.

Aparelhos simples alocam um espaço bastante limitado à página que será visualizada. Se a página ou conteúdo é grande demais, ele simplesmente não é exibido.

Para garantir uma exibição aceitável na maioria dos aparelhos disponíveis atualmente é aconselhável manter sua página em no máximo 20 Kb. Isso mesmo, contando as imagens.

Manter seu código simples ajuda bastante a diminuir o tamanho das páginas. Evite ao máximo o uso de tabelas!

No caso do Shopping UOL, haviam páginas com uma série de tabelas, exibindo produtos, lojas, preços e outras informações (exemplo).

A solução foi converter os dados tabulares para parágrafos claros em forma de frases (exemplo).

Erro 413???

Durante a fase de desenvolvimento, quando eu estava testando no meu celular, ao acessar uma página eu recebi um código de erro que eu nunca tinha visto: erro 413.

404, 403, 200, 302, 500, etc… Todos estes aí a maioria de nós já deve saber o que são.

O código 413 se refere a um conteúdo muito longo, provavelmente maior do que seu dispositivo suportaria.

HTML ou WML?

Uma das primeiras dúvidas que passou pela minha cabeça foi justamente essa: “vou de (X)HTML ou de WML?”.

A WML é baseada na XML, assim como a XHTML.

Um parser para WML difere muito pouco (na lógica) de um para XHTML. Como isso em mente, resolvi fazer um teste. Testei uma página XHTML no celular de várias pessoas e vi que o resultado foi positivo na interpretação, resolvi seguir em frente com XHTML.

E claro, em termos de familiaridade, sou muito mais XHTML também. =)

Teste, teste e teste

Provavelmente essa é uma das maiores certezas ao se desenvolver para dispositivos móveis. Quanto mais testes, mais seguro você estará que seu conteúdo está sendo bem interpretado.

Com a imensa variedade de celulares existentes hoje no mercado, é fato que existe também uma grande quantidade de navegadores rodando nestes aparelhos.

E assim como no mundo dos navegadores desktop, alguns melhores, outros piores. Como um upgrade de navegador (ou mesmo escolher entre um ou outro) é uma coisa rara em dispositivos simples, o ideal é testar o máximo possível.

Esta página sugere alguns emuladores de navegadores para celular. Caso você não tenha como testar em vários aparelhos físicos, é prudente usar, ao menos, os emuladores.

Resumindo

Foi bem legal ter feito esta tarefa. Aproveitei para estudar e conhecer um pouco melhor a plataforma de dispositivos móveis. Lembre-se daquelas dicas sempre que for criar um documento para dispositivos móveis e também testar sempre! =)

Referências

Guia de boas práticas para web móvel

XHTML

Opera Mini

Aplicando CSS de acordom com o tipo de mídia

Códigos HTTP

Testando sua página para web móvel

Shopping UOL WAP

Update:
Desenvolvimento de sites para dispositivos móveis no Revolução Etc