Saiba o que o Google está falando sobre responsividade

Com as constantes mudanças no mercado tecnológico, o Google busca sempre trazer atualizações adaptando-se às novas tendências, realizando mudanças de algoritmo e buscando novas formas de ranquear conteúdos com responsividade.

Conforme estudos apurados pelo Comitê Gestor da Internet no Brasil (CGI.br) de 2019, nos últimos anos houve um crescimento exponencial nos usuários de Internet via dispositivos móveis como smartphones e tablets. A partir dessa evolução, o Google buscou novamente adaptar-se para proporcionar a melhor experiência aos usuários.

Para entender mais sobre as adaptações do Google, precisamos entender o significado da responsividade nos dias de hoje.

O que significa “responsividade” para o Google?

‍

Responsividade significa “algo que reage ou responde de forma esperada, ou apropriada em determinada situação”. 

Aplicada à realidade que o Google procura, responsividade corresponde a uma abordagem de design web que faz as páginas web renderizem em diferentes tipos de dispositivos e resoluções de tela, ou seja, cria um design ou layout responsivo.

Principais características do atual conceito de responsividade

‍

O conceito atual de responsividade é basicamente orientado por dois pontos:

1. A responsividade é orientada pelo tamanho da janela de exibição do usuário, ou seja, pelo tamanho da tela do usuário, seja ela um tablet, smartphone, notebook ou monitores desktops.

2. Para aplicarmos essas regras de responsividade em nossas páginas web, precisamos utilizar alguns “breakpoints” em Media Queries no código no front-end. 

Literalmente falando, os breakpoints são pontos de interrupção que a interface usará como referência para adaptar-se à resolução de tela atual.

O novo responsivo, segundo o Google

‍

Em 2021, o Google anunciou que fez alterações em seu algoritmo de busca (Search Engine Optimization ou apenas SEO) para priorizar o que foi denominado como “O Novo Responsivo”. Esse novo conceito reinventou o que entendiamos por responsividade. 

Agora não basta apenas a página web ou aplicativo reagir responsivamente em diferentes resoluções. O novo responsivo vai além disso. Para o Google, responsividade não se trata apenas sobre resolução de tela, mas sim sobre um conjunto de novas experiências ao usuário.

Os três pilares do novo responsivo do Google são: preferências do usuário, container queries e form-factor.

1. Preferências do usuário

Desta vez, o foco está totalmente na experiência do usuário, em proporcionar ao usuário algumas interações como, por exemplo:

• Preferências no tamanho da fonte: o usuário deve ter a liberdade de aumentar ou diminuir o tamanho da fonte durante a navegação na página web.

• Adaptabilidade a temas dark/light: a página web deve adaptar-se às preferências de tema escuro ou claro do sistema operacional do usuário. 

Aqui vai um exemplo: se o sistema operacional do usuário estiver com as definições de cores para o tema escuro, automaticamente a página web deve adaptar a paleta de cores para tons escuros a fim de entregar uma melhor experiência do usuário.

Ao aplicar uma paleta de cores com tons escuros, evite cores saturadas e utilize tons mais claros para ter melhor legibilidade em interfaces com tema dark.

2. Container Queries (Componentes Responsivos)

Ao navegar em um site através do seu notebook, ele é renderizado para preencher toda a tela do notebook para que você tenha uma excelente experiência e consiga consumir da melhor forma as informações que estão sendo exibidas. 

Ao tentar abrir o mesmo site pelo navegador do seu celular, ele se adapta à resolução da tela do seu celular, que em comparação a tela do seu notebook, é bem menor.

Basicamente esse é o trabalho das Medias Queries, adaptar o layout de acordo com o tamanho da janela em que o site está sendo renderizado no dispositivo.

Diferente das Media Queries que utilizamos no atual conceito de responsividade, os Container Queries trazem a proposta de termos componentes individualmente responsivos, como, por exemplo, cards, botões, etc. 

Essa proposta eleva a responsividade a um novo nível, visto que os componentes não dependem mais da alteração da resolução da tela para serem responsivos, porém, essa funcionalidade só está disponível nos browsers Chrome versão 106 ou superior e para o Safari versão 16 ou superior.

Para habilitar e começar a experimentar o uso de Container Queries é necessário seguir esse passo a passo:

• Acesse a página chrome://flags;
• Pesquise por Container Queries;
• Habilite o recurso;
• Reinicie o navegador para que as alterações sejam aplicadas com sucesso.

3. Form Factor

O form factor traz a premissa de levar responsividade a telas dobráveis, flexíveis ou para abrangência de telas. Isso vai permitir uma nova experiência de navegação ao usuário final.

Por exemplo: tomemos um conjunto de monitores alinhados horizontalmente. No monitor A, pode-se exibir ao usuário determinados conteúdos como menus, notícias, etc. Já no monitor B, pode-se exibir uma sessão de artigos ou fotos deste site.

Por que começar a utilizar o novo conceito de responsividade?

‍

Ao começar a aplicar essas melhorias em seu site, sua página web estará melhor ranqueada no algoritmo do Google, trazendo mais visibilidade e claro, uma ótima experiência ao usuário final.

O novo responsivo traz ao mercado uma nova visão de responsividade e experiência do usuário. Em breve teremos mais ferramentas para criar designs responsivos muito além do permitido pela nossa responsividade atual. 

Apesar de muitas dessas ferramentas ainda estarem em fase inicial de implementação da web, como, por exemplo, os Container Queries, já podemos começar a aplicar gradativamente alguns conceitos, tal como as preferências de tema e fonte do usuário. 

Na construção de um layout responsivo, é preciso contar com uma gama de profissionais competentes no assunto, como, por exemplo, os UI/UX designers e desenvolvedores front-end. Conheça a diferença entre eles e como eles podem ajudar para uma melhor experiência web:

UI/UX x Front-end: qual a diferença?