Artigo atualizado em 24 de junho 2022. Autores Lucas Ribas, Diluan Matos

O mobile first surgiu da programação. É uma regra que determina que os elementos de um site ou aplicativo que aparecem no celular, devem carregar antes dos elementos que aparecem no computador. Hoje, o termo já é utilizado de forma mais ampla, ele orienta que se deve pensar primeiro em como algo vai ficar na tela do celular e depois no computador.

Veja a imagem abaixo demonstrando como a lógica mobile first funciona. Já pensou ter que carregar todas as imagens e textos que nem irão aparecer na tela do celular? Por isso é importante carregar apenas o que aparecerá no celular e só carregar os elementos de computador depois, caso o acesso seja feito via computador.

A velocidade de carregamento é mais rápida e a experiência do usuário muito melhor.

Segundo dados do relatório “Como os brasileiros compram online“ lançado em 2020 pela Sem Rush junto com a Web Estratégica, a proporção de visitas entre dispositivos mobile e desktop é de 70,3% dos acessos via mobile e 29,7% via desktop.

Se você quiser baixar o relatório completo, clique aqui.

Esse dado apenas comprova aquilo que você vê ao observar o comportamento natural das pessoas. É muito mais provável que alguém que tem um computador também tenha um celular do que o contrário. Talvez você conheça algumas pessoas que não possuem computador, mas possuem celular. Por outro lado, é muito mais difícil encontrar alguém que não possui celular, mas possui computador.

Por que eu deveria usar mobile first?

Sabe quando você está usando o celular, entra em um site e esse site demora para carregar? Está tudo muito pequeno e você precisa ficar dando zoom para conseguir ler? É bem chato e dá vontade de sair daquele site, não é? A situação é bem diferente em sites e aplicativos como o Facebook, Twitter ou o próprio Google, certo? Isso é porque eles usam o mobile first, que foi criado com o intuito de melhorar a experiência do usuário mobile, desde seu carregamento para ser mais rápido, até seu estilo.

E como as empresas devem fazer mobile first?

O primeiro erro (e mais comum) é criar sites ou apresentações que encaixam perfeitamente na tela do computador, mas quando são abertos no celular, apresentam dificuldade de leitura, ou o usuário precisa dar muito zoom para conseguir ler.

Nos smartphones, as apresentações, pdfs, entre outros, abrem muito melhor se estiverem na vertical. Se você for criar uma apresentação para enviar para clientes, por exemplo, é importante gerar uma versão na horizontal para utilizar quando estiver em um computador e outra na vertical para enviar por WhatsApp.

Quer saber mais sobre mobile first? Escute nosso podcast.

Vantagens em usar mobile first

Nos dias de hoje, existem mais usuários de dispositivos móveis do que de desktops e, a cada dia que passa, essa diferença aumenta ainda mais. De acordo com o estudo Digital 2022: Global Overview Report, publicado pelo site Datareportal, o número de pessoas com acesso a internet é de 5 bilhões de pessoas (dados referentes ao mês de janeiro de 2022). A Strategy Analytics revelou que se estima que quase 4 bilhões de pessoas possuem smartphones.

O número de pessoas que possui algum dispositivo móvel com conexão a internet vem aumentando em passos largos nos últimos anos. Visto que, em comparação aos desktops, é muito mais cômodo possuir um celular ou tablet. Tanto pela questão de transportar facilmente para qualquer lugar, simplesmente colocando no bolso, quanto com um custo que cabe no bolso de quase qualquer pessoa hoje em dia, principalmente em comparação a desktops.

Ao aderir mobile first em seu site, você tem mais chances de ranquear ele no google, isso é um incentivo da própria plataforma para que o mobile first seja utilizado, além de que seu site consegue melhor ranking por ficar mais leve, logo, ficando mais rápido.

Aumente a velocidade do seu site com AMP

Quais as desvantagens em usar mobile first?

Sendo bem claro, antes de citar qualquer uma, nenhuma das desvantagens faz com que o mobile first se torne uma opção para se deixar de lado, ele é essencial para qualquer projeto de qualidade. Agora, com isso em mente, vamos lá:

Nenhuma, isso mesmo, nenhuma. Pode ser que para utilizar o mobile first você acabe tendo uma limitação criativa no projeto por ter que se fixar em um espaço pequeno de criação, ou isso ocasione em mais tempo programando seu site, mas isso não é desvantagem nenhuma, é apenas um pequeno contorno que vale totalmente a pena.

Como saber se meu site é mobile first?

O primeiro passo é analisar se o seu site carrega rápido no celular. Você também pode conversar sobre isso com o programador que desenvolveu o site. Mas, independente da regra de programação, o mais importante é pensar se o mobile foi “pensado primeiro”. Isto é, abra o site no celular, como ele fica? É fácil navegar? Os botões e textos têm um bom tamanho e facilitam a navegação? Se a resposta por “sim”, é já um bom sinal. Mas se for “não”, você pode mudar isso.

Como utilizar o mobile first?

O mobile first tem como conceito idealizar a interface para usuários de MOBILE, então seu projeto tem que ser feito desde o começo pensado para esse tipo de dispositivo.

Primeiramente, é recomendado que seja pensado um design minimalista, visto que o tamanho do espaço para criação é menor e que será mais fácil adaptar o design para outros tamanhos.
Os dispositivos móveis têm tamanhos diferentes, mas sempre começamos pelo menor estilo e então vamos adaptando para os maiores. Por exemplo, no lugar de um site com várias imagens, em um celular pequeno em modo retrato, deixamos as imagens em coluna única. Em um celular em modo paisagem, ou um celular maior, podemos utilizar duas colunas de imagens. Em dispositivos ainda maiores, podemos deixar em três colunas e ainda adicionar espaçamento entre elas.

Geralmente, para a criação de sites utilizando o mobile first são feitas diferentes personalizações do mesmo design baseado nas larguras diferentes do dispositivo do usuário, visto que para todos os casos a altura da tela é “infinita” com o usuário apenas movimentando o site para cima e para baixo.

Criar site: tudo que você precisa saber

Conclusão

Essa é uma daquelas “tendências” que já virou realidade e com certeza está consolidada. Até que surja uma nova tecnologia disruptiva que derrube os smartphones, é bom você adaptar suas apresentações, sites e sistemas às telas de celulares. E para não ficar de fora da próxima tendência, algo que está crescendo muito ultimamente é a chamada internet das coisas.

Dá pra se dizer que o Mobile First é um tipo de internet das coisas. Pois a internet surgiu no computador e hoje está presente nos smartphones, nos tablets, nos relógios, nas geladeiras e até em cafeteiras. O futuro nos indica que teremos casas e empresas completamente conectadas com a internet. Se você ainda tem itens no seu negócio que não são mobile first, imagine quando alguém puder acessar o seu site usando um relógio. É bom correr atrás.