Mobile First

Ângulo Digital

15 de março de 2017

Entenda o que é mobile first e saiba usá-lo para construir seu site

O que é mobile first?

Pense no seu dia a dia. Os dispositivos móveis estão em cada momento da sua rotina, desde os primeiros minutos depois de acordar, até aquela última checada nas redes sociais antes de dormir. Não parece natural agora que o desenvolvimento web esteja tão adaptado a esta realidade? Sites responsivos e versões mobile de websites dividem a pauta quando os assuntos são as páginas online. Entenda melhor o que é mobile first, porque acreditar neste conceito e como usá-lo para construir seu site já pensando nos rumos da internet daqui para frente.

Acontece que algo sutil mudou essa visão. Agora, não devemos mais ver a internet para dispositivos móveis como uma opção, e sim como o foco principal de todas as ações online — este é basicamente o princípio do mobile first, movimento que pensa a web para dispositivos móveis, e depois para o resto.

Tendências

A tendência da internet usada em dispositivos móveis já vem se delineando há anos, impulsionada pela popularização dos smartphones e do crescimento das redes sem fio em países como o Brasil, a China e a Índia. A América do Norte, a Europa e a Ásia (principalmente Coreia do Sul e Japão) já possuem internet sem fio de alta velocidade, e nesses lugares a produção tecnológica segue um curso natural. Mas o acesso globalizado à informação coloca os países pobres e os ricos em pé de igualdade quando se fala em desenvolvimento de aplicativos mobile.

Um reflexo disso é que já se vende mais smartphones do que computadores pessoais, os PCs, desde 2010 — e a estimativa de vendas para o ano que vem é de 1 bilhão de smartphones em todo o mundo, o dobro do número de PCs. Teremos, então, dez bilhões de smartphones nas mãos de 7,3 bilhões de pessoas!  Atualmente, o tráfego vindo de smartphones corresponde a 21% da visitação de sites de e-commerce, e segue aumentando, o que significa que, em pouco tempo, o mobile também terá engolido o desktop nas vendas online.

A origem do termo mobile first

Todo este cenário gera uma evolução muito rápida das formas de comunicação móvel. Todos já sabiam da importância de sites compatíveis com a exibição em telas pequenas para a experiência do usuário e para a performance do e-commerce. E um grande ponto de virada surge quando a gigante Google divulga uma esperada atualização no seu algoritmo de indexação e ranking de sites do seu mecanismo de buscas, privilegiando páginas adequadas à navegação mobile.

Mas a origem do conceito de mobile first é bem anterior aos fatos citados acima. Em 2011, um sujeito chamado Luke Wroblewski lançou um guia técnico-estratégico para o desenvolvimento de sites e aplicativos feitos para telas portáteis chamado… Mobile First. Profissional de muito renome no ramo, Wroblewski fundou as startups Polar, adquirida pelo Google no ano passado, além da Bagcheck, que foi comprada pelo Twitter em 2011. Já trabalhou na Benchmark Capital, foi arquiteto-chefe de Design (VP) no Yahoo !, Designer de Interfaces de Usuário no eBay e Interface Designer Sênior da NCSA, empresa que concebeu o primeiro navegador de interface gráfica para a web, o célebre Mosaic. Hoje, é Diretor de Produtos no Google.

O livro disseca toda a experiência de Wroblewski em mobile experience e define alguns paradigmas para o desenvolvimento de interfaces web para usuários de tablets e smartphones, com técnicas específicas e estratégias adaptadas em anos de produção focada no mobile.

Mobile first e arquitetura da informação

Quando se fala em desenvolver projetos web com foco no usuário de smartphones, a principal mudança em relação ao desenvolvimento tradicional com foco em desktops é a arquitetura da informação. A organização e disposição das informações não priorizam a quantidade e variedade de conteúdo, e sim a melhor experiência em telas de tamanho limitado e interação com a ponta dos dedos.

Toda a estrutura de botões, menus e conteúdo deve ser pensado com essas características em mente, privilegiando o conforto e a simplicidade de navegação. Ao invés de muitas alternativas, menos opções e navegabilidade intuitiva. Este é o caminho da arquitetura da informação.

Como usar o mobile first na sua presença online

O princípio básico do mobile first é: o seu site será feito para uso em dispositivos móveis. A partir daí, é feito o desdobramento da interface para desktops, que deve ser a melhor possível, independentemente do viewport, a área útil da tela.

A alternativa, tecnicamente falando, normalmente é o site responsivo, aquele que se adapta à resolução da tela. A formatação deve privilegiar os toques dos dedos, com botões de, no mínimo, 44 pixels de lado e menus retráteis para economizar espaço e tornar o uso agradável e rápido.

Recursos como formulários e ferramentas de pagamento precisam ser simples e fáceis de  preencher, pois este tipo de ação não é tão prática quando pode ser em uma tela grande usando teclado e mouse.

Esses e muitos outros conceitos norteiam o desenvolvimento com foco no mobile, mas há aspectos que não se deve ignorar, e o principal deles é o SEO, a otimização do site para mecanismos de buscas. Mas seguir um dos preceitos divulgados pelo Google pode ser o caminho para um projeto mobile first de sucesso: pense no que é melhor para o seu usuário, o que é mais interessante e prático para ele. Os resultados vêm naturalmente.

Mobile first, mas não só no site

Neste momento, toda a sua estratégia digital deve estar focada no mobile: as ações em redes sociais, produção de conteúdo, aplicativos, veiculação de publicidade em links patrocinados e ações de vendas, tudo deve ser costurado tendo em mente que a interação se dá através dos dispositivos móveis.

Afinal de contas, mobile first não é só uma metodologia de desenvolvimento de sites, mas uma visão do que a internet já está se tornando, e o que é necessário para ter o seu lugar ao sol em um mercado cada vez mais competitivo.

O que você pensa sobre a tendência mobile first? Deixe seu comentário e conte pra gente as suas impressões sobre esse conceito e como implementá-lo no desenvolvimento de sites. Participe da conversa!