Mobile First: design para sites do jeito certo

Tire suas dúvidas sobre mobile first e demais termos como mobile friendly, mobile only e o do Google, mobile-first indexing. Analise seu site e saiba o que fazer!

Por Fabio Lobo, atualizado em 08/09/2020. 4 pessoas falando sobre isso!

Ter um site responsivo – ou ao menos com uma versão mobile ou AMP – já é mais que uma obrigação há alguns anos. Mas os conceitos de Mobile First ainda são muito ignorados no web design, mesmo com os puxões de orelha do Google com o Mobile First Indexing.

Isso porque ter um site responsivo que se encaixa bem em telas pequenas não é o bastante.

Aliás, muita gente ainda não sabe o que é, de fato, o Mobile First. Com esse nome, convenhamos, é muito fácil confundir o significado. “Tem a ver com versão mobile?”

E a coisa fica ainda mais complicada quando juntamos outros termos, como Mobile Only e Mobile Friendly. E agora?

Calma! Eu explico. Nesse post você vai ler sobre:

  • O que é mobile first;
  • O que é mobile only;
  • O que é mobile friendly;
  • Design responsivo, adaptativo, versão mobile e AMP;
  • E respostas para dúvidas comuns.

Vamos lá!

ilustração de pessoas montando um site na tela de um smartphone gigante

O que é Mobile First?

Graças a mudanças no Google, que começou a priorizar as buscas em dispositivos móveis desde 2019, “Mobile First” é um tema que vem dominando a área de desenvolvimento e SEO. Mas afinal, o que é isso?

Todos aqueles que têm – ou pensam em ter – um site, blog ou loja virtual precisam conhecer, antes de tudo, um pouco mais sobre esse conceito de Mobile First.

Se você ainda não está familiarizado com o termo, tenha em mente duas coisas:

  • O pouco espaço disponível em telas dos dispositivos móveis;
  • e o fato de a internet ainda ser muito cara no Brasil.

O Mobile First (que pode ser traduzido como “primeiro o mobile”) consiste em pensar o design de um site para dispositivos móveis – smartphones, tablets e até mesmo smartwatches em alguns casos – antes de ver o projeto disposto em um notebook, PC ou Smart TV.

Esses últimos possuem telas grandes, capazes de propiciar uma experiência bem diferente e mais completa ao usuário, é verdade! Mas não são os equipamentos mais utilizados na maioria das vezes pela população do Brasil.

Longe disso.

A grande maioria das pessoas conseguiu se incluir digitalmente através de aparelhos de baixo custo. Elas precisam ser atendidas com um site que caiba em seus planos de dados e qualificações técnicas – mais limitadas – de seus dispositivos.

Por isso, planejar sites primeiro para telas menores e conexões menos velozes é essencial.

E se você ainda não se convenceu: para o Google isso é um fator de indexação!

Resumindo: A intenção do Mobile First é desenvolver o seu site de forma com que ele seja planejado primeiro para dispositivos mobile e só depois ajustá-lo ao computador e telas maiores.

Quando se pensa primeiro na versão desktop, muitos componentes precisam ser retirados para que o site possa funcionar bem numa tela pequena. Isso não causa uma boa experiência ao usuário.

Fazendo o caminho inverso (da tela menor para a maior), você consegue explorar melhor o tamanho de todas as telas.

O que significa mobile-first indexing?

Como comentei acima, o Google prioriza as buscas em dispositivos móveis.

Antigamente as buscas eram baseadas em resultados para desktop. Ou seja, o site nem precisava funcionar direito em dispositivos móveis que isso não iria fazer a menor diferença em sua indexação no Google.

Porém, com smartphones ultrapassando o uso dos desktops, a indexação também mudou. O buscador passou a pensar os resultados das pesquisas para quem faz as pesquisas por dispositivos móveis, mesmo que estejam em um desktop.

Ou seja: se o site é amigável para dispositivos móveis (é um site mobile friendly), bem otimizado, leve e com conteúdo completo, passou a ter mais relevância nas buscas que sites mal planejados (ou sem planejamento algum) para o mobile.

Resumindo: Mobile-first indexing quer dizer que o Google prioriza a versão do seu site que é visualizada através de dispositivos móveis (seja versão mobile, design responsivo ou AMP caso não exista uma das duas opções anteriores).

Na hora de rastrear seu site, o Google simula um smartphone, por exemplo. Então se sua página é mobile-friendly, você não tem com o que se preocupar.

Mas se seu site não for otimizado para dispositivos móveis, seu rankeamento estará comprometido tanto em telas pequenas (smartphones e tablets) quanto em telas grandes (laptops e desktops).

E o que quer dizer Mobile-friendly?

printscreen de tela de facilidade de uso em dispositivos móveis do search console
Se você utiliza o Google Search Console, certamente já viu essa tela.

Tem tudo a ver com usabilidade para dispositivos móveis. Isso porque Mobile First não é só sobre fazer as coisas caberem em uma tela pequena e pronto.

A utilização do touchscreen deve ser otimizada, já que a área de clique (toque, no caso) precisa ser maior e mais espaçada. Além disso, as informações devem ser passadas de maneira mais rápida e leve, com menor consumo de dados.

Essa visão de como pensar no produto de acordo com as atuais características do mercado começou a ser colocada em prática a partir de 2009, e foi elaborada por Luke Wroblewski no livro Mobile First.

Desde 2014 temos mais smartphones que seres humanos no planeta, inclusive. Um número tão avassalador não pode ser deixado de lado ao se pensar num projeto de sucesso.

Então, mobile-friendly é uma conclusão de tudo o que foi dito até agora por aqui. Toda essa preocupação com seu site ser amigável para mobile é porque o mundo já é dos dispositivos móveis.

Resumindo: Mobile friendly é uma página que apresenta facilidade de uso em dispositivos móveis.

Isso inclui espaçar adequadamente elementos clicáveis como links e botões, usar tamanhos de texto legíveis, fazer com que o conteúdo se adapte à largura da tela e outros conceitos e técnicas do design para mobile.

Como planejar um design mobile-friendly? Fácil: utilizando os conceitos do Mobile First. Assim seu site estará otimizado para o mobile-first indexing do Google.

Mobile Only: o futuro quase presente

Pra finalizar, Mobile Only significa exatamente o que o nome diz: planejar o design de um site para dispositivos móveis. Só!

Ousado? Olha, dependendo do projeto, nem tanto. Até porque Mobile Only não significa esquecer completamente as telas grandes de laptops e desktops.

Afinal, se você está em seu smartphone e acessar um site que não é responsivo nem tem versão mobile, vai ter um trabalho imenso para navegar nas páginas e ler o conteúdo.

Mas se você está em seu computador e acessa um site que foi planejado apenas para mobile, vai conseguir navegar e ler sem maiores dificuldades.

Veja como exemplo a ferramenta do SEMrush, que só tem versão para desktops – até porque é gigantesca, então nem imagino como seria uma versão para telas pequenas:

printscreen do SEMrush em um smartphone

A solução? Eles têm um app para isso. Nada de versão mobile ou um layout responsivo que nesse caso ficaria pesado e limitado.

Agora observe como a versão mobile do site Mega Curioso fica quando visualizada em um notebook:

printscreen do Mega Curioso em um notebook

Meio estranho, sim, mas totalmente navegável.

Aí vem a pergunta: vale a pena investir em um projeto Mobile Only?

Em alguns casos sim. Em outros, não. Mas como saber?

No meu site, a divisão de acessos segundo o Google Analytics é de 50% para desktops, 49% para smartphones e 1% para tablets. Além disso, preciso mostrar imagens grandes em meu portfolio e em alguns posts.

Então, não consigo visualizar um layout Mobile Only pra mim tão cedo.

Por outro lado, um de meus blogs, o Amo Vira Lata, tem expressivos 80% dos acessos vindos de smartphones, 9% de desktops e 1% para tablets. É um blog focado em conteúdo, não precisa de imagens grandes e as ferramentas podem ser utilizadas em telas pequenas.

Ou seja, valeria a pena investir em um layout Mobile Only agora mesmo.

Resumindo: Mobile Only é planejar um site pensando apenas em dispositivos móveis. É um futuro quase presente, tendo em vista que os acessos à internet via smartphone não param de crescer.

Um site Mobile Only funciona bem em notebooks e desktops. Então, dependendo das estatísticas de acessos, público, ferramentas e objetivos do site, vale a pena ter um layout assim.

Design responsivo, versão mobile ou AMP?

Agora que você já sabe tudo sobre design para mobile, certamente ainda está com uma dúvida na cabeça: qual dessas opções é a melhor?

A resposta curta é: design responsivo. É a opção que o Google recomenda e é a melhor forma de se colocar o Mobile First – ou o próprio Mobile Only – em prática.

A resposta certa é: depende do seu projeto.

Abaixo, vou analisar cada tipo: design responsivo, versão mobile e AMP. Assim você vai poder avaliar cada uma e decidir qual é a ideal para o seu site.

Site responsivo ou adaptativo

printscreen de dois sites: de um lado um responsivo, do outro um adaptativo

Design responsivo é um termo mais conhecido e usado que design adaptativo. São técnicas semelhantes, mas com diferenças que podem ser decisivas para o seu projeto.

O que é design responsivo?

O site responsivo se adapta a qualquer tamanho de tela, exibindo exatamente o mesmo conteúdo tanto em monitores grandes quanto em smartphones pequenos.

Uma coisa ou outra pode ser removida ou resumida para melhorar a navegação, mas normalmente o conteúdo é o mesmo.

Se você está utilizando um notebook ou desktop agora, redimensione a largura do seu navegador lentamente e veja como os elementos do meu site vão respondendo ao tamanho da tela.

É isso: design responsivo busca preencher completamente a tela conforme ela for reduzindo de tamanho.

O que é design adaptativo?

Sabe o que eu disse acima? Se aplica aqui também!

A diferença é o seguinte: enquanto o responsivo acompanha exatamente a largura do dispositivo, o design adaptativo tem uma medida fixa para cada resolução diferente.

No design adaptativo são trabalhadas estruturas de largura fixa para cada viewport mais relevante. Por exemplo: 1366px (desktop/laptop), 1024px (laptop/tablet), 768px (tablet/phablet), 480px e 320px (smartphone).

Ou seja, o site apresenta uma variação estrutural em cada uma dessas resoluções.

Logo, se alguém acessar um site com design adaptativo em um dispositivo com largura de 1280px, irá ver o design feito para resolução de 1024px (já que o de 1366px é maior). Se o dispositivo tiver 640px de largura, a versão exibida é a de 480px.

Enquanto o design responsivo preenche a tela, o design adaptativo tem medidas fixas menores que a tela do dispositivo que está sendo utilizado.

Qual é melhor: Design responsivo ou Design adaptativo?

responsivo x adaptativo
Responsivo x Adaptativo em um gif

Podemos dizer que o design responsivo é flexível (o que é bom, porque o usuário terá sempre a sensação de a tela estar totalmente preenchida) e o design adaptativo é mais restrito (o que é bom, porque o site sempre estará bem diagramado e alinhado).

Apesar dessa diferença, ambos tem a mesma finalidade: tornar o site acessível em diversas resoluções. Em ambos os casos, o design se adapta a tela. Em ambos os casos, o design responde a diferentes resoluções.

Qual é melhor? Depende do conteúdo e da estrutura do site.

Em relação à complexidade, o design responsivo é mais complexo por não trabalhar com medidas absolutas, e sim com porcentagens. Por outro lado, o design adaptativo acaba ficando um pouco mais pesado, pois o código é maior.

Na maioria dos casos, ambas as soluções podem ser utilizadas. Inclusive, o ideal é utilizar o melhor dos dois mundos no mesmo projeto.

Isso porque enquanto o design responsivo flui melhor e também é mais leve, algumas técnicas do design adaptativo garante que elementos não fiquem tão grandes na tela.

Meu site, por exemplo, é predominantemente responsivo. Porém, se você acessar a página inicial utilizando um tablet (ou um desktop e reduzir a largura do navegador), verá que os blocos de serviços, depoimentos e posts são adaptativos.

printscreen do meu site em um tablet

O visual ficaria carregado e a legibilidade comprometida se esses blocos se esticassem na tela. Assim, usando espaços em branco a meu favor, elaborei um design mais amigável para telas de tamanho intermediário.

Quando ter um site com design responsivo ou adaptativo?

Vantagens
  • Um só site, um só ambiente: Um site responsivo é flexível, cabe em diferentes resoluções. Isso não significa que você terá que atualizar um site diferente para cada resolução e/ou aparelho. Você faz tudo em um ambiente só!
  • O usuário vê o site completo: Por ser flexível e se adaptar a diferentes formatos de tela, o conteúdo vai se espalhando e se encaixando para se organizar.
  • Mais barato e rápido: Isso em comparação às outras opções, claro. Por ser um site só, você investe em um projeto só. Simples assim!
Desvantagens
  • Pode ficar muito pesado em dispositivos móveis: Se as principais páginas do seu site forem muito grandes, ele naturalmente já é mais pesado que o normal. Imagina em redes 4G ou 3G?
  • Pode limitar a “versão desktop”: Pensando em Mobile First, você pode acabar tendo um site limitado em desktops para que consigam acessar seu site em dispositivos móveis.
  • Pode prejudicar a publicidade: Alguns sistemas de anúncios e afiliados, como o Taboola, não são muito otimizados. E para serem responsivos, acabam ficando mais pesados ainda.
    E por mais que seu site seja bem feito e otimizado, esses anúncios vão acabar deixando tudo muito lento. Com isso, você pode perder posições no Google, o que resultará em menos visualizações – logo, menos ganhos.
Conclusão

Esse tipo de design é excelente em projetos que podem exibir o mesmo conteúdo para todos os dispositivos sem comprometer a usabilidade e velocidade do site.

Isso porque tudo o que é carregado em telas grandes vai ser carregado em telas pequenas também, mesmo que não apareçam. O código é o mesmo para todas as resoluções.

Se seu site precisar de muitas alterações entre mobile e desktop, talvez responsivo/adaptativo não seja a solução ideal, e sim uma versão mobile.

Versão mobile

printscreen da versão mobile de um site em um smartphone

O site com versão mobile tem uma versão específica apenas para dispositivos móveis.

Ou seja, é como se você estivesse acessando um site diferente (e tecnicamente está): no desktop ele aparece de uma forma, completo; no smartphone ele é mais resumido, com a navegação mais simples e direta.

Isso acontece porque quando você acessa um site assim de seu smartphone, ele identifica que um usuário está tentando acessá-lo de uma tela pequena, o que normalmente também significa que a conexão desse usuário não é muito veloz (4G, por exemplo).

Esses são dois motivos importantes para que uma versão mais leve e compacta do site seja exibida. Normalmente e-commerces grandes de varejo trabalham dessa forma, já que o site para desktop costuma ter uma estrutura e quantidade de conteúdo diferentes.

Quando ter um site com versão mobile?

Vantagens
  • Conteúdo específico para dispositivos móveis: De certa forma, você pode segmentar seu conteúdo para quem acessa seu site de dispositivos móveis, ou até mesmo trabalhar interações específicas para mobile.
  • Aplicativo: Em vez de um site mesmo, você pode ter um aplicativo ou transformar o próprio site em um app. Aí as possibilidades são (quase) infinitas!
  • Mais liberdade: No próprio design do site há mais liberdade, pois uma versão não depende da outra pra ficar bem diagramada e acessível como é no design responsivo. Quanto às mídias como vídeos e imagens, você pode trabalhar uma versão diferente para cada dispositivo.
Desvantagens
  • É mais caro: O site “oficial” é um e o mobile é outro, logo são dois projetos diferentes. E pode ser que você tenha que atualizar dois sites – um gestor de conteúdo para cada versão.
  • O Google não é fã: O buscador sempre recomenda que o site apresente a mesma versão de conteúdo para o usuário tanto em dispositivos móveis quanto em desktops. Ou seja, você pode acabar perdendo posições se criar uma versão mobile com conteúdo diferente.
  • Pode ser ruim para o usuário: Se seu público é acostumado a utilizar algumas funcionalidades da versão desktop de seu site e elas não estão disponíveis na versão mobile, isso será um problema. Muita gente vai preferir acessar a versão desktop mesmo usando smartphone, o que também não é legal.
Conclusão

O principal motivo eu citei acima: se seu site é muito grande, uma versão mobile seria pensada para os usuários que acessam seu site através de um dispositivo com tela pequena e conexão lenta.

Algo bem complicado de fazer, visto que em uma versão mobile o site perde várias funcionalidades. Pensando nisso, quais funcionalidades podem ser removidas sem atrapalhar a usabilidade do site?

Muitas vezes a versão mobile de um site acaba sendo um app, o que pode manter o usuário informado através de alertas, ou até utilizar outras funções do aparelho como a câmera e o celular. As possibilidades são quase infinitas, mas o Google não irá indexar o conteúdo do aplicativo, é claro.

Versão AMP

printscreen da versão AMP de um site em um smartphone

A versão AMP (sigla para Accelerated Mobile Pages, ou Páginas Aceleradas para Dispositivos Móveis) é um tipo de versão mobile, de certa forma.

De maneira resumida, é uma versão extremamente simplificada do site. Quando o Google lê a versão AMP do seu site, ele não só exibirá essa versão como padrão nas buscas, mas irá hospedar a página em seus servidores.

Assim, quando um visitante faz uma busca e clica em sua página AMP, o carregamento é quase instantâneo.

Por isso, normalmente o foco é no conteúdo que o Google indexa, ou seja: é opcional que páginas como a home, contato, categorias etc. tenham versão AMP.

Um site pode ter a versão AMP ativa para todos os usuários de dispositivos móveis, transformando-se, assim, em uma versão mobile oficial.

Ou você pode ir além: caso seu site seja simples o bastante para ser totalmente funcional como AMP, ele pode ser construído inteiramente com essa tecnologia.

Assim, todo o site será AMP e funcionará bem em todos os dispositivos.

Quando ter um site com versão AMP?

Vantagens
  • Alivia a carga do servidor: Como as páginas ficam armazenadas em servidores do Google, você acaba economizando recursos em seu servidor. Mas só para quem acessa seu site através de buscas em dispositivos móveis.
  • Melhor performance no Google News e Discover: Isso porque as ferramentas de notícias e feed do Google priorizam conteúdos com versão AMP.
  • Melhor otimização: Com AMP, as páginas ficam com o mínimo necessário para funcionar. Ou seja, menos códigos e maior otimização.
Desvantagens
  • Limitação de recursos: Nem todo código é suportado pela tecnologia AMP. Scripts de banners, por exemplo, precisam ter uma versão AMP também para funcionar. Demais opções, como slideshows e formulários, ficam restritas ao que o framework AMP oferece.
  • Ganhos abaixo do normal: Todos os meus clientes dizem a mesma coisa – AMP rende bem menos com anunciantes. Em meus testes, também tive a mesma conclusão.
  • Mais cliques para o usuário: Pelas limitações que comentei acima, seu visitante pode acabar tendo que abrir mais páginas que o normal. Por exemplo, pra fazer um comentário em um post, terá que abrir a versão não-AMP pra ver o formulário.
Conclusão

Hoje em dia só indico AMP para clientes que trabalham com Google News e Google Discover, e também para quem tem um site pesado e está sem verba para uma nova versão.

De resto, se você tiver um site bem feito, AMP é totalmente desnecessário.

Por exemplo, meus posts têm versão AMP. Só que o Google não exibe a maioria dos posts como não-AMP nos resultados da pesquisa.

Por quê? Porque meus posts estão mais rápidos e otimizados do que a versão AMP que o Google hospeda.

Mas como eu utilizo o Google News, não deixo de ter essa opção para meus posts.

Conclusão final: depende

printscreen de diferentes sites em diferentes dispositivos

Design responsivo, versão mobile ou AMP? Depende.

O design responsivo ou adaptativo é bom para sites que não têm alguma funcionalidade que só pode ser utilizada em telas grandes. Se você pode ter o mesmo site em telas pequenas e grandes, é a escolha certa.

A versão mobile é boa para portais, e-commerces e sites que têm alguns sistemas, funcionalidades específicas ou até mesmo páginas grandes que não podem funcionar da mesma forma em desktops e smartphones.

Com a versão mobile você fica mais livre para trabalhar um site mais completo para desktops, já que para smartphones aparecerá uma versão mais reduzida.

O conteúdo no design responsivo é mais fácil de ser trabalhado para se adaptar às diferentes resoluções. Sendo assim, nenhuma informação será perdida ou limitada.

Também é possível ter um site extremamente leve com design responsivo utilizando o conceito Mobile First, ou seja: planejando seu site primeiro para telas menores e depois para telas maiores.

Já AMP, que pode ser tanto uma opção a mais (utilizada com uma das opções acima) ou definitiva (substituindo ambas as opções), tem diversas limitações e vantagens também.

Para quem tem um site no Google News e quer aparecer mais no Google Discover, trabalhar com AMP é essencial. Fora isso, um projeto bem pensado com Mobile First é o suficiente.

Por isso, repito: a melhor opção vai depender, e muito, do seu projeto. Espero que esse texto te ajude a fazer a escolha ideal!

Créditos das imagens: Freepik e sites citados.

Revisão

Entendeu tudo sobre design para mobile? Tire suas dúvidas abaixo!

Mobile Only vale a pena?

Mobile Only é pensar o design do seu site apenas para dispositivos móveis, como smartphones e tablets. Então, se seu site recebe a grande maioria dos acessos através de smartphones e pode ser totalmente utilizado através de telas pequenas sem nenhuma dificuldade ou limitação, vale a pena investir em Mobile Only.

AMP é obrigatório para aparecer no Google News ou Discover?

Páginas e posts com versão AMP são priorizadas nas plataformas Google Notícias e Google Discover. Mas não é obrigatório. Seu site pode ser listado em ambos se for otimizado e com conteúdo bem feito.

Design responsivo é pesado?

Um site com Web Design Responsivo só é pesado se for mal planejado. Seguindo as recomendações do Mobile First, o site responsivo vai ser leve e otimizado. Já um site com design adaptativo costuma ser mais pesado em comparação a um com design responsivo.

Como saber se meu site é mobile friendly?

Para testar se seu site é mobile-friendly, ou seja, amigável para dispositivos móveis, basta utilizar a ferramenta Google Search Console. Veja o relatório de Facilidade de uso em dispositivos móveis. Se houver erros, corrija-os!

Por que a versão AMP do meu site não aparece no Google?

Primeiro, verifique no Google Search Console se não há nenhum problema ou aviso com o AMP em seu site. Se estiver tudo em ordem, pode ser que o Google ainda não indexou sua versão AMP, ou então suas páginas normais estão melhor otimizadas.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

Principais conceitos de Web Design e Desenvolvimento

Você sabe o que é pregnância da forma, leiturabilidade e escaneabilidade? Conheça conceitos de web design que fazem muita diferença na criação de sites e apps.

Acelerar WordPress: dicas para carregamento rápido

Deixar o WordPress veloz requer uma otimização bem específica – e bem feita. Veja essas dicas para acelerar o WordPress e reduzir seu tempo de carregamento!

AMP – Accelerated Mobile Pages: o que é e quando usar

Conheça o AMP: limitações, prós, contras, Google Notícias e Web Stories. Veja como instalar no WordPress e aprenda a testar a velocidade real de uma página acelerada.

Comentários

4 comentários até o momento

  • Os sites que você desenvolve são responsivo, Fabio?

    Responder
    • São sim, Nando! Inclusive o meu site também é :D

      Responder
  • Fabio, qual é o melhor plugin de AMP para WordPress?? Tenho um site no google Notícias e não sabia que com AMP era melhor !

    Responder
    • Recomendo o plugin “oficial” do WordPress. Os outros são pesados e têm alguns bugs chatos.

      Responder

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento