Hoje comentaremos a campanha mobile da Heineken.

Há um aplicativo iPhone, em português, que divide-se em duas seções: um localizador de bares e outra para os Party Makers.

Na apresentação dos bares, o usuário confere como chegar através de um mapa, que inclui também pontos de ônibus. Ainda há a opção de chamar um táxi.

Já na categoria Party Makers, o aplicativo indica, dependendo do tipo de reunião, número de pessoas e sexo dos convidados, qual a quantidade ideal de cerveja e de gelo que devem ser comprados.

A campanha envolve ainda um mobile site, acessado em www.heineken.com.br/mobile, de conteúdo semelhante.

Acreditamos que trata-se de um ótimo exemplo de campanha. Conteúdo útil para os usuários da marca e incentivador do uso recorrente, com interface amigável. Talvez fosse mais fácil, dentro dos estados, separar os bares por cidade. Isso facilitaria na navegação e ajudaria a chegar mais fácil ao que estamos procurando.

Embora o aplicativo tenha sido disponibilizado somente para iPhone, um bom mobile site com conteúdo semelhante foi disponibilizado para todas as plataformas. Assim, embora a campanha não aproveite os benefícios de um aplicativo Java, pelo menos não impede que as pessoas que não têm iPhone também se beneficiem do serviço. Interessante dizer também que se entrarmos pelo celular no site da Heineken, somos direcionados para o mobile site, mais um ponto positivo.

Uma crítica fica pela divulgação do aplicativo. O site da Heineken apresenta diversos conteúdos para downloads, jogos e muitas interações, mas em nenhum momento cita o mobile site e o aplicativo. Para uma campanha mobile ser bem sucedida, é interessante lançar mão de todos os veículos que estão à disposição da marca e incentivar o usuário a consumir o conteúdo. Seria interessante também que, quando um iPhone acessasse o mobile site, fosse indicado que há um aplicativo na App Store e o usuário pode fazer o download gratuitamente.

Deixe seu comentário, diga o que achou da ação e da nossa análise ou indique uma outra ação para as próximas semanas.

Para ajudar os campuseiros a acompanhar as atividades da Campus Party Brasil pelo celular, fizemos como cortesia ao evento uma versão mobile do blog oficial, que além de viabilizar acesso aos posts, também permite acompanhar a repercussão da Campus Party no Twitter (pelas hashtags #cparty e #cpartybr) e disponibiliza algumas informações úteis para os participantes.

O serviço está disponível nas versões mobile site e aplicativo Java. Para conferir, basta acessar diretamente pelo celular o endereço:  http://m.praesto.com.br/cpbr (o download do aplicativo também pode ser feito diretamente por lá).

Deixo abaixo alguns screenshots do mobile site.

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.