Recentemente foi publicado um artigo no blog do Google dando dicas de como projetar mobile sites para que estes sejam mais rápidos e acessíveis. O artigo original em inglês pode ser acessado aqui.

Faremos aqui um overview dessas dicas:

- Fornecer uma ligação entre a versão mobile e a versão para desktop a fim de evitar que os usuários naveguem com seus dispositivos móveis em sua versão desktop sem saberem que existe uma versão mobile trabalhada especialmente para eles.

- Usar uma URL simples e anunciá-la. De preferência curtas e fáceis de digitar.
Exemplos: m.yoursite.com, mobile.yoursite.com ou yoursite.com/mobile.

(mais dicas de como escolher a URL móvel neste artigo)

- Trabalhar a interface de forma a evitar o mínimo de digitação e com componentes visuais que facilitam a interação do usuário e que juntos sejam visualmente agradáveis em um formato pequeno.

O Gmail, por exemplo, fornece uma versão mobile que é mais acessível para dispositivos móveis.

- Pensar no ambiente em que seu mobile site será acessado, pois normalmente o acesso se dá em ambientes não tão confortáveis como em computadores desktop, as informações devem ser encontradas de forma rápida e fácil com conteúdos claramente identificados e sucintos.

- Formatar seu mobile site para visualização em diversos navegadores móveis e diferentes tamanhos de telas disponíveis no mercado de dispositivos móveis. Existem diversos navegadores, com diferentes características e formas de carregar páginas. Se você tiver uma audiência internacional, certifique-se de que seu projeto é flexível o bastante para atender os diferentes dispositivos nesses países.

- Reduzir o número de vezes que seu mobile site deve fazer uma requisição ao servidor. Evitar a abertura de novas conexões/requisições HTTP, que são freqüentemente o mais importante fator de poupança dos recursos do dispositivo.

- Em vez de ter um arquivo CSS que importa vários outros, ou um arquivo JavaScript que carrega outros pedaços de código, consolidar todas as dependências da sua página em um único arquivo. Reduzir a página para um único arquivo (e, portanto, uma única requisição) irá produzir um aumento na velocidade.

- Diminuir a quantidade de código. Quanto menos código, menor a quantidade de dados transferidos e mais rápido sua página carregará.

- Baixar os conteúdos de forma gradativa. Não carregar imagens que nunca serão vistas pelo usuário final e no caso de uma galeria de imagens, considerar o carregamento da imagem anterior e da próxima para aumento da velocidade da interface, mas nunca baixar imagens que estão “fora de alcance”.

- Usar novas funcionalidades do HTML a fim de melhorar a interação com o usuário. Navegadores HTML5 (Mobile Safari, Android) podem usar a cache para reduzir o tempo de inicialização da página e habilitar os recursos offline.

- Usar CSS3 ao invés de imagens sempre que possível. Navegadores HTML5 que suportem CSS3 (novamente, o Mobile Safari, Android) podem usar atributos de cantos arredondados, degrades, sombras, transformações de texto, telas e muito mais. Usando CSS para criar sua página em vez de imagens pode reduzir a transferência de dados.

- Se o seu mobile site deve atingir a grande maioria dos usuários, portanto ele deverá ser compatível com os mais variados dispositivos móveis. Em geral, quanto menos complexo o código, mais compatível ele será.

- Algumas advertências são dadas tais como o fato de que Flash ainda não é suportado pela grande maioria de dispositivos móveis e, portanto não é aconselhado usar. Muitos BlackBerrys não têm CSS e JavaScript habilitados por padrão e deve se considerar que a maioria dos usuários não irá descobrir que precisam destes recursos ou como podem ativá-los. JavaScript em dispositivos com processadores mais lentos podem ser difíceis de executar.

- A última dica dada pelo artigo já é bastante conhecida pelos desenvolvedores: Teste, teste e teste! Em especial no mundo do desenvolvimento mobile com tantos dispositivos diferentes é especialmente importante os testes. Navegadores mobile podem redimensionar textos e imagens e interpretar CSS de formas diferentes dos navegadores de desktop. Ler uma página de um mobile site em um dispositivo móvel pode dar uma sensação completamente diferente da leitura em um desktop. De forma alguma se deve assumir que a interação com o PC é equivalente à interação com os dispositivos móveis.

Hoje a nossa marca JMobi e alguns serviços próprios como o mKut e mFut completam três anos desde o seu lançamento. Vamos contar neste post um pouco da história desses serviços e como eles evoluiram ao longo do tempo.

A ideia começou quando, ainda nas fases iniciais da Praesto, percebemos que a expertise de integração web e mobile que estávamos aplicando em alguns projetos poderia ser utilizada para prover acesso pelo celular a alguns dos serviços que já eram populares na Internet. Na época, aqui no Brasil três aplicações de destaque ocupavam o dia-a-dia dos brasileiros, especialmente os mais jovens: Orkut, MSN e Fotolog.

Nossa intenção inicial era prover a interatividade com esses serviços através de SMS e MMS, que era o modelo de negócios mais viável naqueles dias. No entanto, além de outras barreiras, sabíamos que teríamos que ter mais força para negociar com as operadoras e viabilizar o projeto, então decidimos dar o primeiro passo de uma forma mais independente e escolhemos fazer um aplicativo Java para cada serviço, assim aos poucos ganharíamos usuários e “corpo” para poder implementar os outros formatos.

Desenvolvemos então as primeiras versões dos aplicativos móveis do mKut, mFut e Fotolog, além de fazermos a tropicalização do eMSN através de uma parceria com a empresa desenvolvedora. Como instalar aplicativos no celular não era uma atividade comum (ou trivial) para a maioria das pessoas, queríamos criar um ambiente centralizado onde os usuários pudessem tirar dúvidas, compartilhar experiências, fazer comentários e sugestões, etc. Dessa necessidade surgiu a primeira versão do JMobi, que era um portal para download dos aplicativos e informações diversas. A imagem abaixo mostra como era o portal.

O lançamento oficial foi feito em 31 de julho de 2006, quando enviamos um email para cerca de 30 amigos selecionados convidando-os para serem beta-testers. Em poucos dias a ideia começou a se espalhar de forma viral e em menos de um mês já tínhamos cerca de 500 usuários cadastrados, o que nos deu um bom sinal de que tínhamos feito algo relevante. A partir daí começamos a fazer o relacionamento com esses usuários principalmente através das comunidades no Orkut (links p/ comunidades: JMobi e mKut).

Tínhamos três grandes barreiras para o crescimento: o custo do tráfego de dados, a baixa penetração de celulares com Java na época (hoje isso já não se repete) e a dificuldade de instalação/configuração dos aplicativos. A primeira barreira nós buscamos minimizar através de vários ajustes nos projetos dos aplicativos de forma com o que o usuário gastasse o mínimo possível para cada interação (como exemplo no mKut, fazer o login e ler 10 recados custa em média R$0,05 para usuários pré-pago). Já para a segunda e terceira barreiras, a saída que encontramos foi fazer a versão mobile site dos serviços, permitindo que as pessoas que tivessem dificuldade com os aplicativos também pudessem aproveitar os serviços através do navegador do celular.

Na sequência, há pouco mais um ano e meio, lançamos o Voos Mobile, serviço que permite a consulta através de celular dos horários e status dos voos no Brasil em tempo real. Detalhe: o Voos Mobile foi lançado em meio à crise do apagão aéreo por aqui.

O número de usuários e de acessos em todos serviços continou crescendo em ritmo acelerado – hoje temos quase 3 milhões de acessos por mês no total – muito também em decorrência da evolução do mercado no Brasil (aparelhos, planos, serviços, etc.) e do crescimento da Internet móvel.  E foi, estimulados por esse crescimento, que fizemos a nova versão do JMobi, transformando-o de portal de aplicativos para um serviço agregador de sites móveis.  O JMobi hoje busca facilitar para o usuário a experiência de se utilizar Internet no celular, fornecendo-o a possibilidade de criar uma página personalizada com seus links e widgets favoritos. Desde o lançamento dessa versão 2.0 já são aproximadamente 80.000 páginas criadas pelos usuários.

Agradecemos a todos que contribuíram ao longo desses três anos . Esperamos poder continuar criando e provendo serviços úteis e atrativos para os usuários em mobilidade.

Com um pouquinho de atraso, compartilho aqui a entrevista que fiz com o Marcelo Godoy da NewTV no final do ano passado.

No programa, conversamos sobre alguns temas relacionados à Internet móvel, tais como características de uso, custo de acesso, aparelhos e práticas de mobile sites, além de apresentarmos a campanha Um Mobile Site por Dia e o nosso agregador de site móveis JMobi.

A entrevista está dividida em três partes, disponíveis pela TV iG nestes três endereços:

http://tvig.ig.com.br/60532/sites-na-internet.htm

http://tvig.ig.com.br/60538/navegacao-pelo-celular.htm

http://tvig.ig.com.br/60544/internet-no-celular.htm
Além do NewTV, o Marcelo também conduz outros projetos bem interessantes de mobilidade, entre eles o MobileFest, Festival Internacional de Arte e Criatividade Móvel, que neste ano de 2009 entra em sua quarta edição. Em breve conversaremos sobre estes outros projetos aqui no blog.