Durante muitos anos seguidos, o número de dispositivos móveis teve um crescimento quase que exponencial. Por causa disso, surgiram diversas abordagens diferentes de criação de sites e interfaces visuais, a mobile first é uma delas.
Nesse artigo explicaremos o que é o mobile first, como ele funciona, quais as preocupações ao adotar essa abordagem e como utilizá-lo no seu próximo projeto, ao até mesmo no atual.
Será um post completo. Portanto, recomendamos salvar nos favoritos para lê-lo com mais calma, assim que possível.
O que é Mobile First?
Mobile first é uma abordagem de design e desenvolvimento de sites e aplicativos que prioriza a experiência do usuário em dispositivos móveis, como smartphones e tablets, antes de considerar a versão para desktop.
Ao invés de criar sistemas para computadores e deixá-los responsivos (adaptado para telas menores), a ideia é praticamente a inversa: criar sistemas para dispositivos móveis e apenas depois focar em telas maiores.
Esse tipo de abordagem é essencial atualmente porque o número de usuários via dispositivos móveis superam os usuários de computadores, uma vez que, pela portabilidade, é muito mais fácil navegar pelo celular.
E, mesmo que existam sites responsivos, eles não foram projetados pensando nesses usuários de telas menores, são apenas adaptados, o que pode gerar alguns ruídos de comunicação capazes de prejudicar a experiência de quem acessa.
Além disso, o mobile first traz uma solução interessante para os sistemas desenvolvidos: simplicidade. Pois, como dispositivos menores possuem limitações relacionadas a periféricos e tamanho de tela, há a necessidade de simplificar a navegação e os demais elementos, tornando esse processo mais exato.
Claro, há algumas críticas relacionadas ao mobile first em relação à ausência de criatividade. Ainda assim, vemos soluções inovadoras e interessante.
Quais as vantagens do mobile first?
O mobile first possui inúmeras vantagens, as enumeramos abaixo:
1. Melhor experiência de usuário
Logicamente, como mais usuários mobile acessam os sites, a experiência deles será superior em sistemas mobile first. Pois cada micro interação terá sido projetada para usuários de dispositivos menores, fazendo com que eles permaneçam mais tempo nas suas páginas.
2. Aumento da eficiência do design
Como dito anteriormente, por dispositivos menores possuírem algumas incapacidades em comparação com telas maiores, há um aumento da eficiência do design por focarem em funções simples e uma navegação enxuta.
Algo diferente dos sites antigamente, em que era comum encontrar níveis e subníveis de navegação no menu principal, algo que fazia sentido para o contexto da época, mas que hoje se é inimaginável.
3. Melhor acessibilidade
Por focar em dispositivos móveis, é considerado conexões limitadas (pela rede móvel não ser tão veloz em comparação a banda larga), aplicações de acessibilidade de celulares e outros recursos focados no usuário, como o modo noturno.
Dessa forma, se faz o projeto do site ou aplicativo verificando todas as impossibilidades e desafios do usuário.
4. Desempenho superior do site
Como o site é feito focando em aparelhos mobile, é necessário carregar em uma alta velocidade, devido não apenas às conexões mais fracas, mas também ao hardware dos aparelhos.
O que é exigido de um celular e de um computador para amostragem web é bem diferente.
Com isso, as páginas precisam ser mais rápidas, o que favorece diretamente a experiência dos visitantes.
5. Otimizações para SEO
O Google e demais buscadores sabem que o mobile é requisito fundamental para bons resultados nas buscas.
Dessa forma, o mobile first ajuda seu site a ranquear melhor, principalmente para o público mais ativo, que é o dispositivos movido.
Claro, toda otimização relativa a SEO não é capaz de fazer diferença sozinha, mas com certeza criar páginas focadas exclusivamente no público de dispositivos menores gera pontos positivos com os buscadores.
Mobile first é o mesmo que site responsivo?
O mobile first, como já dito, é a criação de sites ou aplicações pensando primariamente em suas versões para dispositivos móveis.
Já sites responsivos são sites que se adaptam ao tamanho da tela do usuário, normalmente feitos primeiro para desktop e com adaptação para mobile.
As duas abordagens podem ser confundidas pelas similaridades, mas o mobile first é muito mais otimizada e recomendada para o padrão atual de sites e aplicativos.
Porém, um não exclui o outro. Todo site mobile first é responsivo, mas nem todo site responsivo é mobile first. Cada caso é um caso.
Você precisa ter um site mobile first?
Sim e não. Sim, você deveria ter um site mobile first porque isso afetará suas métricas de forma muito significativa. Você terá mais visitantes, mais resultados e mais dinheiro, a depender se seu projeto é com fins lucrativos ou não.
E não, porque projetos responsivos ainda funcionam muito bem atualmente, desde que o site tenha as principais otimizações necessárias para um carregamento suave, que não impacte negativamente a experiência de usuário.
Como criar um site mobile first
Desenvolver um site mobile first é um desafio necessário atualmente. Com os passos a seguir, será muito mais fácil implementá-lo. Portanto, pense nos próximos tópicos como um checklist do que precisa ser planejado e colocado em prática para seu site mobile first ser lançado com bons resultados.
1. Identifique as necessidades do usuário
Antes mesmo de “botar a mão no código” é necessário entender qual o objetivo dos usuários ao acessarem seu site. Esse objetivo deve ser central em todas as tomadas de decisão durante o desenvolvimento.
Um exemplo prático é: se o projeto envolve um site de hospedagem, como o AirBnb, a necessidade do usuário é encontrar um bom local para se hospedar durante uma viagem. Por isso, todas as suas páginas devem facilitar esse objetivo, o priorizando em detrimento de outras informações secundárias.
No entanto, perceba que isso depende de contexto. Se o usuário deseja encontrar um número para contato, na página correspondente a isso, não faz sentido oferecer locais para ele se hospedar.
2. Faça o esboço do site
Crie o esboço do site, mas sem imaginá-lo no desktop. O imagine como ele deve ser no celular, reduzindo o número de opções e botões, direcionando a visão e objetivos do usuário para um só elemento.
Uma forma de se inspirar para fazer esse esboço é olhando as versões mobile de outros sites concorrentes, mas tenha sempre em mente que eles servem apenas para inspiração, uma vez que a maioria talvez nem tenha implementado o mobile first.
Na revisão final do esboço, reduza o máximo de opções que forem possíveis. Acredite, quanto mais opções de botões e telas o usuário tiver a disposição, pior será sua capacidade de gerar o resultado que deseja.
3. Teste o esboço do site
O esboço do site pode ser feito em formato de wireframe ou até mesmo HTML simples já implementado. Com ele pronto, faça testes com um número interessante de usuários, pedindo para eles tomarem decisões e vendo como se comportam até atingir esse objetivo.
Nessa etapa, estar atendo ao comportamento do usuário é primordial, porque ele te permitirá a identificação de erros ou outros ruídos comunicacionais que podem surgir no caminho.
Importante: todo esse teste deve ser feito em dispositivos mobile, justamente para entender a dinâmica de ação deles na versão do site que terá maior quantidade de acessos.
4. Faça o design final do site
Um bom design é fundamental, sem sombra de dúvidas. Por isso, recomendamos a contratação de um profissional da área. Caso não possa contratar no momento, siga as dicas abaixo para ter um site bem estruturado e com bom design.
- Utilize no máximo duas cores além do branco, preto ou cinza.
- Escolha no máximo duas fontes, uma serifada para texto corrido e não serifada para títulos.
- Use o espaço em branco de forma bem estratégia para separar os elementos de forma regular e criar uma sensação forte de organização. Sites com a temática minimalista fazem isso com maestria.
- Utilize sistemas de grid para organizar os elementos e trazer harmonia para cada seção das páginas.
- Considere o uso de ícones para facilitar a navegação, como sites mobile first tendem a se parecer muito com aplicativos, a navegação usual deles (por abas e ícones) pode ser bem interessante.
- Use cores contrastantes para botões e links, eles precisam se diferenciar dos demais elementos.
5. Desenvolva o site
Agora, resta o desenvolvimento do tema WordPress. É possível contratar profissionais para essa etapa ou criar por conta própria, a depender do seu page builder, como Elementor, Divi ou até mesmo Wix. Essa é uma etapa rápida, à vista do que já foi projetado das páginas até o momento, mas ainda assim é necessário atenção para não fugir do planejamento.
É comum, nesse momento, se sentir tentado a alterar algo do projeto. Mantenha o esboço original, justamente porque os testes foram feitos nele. Isso garantirá bem mais integridade no resultado.
6. Teste o site
Mesmo o site tendo sido feito a partir do esboço no qual os testes foram feitos, realize retestes para saber se o design não prejudicou, de alguma forma, a experiência do usuário. Se os resultados se mantiverem parecidos com o primeiro, ótimo. Se não estiverem, é necessário entender o quê do design gerou ruído de comunicação.
7. Otimize o site
Uma vez que todo o seu site esteja pronto, ainda assim é necessário otimizá-lo para poder performar da melhor forma possível. Isso pode ser feito seguindo os passos abaixo:
- Use uma boa plataforma de hospedagem de sites. Recomendamos fortemente a Hostinger por ser a melhor e mais completa de todas (por um valor absurdo de tão barato).
- Utilize uma CDN (content delivery network - rede de entrega de conteúdo) para que seu site carregue o mais rápido possível.
- Comprima as imagens com o plugin Smush. Assim os arquivo ficam com o tamanho reduzido e carregarão bem mais rápido do que de costume.
- Use um plugin de cache, como o WP Fastest Cache, para acelerar o carregamento do seu site baixando os arquivos mais requisitados no computador do usuário.
- Habilite o Gzip no seu servidor para compactar os arquivos do site.
- Use o protocolo seguro HTTPS para garantir uma navegação criptografada para o usuário.
- Instale um plugin de SEO, como o Yoast SEO para garantir um melhor ranqueamento nas buscas.
- Configure URLs amigáveis.
- Confira a velocidade do site no Google Page Speed Insights.
Perguntas frequentes sobre mobile first
Existem alguns erros comuns ao criar um site mobile first, são eles: ignorar os testes antes de implementar o layout final, desconsiderar a velocidade de carregamento em detrimento do design e ignorar o site em versão para telas maiores.
Adaptar formulários, principalmente os maiores, são um desafio em tanto para sites mobile first. Uma forma de fazer isso é remover campos desnecessários, usar botões em tamanho compatível com o tamanho da tela e utilizar as tags corretas para otimizar o preenchimento de dados específicos.
Por exemplo, se é um campo de telefone, usar o input tel. Se é um campo de data, usar o input date e assim sucessivamente.
Não se trata de excluir elementos de um site normal para se tornar mobile first. Um site mobile first é projetado para ser assim, sem a influência de uma versão anterior ou maior.
Não. O Google AMP é uma iniciativa da Google para desenvolver páginas com um carregamento muito mais rápido em celulares. Ele usar uma versão limitada do HTML e a cache do Google para mostrar as páginas com mais velocidade.
Ele pode ser usado com o mobile first, mas são conceitos diferentes. O AMP é uma maneira de otimizar sites já existentes para uma abordagem mais mobile, enquanto o mobile first é o planejamento concreto de desenvolvimento de um site ou aplicativo focado, desde o início, em telas menores.
Conclusão: mobile first
No site de hoje mostramos o conceito do mobile first e suas implicações, mostramos também como projetar um site mobile first. Esperamos que o conteúdo trazido tenha tirado todas as suas dúvidas a respeito e te ajudado a aplicar o mobile first no seu projeto atual ou próximo.
Se tiver alguma dúvida a respeito, por favor, fale com a gente na seção dos comentários logo abaixo. Faremos o possível para o seu entendimento ser completo sobre o tema.
Obrigado por ler até aqui. Nos vemos no próximo conteúdo.
