Algumas questões em torno do desenvolvimento de sites para dispositivos móveis

Provavelmente este texto é mais um início de uma série de reflexões naturais que virão com o tempo sobre desenvolvimento de web sites para dispositivos móveis. Ultimamente tenho lido e estudado mais sobre os diferentes caminhos que podem ser tomados para construir sites acessíveis e bem adaptados para celulares e PDA’s. E o mais importante de tudo é como fazer e tomar essas decisões no contexto de HOJE e não amanhã. Este texto então vai colocar mais minhoca na sua cabeça do que te ensinar algo. Mas já é um começo se você ainda não parou para pensar sobre desenvolvimento para dispositivos móveis.

Este assunto acaba desenterrando outro sobre a guerra em prol dos web standards. Se você acredita que a guerra acabou, devo dizer que você está enganado. Se você está se perguntando o que web standards tem a ver com desenvolvimento de sites com versão mobile, você verá a seguir. Mas o fato é que desenvolvimento para dispositivos móveis está crescendo exponencialmente (como a maioria das novidades em desenvolvimento) e as reflexões giram em torno de duas vertentes basicamente:

– De um lado temos as idéias relacionadas com o IDEAL do desenvolvimento da web e como as coisas DEVERIAM ser.

– De outro temos a realidade de COMO AS COISAS SÃO HOJE e quais as melhores soluções para o presente.

Por mais que as duas vertentes sejam tratadas como antagônicas o objetivo do texto não é fazer você escolher uma delas e sim levantar uma discussão sobre prós e contras. Dividi este texto em 4 principais campos de problemas. Dentro do desenvolvimento para dispositivos móveis nós temos problemas que envolvem a linguagem de marcação a ser utilizada, sobre a melhor solução de design, arquitetura da informação, versões,TLD’s etc.

XHTML-MP, XHTML ou HTML?

A era do WML se foi. Sem comentários sobre isto. A linguagem de marcação proposta para dispositivos móveis atualmente é o XHTML-MP (Extensible Hypertext Markup Language – Mobile Profile), um subset do XHTML inspirado no XHTML Basic 1.0 desenvolvido pela OMA (Open Mobile Alliance) e ouvi dizer que tem a beção da W3C Mobile Web Initiative. Veja aqui uma quadro comparativo entre XHTML-MP e XHTML Basic 1.0. E considerando o fato de ambas serem muito parecidas, elas estão caminhando para serem uma única especificação.

Há “n” lacunas nessa história toda que nos permite conspirar um pouco. E não estou interessado em fazer isso agora. Nos últimos tempos encontramos por aí várias discussões sobre o futuro das linguagens de marcação nas vertentes de XHTML 2 ou HTML 5. As coisas ainda não estão claras sobre o futuro delas e aminha opinião nem importa sobre isso. A indústria (OMA e dotMobi) estão caminhando em direção ao XHTML Basic 1.0 = XHTML-MP que são derivações do XHTML 1.0. Hoje os dispositivos móveis aceitam o HTML 4 e é possível fazer muita coisa legal desde que o HTML seja bem estruturado (ou seja, sem table layouts). Mas a industria parece caminhar em direção ao XHTML e eles não estão se importando muito com retro-compatibilidade. A maioria dos browsers modernos dos celulares e PDA’s já ignoram o WML. Então até que as coisas estejam sólidas essa filosofia de não a retro-compatibilidade vai permanecer.

Segundo as iniciativas do XHTML-MP, o MIME Type deverá ser o application/xhtml+xml com Character Encoding em UTF-8, código bem estruturado sem utilização de tabelas, documentos well-formed, erros de XML parser caso exista erros de sintaxe (se não acredita em mim leia isso tudo neste manual) etc. Se considerarmos as boas práticas da inciativa da W3C e da OMA, o futuro das linguagens de marcação para dispositivos móveis está enraizado no XHTML.

O design

Web designers vão ter um choque quando iniciarem o desenvolvimento para dispositivos móveis. Desenvolver sites para desktop te permite explorar espaços maiores, imagens mais elaboradas, cores, tamanhos, tipologias, formatos, animações, etc. Agora quando você tem um espaço que varia de 120px a 320px, as soluções de design que você tem que encontrar são muito mais limitadas do que aquela que você está acostumado. Veja a imagem abaixo:

Algumas boas práticas incluem tamanhos de fontes que possam ser lidos em uma tela pequena, conteúdo adaptado, etc. AdSense, banners, animações em flash, imagens grandes, etc só atrapalham a experiência do usuário. Até o conjunto de cores para uma versão assim deve ser bem escolhido. Não importa se você vai adaptar o seu site já existente para dispositivos móveis ou se você vai construir uma versão específica, a solução para o seu design deverá ser consciente em relação ao usuário.

A arquitetura da informação

A arquitetura da informação também terá um papel muito importante no desenvolvimento para dispositivos móveis. O trio usuário, contexto e conteúdo tem um desafio completamente diferente de organizar ambientes de informação feitos para celulares e PDA’s. Isso vai incluir escolher entre features, fluxos de navegação simplificados, escolher por relevância entre qual conteúdo é importante e qual deve ser descartado em relação a versão desktop etc. Veja abaixo a diferença entre um ambiente comum de um site para versão desktop e do lado direito uma estrurua ideal para sites construídos especificamente para dispositivos móveis.

Veja agora na imagem abaixo um mapa de site comum e presente em muitos sites institucionais hoje.

Navegar em uma estrutura assim em um celular pode ser muito frustante e dispendioso. Agora veja uma solução criada especificamente para dispositivos móveis do mesmo site:

O principal conselho é: mantenha as coisas simples, com escolhas limitadas e objetivos para se alcançar a informação desejada mais simplificados.

Uma única versão para diferentes dispositivos ou versões separadas?

Esta escolha também reflete as diferenças entre as duas vertentes do desenvolvimento para dispositivos móveis. A primeira vertente diz que temos que ter um único site que se adapte aos diferentes dispositivos. Do outro lado temos os defensores das versões de sites construídos especificamente para dispositivos móveis e que estão adotando a TLD .mobi. Para tomar essas duas decisões hoje, cada uma delas tem o seu custo e o seu contexto.

Essas escolhas vão depender de “n” fatores que estão muito além do escopo deste texto. Se a escolha for manter um único site que se adapte as duas realidades (desktop e dipositivos móveis) a solução pode incluir handheld style sheets e talvez um pouco de content negotiation. Por que isso? Bom, se você prestou atenção nos textos sobre os problemas de design e arquitetura da informação, você sabe que não faz sentido deixar o usuário fazer o download de tudo o que uma versão desktop possui, como por exemplo banners em flash, publicidades etc. Será que os textos que estão presentes não precisariam ser resumidos? E o fluxo de navegação do usuário é adequado para a versão mobile? Qual o tamanho de cada página que será baixada em um celular? Todas essas considerações devem ser levadas em consideração. Existe ainda uma opção de entregar um site sem nenhuma folha de estilos como se tivesse no CSS Naked Day como neste exemplo. Mas ainda assim o conteúdo e o código seria excessivo ignorando o princípio do usuário, conteúdo e contexto! Veja mais reflexões sobre isso nos textos do Cameron Moll.

Do outro lado nós temos as soluções que optaram por desenvolver versões específicas para celulares e PDA’s. Como o Newsvine, CNN, Google, CNet News, Microsoft, Yahoo dentre vários outros. As coisas parecem caminhar em direção as versões de sites criadas exclusivamente para as versões mobile. Pelo menos HOJE. Se isso será salutar ou não para o desenvolvimento para web como um todo, isso já é outra história. Mas se considerarmos os problemas de design, AI e linguagem de marcação, construir versões separadas parece ser o melhor caminho.

TLD .mobi, sim ou não?

A indústria de celulares investe pesado todo ano em tecnologia e ela tem seus próprios interesses é claro. Várias empresas estão organizadas em torno do grupo dotMobi corresponde a TLD (Top Level Domains) .mobi, criada para indicar especificamente os sites compliance com dispositivos móveis. E esta iniciativa tem história e muita grana por trás. O grupo tem como investidos a Nokia, Google, Microsoft, Sansung, TIM, T-Mobile, Visa dentre outros.

Por trás da iniciativa da TLD .mobi é que vemos bem claro as duas vertentes de desenvolvimento para dispositivos móveis. De um lado aqueles que acreditam que os sites não devem ter TLDs diferentes simplesmente por que o dispositivo que o acessa é diferente. Ou seja, o domínio www.exemplo.com não deve ser www.exemplo.mobi só para indicar que ele é adaptado para dispositivos móveis. Dentre os que se opoem a isso está a própria W3C.

Por outro lado temos as mesmas empresas que fazem parte da W3C e fazem também parte do dotMobi e injetaram uma grana boa no grupo. Principalmente as empresas de celulares. Eles tem a própria defesa da necessidade dessa TLD. O fato é que quando muita publicidade e alguns milhões de dólares estão em jogo, vence o cara que fez o cheque com maior número de zeros!

Todas as imagens deste texto foram retiradas do dotMobi Mobile Web Developers Guide.

  • Marcos Dell Antonio

    Excelente post.

    Também pesquiso muito sobre o desenvolvimento para dispositivos móveis, mas a minha área é a da computação gráfica 3D.

    Novamente, excelente.

    T+

  • http://gigasolucoes.wordpress.com/ Ramon

    Como sempre ótimo texto,

    Já ouvi falar sobre esse tema, mas nunca parei para analisar, mas ainda tenho uma dúvida, eu ainda vou ler os links, talvez nessa leitura eu até esclareça a minha dúvida, mas enfim, como esses dispositvos móveis interagem em relação ao JavaScript, tem suporte? é limitado?

    fuiii…

  • http://www.danieltiecher.com/ Daniel Anderson Tiec

    Excelente artigo, Henrique! Vale ressaltar que nem todos os sites precisam realmente de uma versão para dispositivos móveis. Um site desenvolvido em torno de uma sólida percepção dos padrões web para um blog, por exemplo, já é o soficiente.

    O problema é que na enorme maioria dos casos o aumento da complexidade é inversamente proporcional a sua facilidade de uso. Ta aí o Google que esenvolveu a versão para dispositivos móveis do GMail para corroborar a minha hipótese.

  • http://www.arielcugenotta.com.br/ Ariel

    Legal. Muito se fala na evolução do desenvolvimento para mobile, mas não calculamos a evolução dos mobiles para a internet como deveríamos…

    Se todos os dispositivos começarem a disponibilizar uma navegação como a do iphone? Onde o usuário da zoom, rotaciona, estica, puxa, entorta a tela?

    Essa tecnologia é melhor, da mais liberdade… as empresas não terão de pagar um codigo a parte para mobile, nem um layout a parte para mobile… mesmo que desenvolva um só codigo para mobile, ie6, ie7, ff… ainda sim o que o iphone mostra é muito mais atrativo, é mais bonito…

    o que eles ( OMA ) pensa sobre isso?

  • Pingback: Web móvel - Dicas e truques - Klaus Paiva - Blog()

  • Pingback: Paradigmas da web móvel « High Five()