mantenha-se atualizado

Cadastre seu email para receber insights sobre estratégias digitais. Prometemos não enviar spam!


Cadastre seu email para receber insights sobre estratégias digitais. Prometemos não enviar spam!

O que é mobile first? Entenda no que ele difere do site responsivo

na categoria Marketing Digital 0 comentários
o que é mobile first

150. Esse é o número de vezes que uma pessoa olha para a tela do seu smartphone por dia. São em média 2 horas e 42 minutos reservados para o aparelhinho.

Se você possui um smartphone, números como esse não devem surpreender. Mas e se eu lhe disser que esse número só tende a aumentar? Um dado divulgado pelo IBGE em 2016 como parte da Pesquisa Nacional por Amostra de Domicílios (Pnad) apontou que os celulares são hoje o principal meio de acesso dos brasileiros à internet. Ele chega a ser o preferido de 80% da população. Apesar de as compras ainda serem mais concretizadas em desktop, todos os anos essa separação diminui intensamente.

Com dados como esse fica fácil entender por que em 2015 o Google anunciou que iria usar como um critério importante em seu ranking de resultados de pesquisa o fato de os sites terem uma boa experiência do usuário para aparelhos mobile. Buscar por sites responsivos se tornou ,então, a norma para todas as empresas com alguma presença digital.

Mas parece que apenas adaptar os tamanhos de imagens, textos e layouts de um site para diversas telas não é mais o suficiente. Agora a meta é ser mobile first.

Mobile first x site responsivo

Apesar de tanto a possibilidade mobile first quanto a de site responsivo trazerem bons resultados para o posicionamento do seu site em ferramentas de busca e uma visão interessante do conteúdo para o usuário, elas têm diferenças importantes.

A principal mudança de paradigma é a maneira como o site é pensado. Hoje, normalmente pensamos em um site primeiro no desktop e depois o adaptamos e todo o seu conteúdo para uma versão mobile. A proposta do mobile first é girar essa linha de produção e pensar primeiro nas telas de mobile e depois trabalhá-las para se moldarem às telas desktop.

Essa alteração que parece simples traz ganhos importantes especialmente na experiência do usuário, na performance e no que é priorizado em um site.

o que é mobile first

Um dos maiores benefícios dessa mudança é a redução no tempo de trabalho na criação do site. Isso porque um site já projetado para os dispositivos móveis (e não apenas adaptado) irá necessitar poucos ajustes quando for para telas maiores. Afinal, ele já foi pensado de forma minimalista, priorizando conteúdos e voltado para uma experiência mais rica e simplificada – o que é mais fácil adaptar. Ao passar para a versão desktop só será necessário expandir a experiência agregando mais elementos e informações.

Em termos de experiência do usuário, a maior mudança é que um conteúdo mobile first é também content first. Ou seja, ele prioriza o conteúdo e as informações do seu site em detrimento de artigos e ferramentas chamativas.

Pense bem: quando você tem uma janela menor para trabalhar tudo, você acaba focando no que é realmente importante. Em uma tela maior é mais fácil acomodar mais informações, dados, vídeos e links. Mas em sites pensados primeiro para mobile, é preciso eliminar informações de pouca relevância e se ater ao que realmente é relevante. Essa mudança altera também a hierarquia e a arquitetura das informações pensadas para cada modelo.

Além disso, sites pensados primeiramente para desktop (mesmo que responsivos para mobile) tendem a pensar muito no impacto visual de imagens e em como elas são responsáveis por agarrar a atenção dos visitantes. No entanto, eles pesam muito em dispositivos móveis, pois podem ter sido configuradas apenas “para não aparecer na versão mobile”. No entanto, esses javascripts continuam, em muitos casos, correndo em segundo plano e consumindo velocidade e tempo dos navegadores.

Outro ponto bastante diferente entre as duas é a maneira como a usabilidade é trabalhada. Menus, slides, vídeos e quaisquer outros plugins que precisem do flash são repensados de forma a ser a melhor possível para ser tocada e arrastada – não mais clicada com o mouse e escrita com o teclado.

Exemplo de um site mobile first para inspirar: WWL.ORG

O site da ONG WorldWildLife é um excelente exemplo de conteúdo pensado primeiro para mobile.

Em todos os momentos, o link para doar e adotar ficam marcados no topo da página. Mas no mobile ele não briga com o menu principal, uma vez que ele aparece apenas como aba e não como cabeçalho.

Além disso, todo o site é desenhado pensando em um fluxo linear de leitura, priorizando as informações mais importantes enquanto na versão desktop é dado mais destaque às imagens e aos espaços em branco.

o que é mobile first

o que é mobile first

o que é mobile first

o que é mobile first

cta-blog

Deixe um comentário

mantenha-se atualizado

Cadastre seu email para receber insights sobre estratégias digitais. Prometemos não enviar spam!


Cadastre seu email para receber insights sobre estratégias digitais. Prometemos não enviar spam!