Skip to content
··8 min de leitura

Você está pronto para um mundo mobile? Quais são suas opções?

Os smartphones oferecem às marcas um canal íntimo com os clientes, mas seu site está pronto? Explore mobile sites, apps nativos e opções de design responsivo.

Este post foi escrito em 2013. Alguns detalhes podem ter mudado desde então.

Então, com milhões de usuários de smartphone usando seus celulares todos os dias, o que podemos fazer para aproveitar isso? "Para um número cada vez maior de consumidores, em todos os mercados, faixas de renda e demografias, o celular é o dispositivo e o canal de comunicação mais próximo de seus corações. Por definição, é íntimo e pessoal, carregado para todo lado, usado ao longo do dia e personalizado por meio de fotos tiradas e salvas, músicas baixadas, papéis de parede, atalhos criados e, cada vez mais, pela seleção de apps e funções." — TNS Global Key Insights Mobile Life. Por isso, o smartphone representa uma grande oportunidade para as marcas terem um relacionamento íntimo, um a um com seus clientes. Do ponto de vista de owned media, teríamos opções como:

  • desenvolver um mobile site
  • um app mobile nativo
  • aproveitar redes sociais existentes como Facebook, Twitter, Instagram.

Com o mobile site, você não consegue aproveitar diferentes funções como acesso ao álbum de fotos, câmera, vídeos, contatos e outros. A experiência provavelmente não vai ser tão rica/interativa quanto com um app mobile nativo. Porém, a vantagem é que um mobile site é agnóstico de plataforma — ou seja, funciona tanto no iOS quanto no Android ou Windows. Já para o App Nativo, você pode criar apps muito elaborados com experiência rica, gráficos bonitos, imagens 3D etc. Porém, é muito importante saber que você provavelmente vai precisar criar versões diferentes do mesmo app para iOS, Android, Windows Mobile ou qualquer outro sistema operacional.

Seu site atual é mobile friendly?

Para responder a essa pergunta, você pode tentar acessar seu próprio site em um smartphone ou usar um simulador de celular (basta pesquisar "How does your site look on mobile?" online e você vai encontrar muitas ferramentas gratuitas). Se o seu site foi feito em Flash, você NÃO vai conseguir ver nada no iPhone (ou qualquer dispositivo iOS como iPad, iPod Touch) porque o iOS não suporta Flash. Algumas ferramentas vão te dar dicas de como otimizar seu mobile site. As perguntas que fazem podem ser do tipo:

  • "Você está vendo imagens quebradas ou conteúdo faltando?"
  • "Você consegue ler o texto sem dar zoom ou rolar para os lados?"
  • "Os links e botões podem ser clicados com o polegar?"
  • "Vídeos, jogos ou outras animações estão visíveis?"
  • "Os visuais e o tom são consistentes com outros materiais de marketing?"

Ao responder essas perguntas e saber quanto tempo seu mobile site leva para carregar, você consegue ter uma ideia bem geral de como seu mobile site performa e em quais áreas deve investir para melhorar. O checklist acima é bem básico e há muitas outras coisas para verificar se o seu site é mobile friendly.

Site mobile friendly

No Vietnã, quando se trata de desenvolver um mobile site, do ponto de vista técnico, você tem algumas opções:

Responsive Web Design

O Responsive Web Design (RWD ou Design Responsivo) é relativamente novo, então designers e desenvolvedores ainda têm um longo caminho para dominar esse conceito e executá-lo de forma bonita. Há muitos exemplos de sites com design responsivo como http://mashable.com/, http://www.bostonglobe.com/ — ou o meu próprio blog, que usa um tema com design responsivo. Ainda não encontrei muitos sites no Vietnã que implementem o Responsive Design. Do "Think Insights with Google", eles escreveram: "O Responsive Web Design (RWD) permite otimizar a experiência do seu site para diferentes tamanhos de tela sem criar vários sites. Usando templates flexíveis, CSS media queries e eventos JavaScript, um design responsivo pode se adaptar ao tamanho de viewport de um dispositivo, ajustando imagens, layout do template e visibilidade do conteúdo. Você pode até mesmo aproveitar capacidades novas de dispositivos como arrastar, deslizar e outros gestos de toque. Todas essas técnicas de CSS e JavaScript podem ser aplicadas a um único arquivo de HTML, entregue a todos os dispositivos." Exemplo abaixo do Mashable para ilustrar o design responsivo caso você não saiba o que é: mashable desktop version Este é o tamanho normal de tela para desktop (uso Macbook Pro com resolução "best scaled"). Veja o título do artigo à direita: "Google Glass Photographer Makes Picture Taking Awkward". Na parte destacada, você vê que o artigo tem o título em 2 linhas e uma descrição abaixo. Agora veja a imagem abaixo para o tamanho de tela do iPad. Para replicar isso, basta reduzir o tamanho da janela do browser. mashable ipad screen size Por causa da tela menor, o título do artigo aparece em 4 linhas e não temos mais espaço para a descrição. Porém, como dá para ver, o layout é responsivo e a visualização continua ótima — não quebra e você ainda consegue ler o conteúdo facilmente. O último exemplo é o tamanho de tela do smartphone para o mesmo site do Mashable. Como você pode ver, o layout muda completamente para se adaptar à tela pequena. Você vê apenas a seção New na homepage. A navegação principal se reduz ao botão no canto superior esquerdo — e para ir a outras seções, você precisa clicar nele. mashable iphone screen size

Mobile site: servindo HTML diferente dinamicamente na mesma URL

Quando um cliente visita seu site, é possível para o seu servidor web detectar que tipo de dispositivo está sendo usado e apresentar uma página customizada (HTML + CSS) na mesma URL. Essas páginas personalizadas podem ser projetadas para qualquer tipo de dispositivo — celulares, tablets, computadores desktop e até Smart TVs. Detectar o dispositivo do usuário e alterar o conteúdo servido requer alguma personalização (como folhas de estilo CSS) que precisa ser mantida por dispositivo.

URLs mobile separadas

Outra opção para customizar a experiência do usuário com base no tipo de dispositivo é criar um site separado para o tráfego mobile, independente do seu site original para desktop. O browser detecta se o visitante está em um dispositivo mobile e redireciona para a versão otimizada para mobile (por exemplo, m.vnexpress.net). Um site mobile dedicado permite personalizar especificamente para usuários mobile e geralmente é construído e hospedado de forma independente. Essa solução é bastante comum no Vietnã. Alguns dos maiores portais de notícias do Vietnã usam esse tipo de implementação, como VnExpress e Vietnamnet (2013). vnexpress mobile site

Site mobile friendly ou app mobile nativo?

Do ponto de vista de orçamento, a opção com o menor orçamento seria ter um site mobile separado — ou seja, URLs mobile separadas. O Responsive Web Design geralmente é mais caro em comparação ao mobile site. E claro, construir um mobile site com design responsivo é muito mais barato do que apps nativos. Se você perguntar exatamente quanto mais barato é mobile site vs. app nativo, minha resposta seria: depende. Estimaria que a proporção seja de 3 a 20 vezes mais caro ter um app nativo, dependendo também da funcionalidade. Além de custar menos para construir, o mobile site tem a vantagem de alcance e compatibilidade entre plataformas e browsers. O usuário consegue encontrar o mobile site facilmente apenas pesquisando no Google. Para o site com design responsivo, ele herda todas as vantagens do mobile site, além de oferecer uma experiência de usuário muito melhor em diferentes dispositivos, graças a layouts personalizados. Para atualizar um site RWD, você pode fazer isso via CMS com facilidade. As mudanças ficam disponíveis no browser do usuário instantaneamente, sem aprovação de terceiros como no caso da Apple AppStore. Tanto o mobile site "normal" quanto o site RWD têm algumas grandes desvantagens, como:

  • Muitos não funcionam sem conexão de internet (Do meu entendimento limitado, existem alguns Web Apps que oferecem modo offline)
  • Eles não conseguem acessar dados pessoais do usuário no celular — a câmera, calendário, álbum de fotos, acelerômetro etc. (Isso pode mudar no futuro)
  • Geralmente não oferecem uma experiência de usuário tão rica quanto o app nativo, pois animações complexas, jogos, relatórios, cálculos etc. não podem ser implementados facilmente.
  • Capacidades de push: se você quiser que seu mobile site (web app) rode em background e envie notificações, isso não é possível por enquanto.
  • Facilidade de monetização: com o Google Play, Apple App Store ou outros marketplaces, é muito mais fácil distribuir o app nativo e alcançar um grande público que pode pagar para baixar ou fazer compras in-app. Para mobile site, o modelo de assinatura parece estar entre as poucas opções disponíveis para monetização.

Uma grande desvantagem do app nativo é que, para oferecer a melhor experiência ao usuário, o app precisa ser personalizado/construído para cada plataforma — uma versão para iOS e outra para Android. Isso significa que o custo de desenvolvimento do app nativo é mais alto. O custo de manutenção também é maior. As desvantagens do mobile site são, naturalmente, as vantagens do app nativo. Mas saiba que um app nativo é como um ativo de social media ou um website — uma vez construído, você precisa gastar dinheiro para promovê-lo aos seus usuários e mantê-lo depois. Então não recomendo desenvolver um app apenas para uma campanha de 2 meses e depois parar de dar suporte.

Fluxo de desenvolvimento de app nativo

Se você quiser construir um app mobile nativo, o fluxo geral é assim:

  • Ideação: inclui o conceito do app e as principais funcionalidades. Geralmente é melhor pensar nos benefícios de longo prazo do app (tanto para os usuários quanto para a marca), e não apenas para um burst de campanha (1-2 meses), porque o custo de construir e promover um app para download não é pequeno.
  • Análise de negócios: analisar os requisitos e sugerir a solução tecnológica adequada, framework de base para cada sistema operacional.
  • Wireframe, Design: assim como criar um website, o wireframe é criticamente importante para um app porque é a base da interface do usuário. Se houver algo logicamente errado no wireframe, ou algo faltando, a experiência do usuário será severamente afetada.

O fluxo de telas explicaria como a animação vai funcionar. Com o fluxo de telas, o cliente consegue "visualizar" como usar o app e o que acontece quando um botão é tocado.

  • Banco de dados, CMS e API: esta etapa envolve projetar o banco de dados, programar o CMS e a API conforme os requisitos. Você pode programar o CMS e a API em PHP, Java ou .Net, como preferir. Note que sua equipe de produção web "normal" pode lidar com essa parte — eles só precisam produzir a API conforme solicitado.
  • Programação para conectar o front end do app com o banco de dados, CMS e API: nesta etapa você vai precisar programar usando o Apple/Android SDK, com linguagens como Objective C para iOS etc.

A próxima pergunta a considerar é se você deve desenvolver o app nativo para Android, iOS ou Windows.

Android, iOS ou Windows?

A principal coisa a considerar é a participação de mercado entre iOS e Android no seu público-alvo. Claramente o Windows NÃO é uma plataforma comum, então sua escolha vai ser entre Android ou iOS. Minha recomendação: se você tem orçamento, opte pelos dois. Se quiser monetizar seu app usando pagamento pela loja oficial, o iOS é o caminho. Usuários do Apple App são muito mais propensos a pagar por algo do que usuários Android — até porque é muito mais fácil encontrar versões piratas de apps Android. monthly store revenue ios android and windows Pelo App Annie, você pode ver que a receita da iOS Store é cerca de 4 vezes maior do que a do Google Play mensalmente. Se precisar escolher apenas uma plataforma, depende do seu público-alvo e das escolhas de smartphone deles. Como profissional de marketing, temos que seguir nossos usuários e pescar onde o peixe está. Por fim, o acima é extraído do capítulo "Mobile Asset" do meu livro mais recente sobre Vietnam Digital Marketing. Para comprar o ebook, use este link.

Continuar Lendo

Minha Jornada
Conectar
Idioma
Preferências