Design Mobile-First – O que é e por que é importante

O outono de 2018 foi um período difícil para profissionais de marketing online, blogueiros, agências digitais… basicamente para todos cujo pão com manteiga vem do reino online. Por quê? Porque foi quando o gigante dos mecanismos de busca, o Google, começou a lançar sua indexação mobile-first. Isso certamente não foi uma surpresa, já que o “Mobilegeddon" em 2015 já introduziu a priorização de sites que exibem bem em dispositivos móveis. O design mobile-first já era uma coisa, mas o Google ainda conseguiu causar algum pânico.

Mas vamos dar um passo atrás por um momento e ver o que realmente significa “mobile-first”.

Explicação do design mobile-First

Em suma, o design mobile-first é o tipo de design que prioriza os dispositivos móveis. Em geral, isso inclui smartphones e tablets ou qualquer dispositivo com tela menor. Para entender bem esse conceito, primeiro precisamos falar sobre web design responsivo ou RWB. No RWB, basicamente permitimos que a web e todas as suas formas e conteúdos caibam em telas menores sem perder qualidade. Também precisa ser feito de uma maneira que as pessoas achem conveniente ou confortável. Quando feito corretamente, o design responsivo significa que o usuário não precisa ampliar, rolar ou deslocar a tela para visualizar todo o conteúdo do site.

Obviamente, com o grau em que as pesquisas móveis ultrapassaram as de desktop, é natural que um site seja responsivo. Não é nem mesmo uma questão de sobrevivência do mais apto. É mais simples do que isso. Se o seu site não é responsivo, ele pode ser inexistente. As pessoas não têm tempo ou paciência para sites não responsivos.

Mas há mais aqui do que apenas capacidade de resposta. Ao desenvolver um produto, os designers costumavam usar a versão desktop como ponto de partida. Então, depois de finalizar essa versão em particular, eles basicamente descartaram certos elementos para otimizar o produto para dispositivos móveis.

Hoje, o processo é diferente. O “avanço progressivo” é um princípio amplamente empregado no design, que toma a versão móvel como ponto de partida. E é exatamente isso que significa “mobile-first”. O design começa do lado móvel e depois se expande gradualmente para versões mais avançadas.

Indexação Mobile-First

Como mencionamos anteriormente, em 2018 o Google iniciou uma nova maneira de indexar os sites. A indexação é importante porque é um dos mecanismos que o Google usa para decidir o quão alto seu site será classificado nas páginas de resultados dos mecanismos de pesquisa.

Então, basicamente, a indexação mobile-first significa que quando o Google implanta seus crawlbots, eles vão primeiro procurar a versão mobile do seu site e depois a versão desktop. Observe que a versão móvel não é a única que é indexada e classificada. Sua versão para desktop também é levada em consideração, mas somente após a versão móvel. Se o seu site não tiver uma versão para celular, isso terá um impacto negativo significativo na classificação do seu site. Não apenas isso. A qualidade da experiência móvel que seu site oferece também é um fator importante.

E é por isso que o mobile-first deve ser levado muito, muito a sério por qualquer proprietário de site.

Como otimizar para dispositivos móveis

Então você conseguiu um tema responsivo legal? Bom. A capacidade de resposta é extremamente importante. Mas não pense nem por um segundo que seu trabalho de otimização para mobile-first termina aí. É mais complicado do que isso.

Esteja você fazendo uma limpeza de primavera no seu site WordPress antigo ou criando um novo, há coisas que você pode fazer para torná-lo mais atraente para os rastreadores do Google e a indexação mobile-first.

• Otimize a velocidade do seu site

O Google odeia sites lentos. Não mesmo. Ele tem um viés particular em relação a sites que demoram a carregar. Desde o verão de 2018, o Google está priorizando oficialmente sites rápidos, então isso é definitivamente algo para se pensar.

Mesmo que seu site esteja um pouco lento, não se preocupe. Há muitas coisas que você pode fazer para acelerá-lo. Por exemplo, você pode usar um dos excelentes plugins de cache que criam uma versão pronta para HTML do seu site para que ele carregue mais rápido. Você também pode compactar todos os seus arquivos para que eles sejam carregados no tamanho mais baixo e leve possível. Por fim, reserve um tempo para percorrer seu site e procurar erros técnicos, como links quebrados, páginas excessivamente saturadas e assim por diante.

Quando se trata de Search Engine Optimization (SEO), supondo que você já esteja aplicando todas as melhores práticas no campo, há algumas coisas adicionais a serem lembradas.

Por um lado, você precisa garantir a paridade de conteúdo entre as versões do seu site. Isso se aplica particularmente a links internos, dados estruturados, tags e outros. Além disso, verifique se seus servidores podem lidar com a taxa de rastreamento. Isso costumava ser um problema quando a indexação mobile-first foi lançada pela primeira vez, mas um número surpreendente de sites ainda não se adaptou à nova atividade de rastreamento.

Por fim, monitore seu status de indexação regularmente e verifique se o robots.txt está validado e se os arquivos de log do servidor estão em ordem.

• Opte por um framework responsivo

Sim, dissemos anteriormente que usar um tema responsivo, construído em uma estrutura responsiva, não é suficiente para uma otimização adequada para dispositivos móveis. Mas continua sendo um dos fatores essenciais, por isso achamos que deveríamos reiterar.

Bootstrap e Foundation são atualmente os mais populares e sem dúvida os melhores frameworks responsivos, então opte por um tema usando um deles. Eles são ideais para traduzir o design do seu site em telas menores com um risco mínimo de falhas e bugs. Além disso, eles fazem isso no nível de front-end e back-end, reduzindo consideravelmente a carga de trabalho do desenvolvedor.

• Otimize sua navegação, conteúdo e interação

Encontrar o equilíbrio perfeito entre conteúdo insuficiente e conteúdo demais é a doença comum de todos os sites para dispositivos móveis. No entanto, é uma batalha que só precisamos continuar lutando. Os visitantes precisam de informação, e precisam que ela seja apresentada de forma clara e simples. A desordem é inaceitável. Organize seu conteúdo para que você possa dizer o que tem a dizer, criar estratégias para seus apelos à ação e nada mais.

Além disso, considere a navegação do seu site. Se for muito complicado, simplesmente não funcionará para dispositivos móveis.

Em seguida, se a barra de navegação no desktop for longa, você precisará reduzi-la na versão móvel. Considere aumentar seu texto e transformar seus links em botões fáceis de tocar.

Por fim, veja se seus layouts estão otimizados adequadamente para ações manuais comuns, como tocar e deslizar.

Este é um passo bastante lógico, mas não vai doer enfatizá-lo mais uma vez. Você sempre precisa verificar e testar tudo em seu site. Mesmo que você não tenha feito nenhuma alteração recentemente, considere fazer um teste ocasional apenas para ver se tudo está funcionando bem.

Atualmente, a maioria das pessoas usa navegadores modernos ou otimizados para dispositivos móveis. No entanto, uma porcentagem surpreendente de usuários da Internet ainda usa versões mais antigas de navegadores, e você também precisa pensar sobre elas. Você quer que seu site pareça tão bom em um iPhone 4s antigo quanto no novo Huawei P20.

Basta testar o design do seu site quanto à capacidade de resposta e não se esqueça do teste A/B, especialmente para suas páginas de destino. Claro, antes de tudo, personalize a versão mobile do seu site e prepare-a para os usuários.

Mobile-first é uma tendência que vai durar por um tempo, e essa é a realidade que todos nós temos que aceitar. Por "nós", queremos dizer todos os envolvidos na criação e execução de um site. Designers, desenvolvedores, administradores, especialistas em SEO, editores, redatores – todos precisam se lembrar de priorizar o mobile. Claro, isso não quer dizer que devemos negligenciar as versões para desktop. É só que o design mobile-first precisa ser levado a sério.

Esperamos que você tenha achado este artigo útil. Se você gostou, não deixe de conferir alguns desses artigos também!