Introdução
Fala pessoal! Tudo beleza?
Esse é o primeiro post da série Responsividade, na qual planejo trazer algumas técnicas e boas práticas para garantir que o seu site e/ou aplicação atenda com qualidade a demanda visual das diferentes telas e dispositivos, garantindo uma ótima experiência para o usuário.
'Começando pelo começo', o mobile first é uma técnica que vem tomando cada vez mais espaço na rotina dos(as) desenvolvendores(as), e consiste basicamente em criar sites e/ou aplicações iniciando pelo mobile e depois modificando para as demais telas tradicionais.
Dito isso, vamos explorar abaixo mais algumas características desta técnica.
Fonte: Sandjis Ruluks (blog.froont.com)
Por que o mobile first é tão importante?
É praticamente impossível pensar no desenvolvimento de algum site ou aplicação sem levar em conta a experiência e acessibilidade do usuário. Outro fato importante é que a maioria dos usuários que navegam na internet hoje, utilizam smartphones. Sendo assim, torna-se necessário a criação de telas que se adaptem às telas dos diferentes dispositivos móveis. É aí que entra o mobile first.
Iniciar o desenvolvimento pensando em mobile, garante não apenas que o seu layout não irá quebrar, mas também possibilita a análise de quais elementos são prioridade na exibição para o usuário e quais podem ser descartados, criando assim telas mais limpas, funcionais e visualmente agradáveis.
Levando em conta que o usuário de dispositivos móveis está, em muito dos casos, se movimentando, telas pensadas para atender de forma prática as diversas demandas do mesmo fazem toda a diferença. Além disso, o mobile first garante a construção de sites mais leves, que carregam de forma progressiva e funcional, consumindo o mínimo de dados possíveis.
Como desenvolver utilizando mobile first?
Agora que você já sabe o quão importante é e o quanto esta técnica pode agregar ao seu site, tanto em perfomance quanto em beleza, tá na hora de descobrir como por a mão na massa.
E a resposta é bem simples. O desenvolvimento mobile first não tem nenhum segredo, e se dá da mesma forma que o desenvolvimento pensado inicialmente para desktop, com a diferença do tamanho de tela em que o resultado é renderizado.
Para facilitar essa visualização, a grande maioria dos navegadores contam com telas que simulam o tamanho de diferentes dispositivos móveis. Para acessar o devtools do seu navegador, você pode pressionar Ctrl + Shift + I, ou então clicar na tela com o botão direito e selecionar a opção Inspecionar.
O exemplo abaixo é através da utilização do devtools do Chrome. A parte destacada em vermelho representa o local onde você pode realizar as configurações de visualização da tela, bem como orientação da mesma. É recomendável que você inicie pela menor tela disponível, e vá fazendo as alterações gradativamente.
Uma alternativa ao devtools dos navegadores, é utilizar navegadores alternativos, com ferramentas para desenvolvimento e teste da Web para diferentes tipos de dispositivos, como é o caso do Blisk. Nele você pode desenvolver side by side com telas de diferentes modelos de smartphones e tablets. Realmente uma mão na roda.
Você pode encontrar maiores informações neste link.
Ranqueamento otimizado do Google
Outro fato que não pode ficar de fora, é que, em março de 2018, o Google anunciou oficialmente que a partir daquele momento, os formatos de indexação e ranqueamento da plataforma seguiriam o conceito de mobile first.
A partir dessa alteração, os sites otimizados para dispositivos móveis saem na frente e se destacam nas pesquisas que são feitas utilizando dispositivos móveis. Esse é um belo incentivo para você começar a adotar essa técnica.
E o que vem depois do mobile first?
Se você se perguntou como evoluir o seu site mobile first para abranger telas maiores, a resposta é menos complexa do que você imagina. Você pode fazer isso utilizando Media Queries, que permitem que você defina pontos de quebra, para que a partir de, ou antes de X largura da tela, os seus componentes assumam comportamentos e estilos diferentes.
Ficou curioso(a)? Fica ligado(a) que logo logo vamos ter um post exclusivo sobre este assunto ;).
Conclusão
Adotar esta técnica que tem ocupado um destaque cada vez maior na comunidade de desenvolvedores e desenvolvedoras é uma ótima forma de garantir a máxima eficiência e uma visual mais agradável para o seu site e/ou aplicação. Além é claro, de propiorcionar uma excelente experiência para os seus usuários.
Se tiver alguma dúvida, crítica ou sugestão, pode deixar aqui nos comentários. Abraços!