Mobile first: entenda o conceito e como aplicar no seu site

Publicado 29/04/2022

É só olhar à volta: todo mundo está usando o celular a todo momento. Na rua, no restaurante, no ônibus, na sala de aula, no sofá de casa… Tem sempre alguém com o smartphone na mão para olhar as redes sociais, conferir os e-mails ou fazer uma pesquisa no Google. Na vida, já somos mobile first — então, por que muitos sites ainda não são?

Mobile first é um conceito usado no universo de marketing, design e desenvolvimento, que coloca a criação de sites e conteúdos para dispositivos móveis em primeiro lugar — depois, eles são ajustados para o computador. Afinal, se já usamos mais o smartphone do que o desktop para acessar a internet, por que pensar primeiro no computador?

A perspectiva do mobile first ganha cada vez mais adeptos, porque se alinha aos hábitos dos usuários e oferece uma melhor experiência a eles. Por esta razão, vamos entender o significado desse conceito e como aplicá-lo no marketing digital. Acompanhe agora para saber mais!

O que é mobile first?

Mobile first é um conceito que coloca a criação de sites, aplicativos e conteúdos para smartphones como prioridades nos projetos.

Trata-se de uma mudança de perspectiva para profissionais de marketing, design e desenvolvimento, que se acostumaram a trabalhar com a tela do desktop na criação dos seus projetos. Com a mudança de hábitos dos usuários, que passaram a usar mais o celular do que o desktop para acessar a internet, essa mentalidade precisou mudar.

O conceito foi lançado pelo designer Luke Wroblewski, atualmente Diretor de Produto do Google. Em 2009, ele publicou um artigo defendendo a ideia do mobile first.

Se, até aquele momento, a experiência mobile era construída depois da versão para PC ser concluída, o crescimento do uso de smartphones já justificativa uma mudança de perspectiva. Além disso, o designer explicou que o mobile permitia criar aplicações com mais recursos interessantes e com uma melhor experiência ao usuário.

Agora imagine: se, em 2009, a percepção de Luke já era essa, pense em como o mobile first se fortaleceu nos últimos anos, em que o número de usuários móveis não para de crescer e novos recursos para smartphones são criados a todo momento.

Diferença entre mobile first e design responsivo

Mobile first e design responsivo são conceitos relacionados ao desenvolvimento de sites para dispositivos móveis. Porém, é preciso entender a diferença entre eles, porque não são a mesma coisa.

O design responsivo se refere a uma técnica do web design que faz as páginas de um site se adaptarem a qualquer tamanho de tela, usando uma mesma URL. O site que o usuário acessa é o mesmo — o que muda são a disposição e o tamanho dos elementos, para que ofereçam uma melhor experiência de acordo com o dispositivo que a pessoa usa.

Já o mobile first não se trata de uma técnica, mas de uma perspectiva de design e desenvolvimento que coloca os dispositivos móveis em primeiro lugar. Esse conceito pode ser aplicado em diferentes técnicas de design e desenvolvimento, inclusive no design responsivo, mas também na exibição dinâmica (códigos diferentes) e no site versionado (URL diferentes).

Portanto, podemos entender que um site com design responsivo pode ser desenvolvido na perspectiva do mobile first, mas não necessariamente. Embora um site responsivo se adapte a qualquer tela, ele pode ter sido projetado com foco no desktop. O que o mobile first propõe é mudar essa lógica, ao priorizar os usuários mobile, em qualquer técnica que você use.

Mobile first não é apenas para sites!

Sim, o conceito de mobile first surgiu no contexto de criação de sites e influenciou o trabalho de designers e desenvolvedores. Porém, como não se trata de uma técnica, mas de um conceito, essa perspectiva pode ser aplicada em outras áreas.

É aí que o mobile first entra também no trabalho de profissionais de marketing digital, redes sociais, e-mail marketing e conteúdo. Nessas áreas, também é importante colocar os usuários mobile em primeiro lugar, mesmo sem lidar diretamente com os códigos e o design das páginas.

Ao produzir um conteúdo para o blog, uma mensagem de e-mail ou um post para o Instagram, por exemplo, os profissionais devem pensar no contexto de quem vai consumi-los pelo celular. Afinal, é bem diferente ler um texto ou absorver uma imagem estando sentado em frente ao computador ou de pé esperando o Uber chegar, por exemplo.

Então, entenda o mobile first como uma mentalidade que deve ser interiorizada por todos os profissionais que criam soluções para os usuários.

Panorama do uso de dispositivos móveis

Mobile first se tornou uma tendência cada vez mais forte nos últimos anos principalmente devido ao crescimento do uso de smartphones. Para as empresas, é essencial acompanhar essa tendência para atender melhor aos hábitos e comportamentos dos consumidores.

Esse crescimento fica evidente quando olhamos os dados de uso do celular. A pesquisa TIC Domicílios, realizada no Brasil pelo Cetic.br, identificou o aumento no uso do celular para acessar a internet, enquanto o de computador decaiu.

Em 2019, 99% dos usuários de internet utilizavam o celular para acesso à internet, mas só 42% utilizavam o desktop. Em 2014, porém, mais pessoas (80%) usavam o desktop e não o celular (76%) para acessar a internet, tendência que se inverteu a partir de 2015.

Infográfico representando o mobile first, onde traz o aumento do uso da internet por usuários de smartphones. Além disso, o gráfico destaca o crescimento do uso da televisão e a queda dos computadores.

A pesquisa sobre mobile commerce no Brasil, realizada pelo Panorama Mobile Time/Opinion Box, também traz dados interessantes. Em 2020, 91% dos entrevistados disseram que haviam feito compras pelo celular, percentual que era de 85% em 2019.

Com esses dados, percebemos que o celular não é apenas usado para acessar a internet, mas também para fazer compras, o que mostra que o mobile first é essencial também para as lojas virtuais.

Mas uma pesquisa da Wolfgang Digital acende também um alerta. Segundo o relatório, o mobile foi responsável por 70% do tráfego e 55% da receita das lojas virtuais na Europa, Reino Unido e Estados Unidos em 2020. Esses percentuais ficam bem acima de tablets e desktops. Porém, chama atenção o gap entre tráfego e receita por dispositivos móveis. É possível pensar que muita gente navega e pesquisa pelo celular, mas prefere comprar pelo desktop. Mas por que isso? Porque provavelmente os sites não estão oferecendo uma boa experiência ao usuário.

Gráfico representa os dados do mobile first. Ele apresenta que 70% do tráfego atual por dispositivos conectados à internet vem de dispositivos mobile, contra 22% de desktop e 8% de tablets. Também apresenta o rendimento dos dispositivos, onde 55% fica com o mobile, 36% com o desktop e apenas 9% com tablets.

É aí que entra a importância do mobile first: em vez de planejar seu site para o desktop, priorize o mobile e atenda melhor essa maioria de usuários que está navegando pelo celular.

Por que o mobile first é importante no marketing digital?

O mobile first define que os usuários mobile são prioridade para o design e o desenvolvimento de sites. Como mostramos, isso não é por acaso — afinal, a maioria das pessoas que acessam a internet e navegam pelas lojas virtuais faz isso pelo celular.

Então, a perspectiva do mobile first é importante para as empresas desenvolverem uma melhor experiência em dispositivos móveis e atender melhor esses usuários. Uma boa experiência mobile significa oferecer um site que:

  • Carrega as páginas rapidamente;
  • Permite ler os conteúdos com facilidade;
  • Tem botões e links facilmente clicáveis;
  • Não tem páginas com erro;
  • Não cria obstáculos para finalizar tarefas.

Quando isso acontece, os consumidores se sentem mais bem atendidos pela empresa e criam uma percepção positiva sobre a marca na sua mente.

Mas o mobile first não traz benefícios apenas para o branding. É também importante para os resultados diretos em vendas e faturamento, principalmente quando falamos de sites de e-commerce. Se o usuário não tem uma boa experiência no celular, ele tende a abandonar o site (e, pior ainda, ir visitar seu concorrente). Para as empresas, isso significa oportunidades perdidas de contato, de orçamento ou de venda.

Além disso, o Google valoriza quando um site oferece uma boa experiência no celular, porque sabe a importância do mobile para as buscas na web. Não é por acaso que o buscador adotou o Mobile-First Indexing, ou seja, a indexação e classificação de páginas que prioriza os dispositivos móveis. A partir dessa atualização, o Google passou a avaliar primeiramente a versão mobile das páginas para indexar seu conteúdo e classificá-las no ranking.

Portanto, quando você utiliza o conceito de mobile first, está pensando como o Google. Dessa forma, suas páginas ganham pontos no SEO e oferecem uma melhor experiência ao usuário de smartphones.

Embora muitas empresas ainda estejam adaptando seus sites para mobile, muitas delas já entendem a importância disso. A HubSpot mostra que a otimização para mobile é uma das três principais táticas de SEO das empresas.

Infográfico apresenta a ligação entre mobile first e SEO. Ele traz a pergunta sobre as táticas que empresas implementam. Os resultados são: palavra-chave estratégica em primeiro lugar, localização em segundo e a otimização para mobile em último.

Como adotar o mobile first no seu site: veja 7 dicas

Para adotar o mobile first, é importante entender o que muda quando o seu site é acessado pelo celular. É preciso considerar, por exemplo, estes pontos:

  • Tamanho de tela reduzido;
  • Formato de tela predominantemente vertical;
  • Tela com interação por toque (em vez de clique);
  • Conexão móvel como limitação de dados e instabilidade;
  • Contexto do usuário (em movimento, fora de casa, com pressa etc.).

A partir desses pontos, podemos perceber que a importância da arquitetura da informação, da usabilidade e da acessibilidade aumentam no mobile. Por isso, vamos ver agora algumas dicas principais para desenvolver um projeto de site na perspectiva do mobile first. Acompanhe:

1. Pense no contexto do usuário mobile

Um bom começo para um projeto mobile first é pensar como o usuário. Coloque-se no lugar de quem vai acessar o seu site pelo celular, considerando não apenas o dispositivo, mas também no contexto ao redor da pessoa.

Muitas vezes, os usuários mobile estão fora de casa, aguardando uma consulta ou procurando um restaurante para almoçar. Também podem estar em movimento, dentro do ônibus ou caminhando até a parada. Quando estão em casa, podem estar na sala com a família e com a TV ligada, usando o celular como segunda tela.

As possibilidades são diversas, mas perceba como a tendência é que a atenção do usuário esteja mais dispersa no contexto mobile. E isso influencia no planejamento do site.

2. Foque nos principais elementos e tarefas

Se a atenção do usuário é mais dispersa e o tamanho da tela é reduzido, é importante criar uma experiência mais objetiva no site, que ofereça rapidamente aquilo que os usuários mais procuram. Para isso, é importante fazer um estudo dos usuários para entender quais são suas prioridades no site.

No mobile, pode ser interessante destacar o endereço da loja ou escritório, por exemplo, já que as pessoas podem estar em deslocamento e apenas querem saber como chegar até lá. É importante também focar os elementos na conversão que você deseja, como enviar um pedido de orçamento ou comprar o produto, sem distrair o usuário com elementos supérfluos.

Além disso, você precisa simplificar o design e o conteúdo do site para não poluir o visual e causar mais distrações.

3. Verticalize os elementos do site

mobile first

No celular, interagimos com as páginas preferencialmente no modo vertical. É claro que você pode virar a tela e usar o celular na posição horizontal, mas não se pode exigir que o usuário faça isso, porque não é intuitivo. Esse é um dos segredos de popularidade das redes sociais de vídeos curtos — como Tiktok e Instagram —: se adaptar ao formato.

Então, planeje o site pensando na tela vertical. Pense, por exemplo, nos elementos que devem ficar acima da rolagem, nas imagens e vídeos que devem aproveitar a tela vertical e na disposição dos elementos. Veja que essa é uma das principais mudanças em relação ao desktop, com o qual nos acostumamos a acessar sites no modo horizontal. 

4. Otimize as imagens do site

As imagens impactam diretamente na velocidade das páginas e no volume de dados que um site exige. Por isso, é importante otimizar as imagens para reduzir seu peso no carregamento, já que muitos usuários mobile têm conexões lentas e restritas.

Desta forma, reduza o tamanho das imagens antes de subi-las para o site. Outra solução é adiar o carregamento de imagens que não aparecem na tela, para que elas carreguem apenas à medida que o usuário rola a página. Você também pode usar formatos de última geração, como WebP e AVIF, que fazem uma melhor compactação das imagens.

Outra dica, referente aos conteúdos multimídia, é evitar o carregamento automático de vídeos. Isso pode pesar a página, além de gerar um desconforto desnecessário ao visitante. Nem precisamos falar sobre as páginas com playlists tocando, igual rádio de supermercado, não é?!

5. Aplique a escaneabilidade nos conteúdos

Lembre mais uma vez da atenção dispersa do usuário mobile. Enquanto a pessoa lê um conteúdo no celular, ela pode ser distraída por inúmeros fatores do seu ambiente. Então, o ideal é oferecer um conteúdo mais objetivo e escaneável.

A escaneabilidade se refere à capacidade do usuário de absorver os principais pontos do conteúdo passando rapidamente os olhos por ele. Para isso, você pode utilizar intertítulos, listas, negritos, links e imagens ao longo do texto, que facilitem a apreensão do conteúdo para o usuário mobile.

6. Aumente o tamanho dos elementos clicáveis

Uma das principais preocupações em um projeto mobile first é com os elementos clicáveis. Afinal, são os links que permitem a interação dos usuários com as páginas e levam a realizar as tarefas que eles desejam.

Mas, nos projetos que apenas adaptam os sites desktop para o mobile, essa é uma das falhas mais comuns. Os elementos clicáveis podem ficar pequenos, porque foram pensados para o clique do mouse, não para o toque com o dedo na tela. Assim, o usuário pode clicar onde não gostaria e se perder na interação com as páginas.

Por isso, preocupe-se em aumentar o tamanho dos links e botões para que eles sejam facilmente clicáveis. 

7. Avalie o site em ferramentas de teste

Aproveite as ferramentas que avaliam se o seu site é mobile-friendly. Existem opções gratuitas que fazem uma varredura nas suas páginas e identificam problemas que podem afetar a experiência mobile, como o tamanho das imagens e a velocidade de carregamento.

Estas são algumas ferramentas gratuitas que você pode utilizar:

Agora você já esta apto para começar a adotar o conceito de mobile first nos seus projetos. Pense nos usuários de dispositivos móveis como prioridade da sua empresa, em todas as suas estratégias de marketing digital. Se você trabalha com um parceiro de marketing, entenda se a empresa também trabalha com essa mentalidade.

Aqui na Arcana, já trabalhamos com mobile first no desenvolvimento de sites, para criar uma melhor experiência aos usuários de dispositivos móveis. Acompanhe nossas publicações no LinkedIn e no Instagram e conheça o nosso trabalho.

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments

Assine nossa newsletter e receba nosso conteúdo em seu e-mail: