Dispositivos móveis estão cada vez mais sofisticados e presentes em nossas vidas. Ainda assim, muitas vezes eles não recebem a devida importância durante o processo de criação e desenvolvimento de nossos sites. Dotados de características específicas, requerem atenção especial para que ofereçam a melhor experiência possível a seus usuários. Foi nesta busca por otimização que nasceu o mobile first:o foco na experência do usuário em dispositivos móveis.
Já esclarecendo: mobile first não é uma nova tecnologia. Mobile first é um conceito, uma quebra de padrões, vícios e paradigmas que foram adquiridos no decorrer dos anos, enquanto o pensamento sempre esteve voltado para aplicações desktop. Além de tudo, é uma estratégia e um jeito diferente de enxergar o conteúdo que realmente importa em um site.
O que muda em um desenvolvimento pensado como mobile first?
Ao contrário da forma com que historicamente vínhamos trabalhando, focados na experiência de navegação em um computador de mesa ou notebook (e a versão para dispositivos móveis era feita na base do improviso), quando pensamos em mobile first, todas as etapas até a publicação de uma aplicação são feitas com foco no mobile, desde o UX, passando pelo design e desenvolvimento e finalmente chegando à redação de conteúdo.
Dispositivos móveis tem features incríveis que podem ser usadas para proporcionar uma experiência de navegação e interação superior, levando a um nível que, ao menos não tão cedo, o desktop não poderá proporcionar. GPS, giroscópio, multitouch e acelerômetro, por exemplo, são funcionalidades que podem enriquecer (e muito!) a experiência do usuário.
Uma espiada rápida em estatísticas de uso da internet mostra o rápido crescimento dos números que representam dispositivos móveis como tablets e celulares e também de conteúdo e apps feitos para esses dispositivos.
O celular é quase uma extensão de nossa mente, usamos ele pra praticamente tudo e esses dados a seguir mostram o quão rápido isso está crescendo no mundo inteiro, incluindo o Brasil.
Uma pesquisada realizada em 2014 e divulgada em 2016 pelo IBGE, mostra que pela primeira vez os celulares passaram os computadores de mesa no acesso a internet pelos brasileiros. Fonte: http://agenciabrasil.ebc.com.br/economia/noticia/2016-04/celular-e-principal-meio-de-acesso-internet-na-maioria-dos-lares
Ainda no Brasil, cerca de 45% das pessoas usam o smartphone para pagamento de contas básicas como água e luz, um dado de 2015. Outro dado interessante é de que cerca de 7 milhões de brasileiros acessa a internet apenas pelo celular. Fonte: http://avellareduarte.com.br/fases-projetos/conceituacao/demandas-do-publico/pesquisas-de-usuarios-atividades-2/dados-sobre-o-publico-alvo/dispositivos-moveis-2015-dados-e-fontes/
Recentemente, o WhatsApp anunciou que esta avaliando a possibilidade de permitir pagamentos através de seu app. Fonte: https://olhardigital.uol.com.br/noticia/usuarios-vao-poder-fazer-pagamentos-pelo-whatsapp/67249
O tráfego em sites utilizando smartphone cresceu 600% em 2010. Fonte: http://news.bango.com/2010/02/16/600-percent-growth-in-mobile-web-usage/
Em 2015, no Brasil, as vendas através de dispositivos móveis cresceram cerca de 20%. Fonte: http://opus-software.com.br/estatisticas-uso-celular-brasil/
Em uma visão global o cenário não é muito diferente, em 2015 o número de acessos a internet "mobile only" ultrapassou os números de acesso "desktop only" em pouco mais de 1%. Fonte: http://comscore.com/Insights/Blog/Number-of-Mobile-Only-Internet-Users-Now-Exceeds-Desktop-Only-in-the-U.S
Além de nos fazer pensar e repensar sobre um assunto tão recorrente na vida de quem trabalha com web, o pensamento mobile first também tem alguns pontos bem interessantes.
Imagine o cenário onde no celular algumas informações que estão presentes no desktop não serão exibidas, o caminho mais curto seria esconder no celular esse conteúdo, a estética estaria resolvida, problema solucionado, mobile first, não é? Errado, essa abordagem fará com que o dispositivo móvel carregue todo o conteúdo e depois o esconda, justamente o device que tem menos recursos de processamento e acesso a internet tem que baixar coisas que nem serão vistas e de forma nenhuma serão aproveitadas, dessa forma haverá perda de performance e o usuário será obrigado a gastar banda de sua conexão móvel para baixar conteúdo que nunca verá.
A abordagem correta neste caso, onde o device móvel e desktop diferem em conteúdo é usar o design adaptativo. Se isso não for possível, deve-se ao menos fazer com que o conteúdo esteja naturalmente escondido e depois fazer com que o desktop o exiba, evitando assim processamento desnecessário de renderização por parte do celular.
Uma atualização no crawler do Google, feita em 2015, da prioridade a sites que sejam feitos pensados para dispositivos móveis. Depois desse update, o famoso buscador (que foi um dos primeiros a apresentar uma proposta envolvendo mobile first), prioriza para seus usuários conteúdos otimizados para celulares, e isso não vale somente se este está realmente buscando por um dispositivo móvel, sites otimizados para celulares ganham relevância mesmo quando buscados por computadores de mesa. Fonte: https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html
Uma coisa que ainda se pensa muito sobre responsividade e mobile first é que isso é uma adaptação que deve ser feita somente no processo de desenvolvimento, fazendo com que muitas promessas de mobile-first não sejam cumpridas pois isso não é verdade. O processo criativo é tão importante quando o desenvolvimento quando iniciamos a construção ou adaptação para criar algo realmente mobile-first.
Design responsivo e adaptativo? O design responsivo surgiu inicialmente para solucionar problemas de arquitetura em grandes cidades, um jeito de tentar resolver problemas para espaços pequenos, algo como móveis que pudessem ser dobrados, camas que pudessem ser guardadas na parede, tudo para dar a espaços pequenos o mesmo conforto de um espaço maior.
Na web o conceito começou a surgir por volta de 2000, com o surgimento de telas LCD e com o surgimento de novos notebooks e padrões de tela. Mas isso ainda não justificava a criação de um novo padrão de design. Somente com o surgimento dos celulares foi que uma reformulação no design se fez necessária e a partir de 2010 o design responsivo para web começou a ser um dos assuntos mais debatidos no meio.
O design responsivo visa ajustar esteticamente o conteúdo para os diferentes tipos de tela que devemos dar suporte, para podermos ter uma leitura desse conteúdo da maneira mais confortável em cada dispositivo ou resolução.
Sutilmente diferente do design responsivo, e como uma variação dele, o design adaptativo não muda somente a estética, mas sim todo o conteúdo; Um exemplo seria um artigo para leitura rápida em um celular e um artigo completo com imagens e videos no desktop, o conteúdo mudou mas a informação que se passa ainda é a mesma.
É comum o receio pelo mobile-first na questão de custos pois imaginamos que como isso muitas vezes é vendido como uma opção a parte, logo deve ser mais caro e isso não é verdade.
Um projeto pensado em desktop first geralmente custa mais caro, pois tende a gastar todos os recursos para uma versão desktop e depois cortar custos para uma versão mobile, e nesse ponto é onde fica mais caro, pois essa adaptação exige esforço. Já um projeto mobile first, tende a administrar bem os recursos para construir algo para o celular e depois gastar essa economia em uma versão enriquecida para desktop, neste fluxo, a adaptação é muito mais fácil exige bem menos esforço.
Há de se pensar também que, nas vezes onde o design responsivo for bem aplicado, não exigirá mudanças para telas maiores. Fonte: https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html
Adicionar conteúdo em dispositivos de mesa como desktops é relativamente fácil. Dispositivos móveis limitam bastante isso, não deixando espaço para conteúdo irrelevante, a seleção das informações que devem ser mostradas em um dispositivo móvel exige alguns passos a mais já que é necessário mostrar somente o que seu mercado (público) quer ver.
Organizar a informação para dispositivos móveis é um desafio, e por isso deve ser feito primeiro. Não somente no design, mas também na arquitetura de software. Menus dropdown, o floating button ou o famoso menu drawer do material design foram criados para solucionar problemas de poluição visual em dispositivos móveis.
Uma feature que funcione bem em um device móvel poderá ser usada sem problemas em um dispositivo com tela maior, algumas vezes pequenos ajustes estéticos podem ser feitos.
Algumas perguntas podem ajudar a mensurar a importância dos dispositivos para cada projeto.
- Qual o público-alvo deve ser atingido?
- Em qual hora do dia o publico costuma acessar o site?
- Quais os recursos ele usa ou deve poder usar no desktop? E no celular?
- Estamos reformulando o site, então, quais as estatísticas de acesso de cada device?
- O site possui recursos de interação social, como compartilhamentos, comentários?
Se o seu público é jovem, por exemplo, muito provavelmente ele irá acessar o conteúdo de seu site através de um dispositivo móvel. Cada caso deve ser estudado com mais profundidade de maneira individual para encontrar a melhor saída para problemas específicos.
Sabemos que os devices móveis conquistaram seu espaço e sabemos que as pessoas em sua maioria preferem o celular para acessar a internet e interagir socialmente e isso só tende a aumentar mais ainda nos próximos anos. Usuários estão cada vez mais exigentes em relação a performance de sites acessos via mobile, logo não haverá mais espaço para falhar e sites que não levarem isso em consideração perderão acessos e clientes.
O mundo está, claramente gastando mais tempo na internet usando o celular, é muito sensato desenvolver pensando primeiramente nessas pessoas.
É muito importante trabalhar para viabilizar uma boa experiência e melhorar o conteúdo para esse público, não somente para conquista-los mas também para evoluir este conceito e se preparar para os novos cenários que isso irá criar.