Web design responsivo

O Web design responsivo é uma configuração em que o servidor sempre envia o mesmo código HTML a todos os dispositivos e o CSS é usado para alterar a renderização da página no dispositivo. Os algoritmos do Google deverão detectar essa configuração automaticamente se todos os user agents do Googlebot tiverem permissão para rastrear a página e os elementos dela, ou seja, CSS, JavaScript e imagens.

O design responsivo pode ser exibido em todos os dispositivos com o mesmo código que se ajusta ao tamanho da tela.

TL;DR (sigla em inglês para "muito longo, não li")

  • Use a tag meta name="viewport" para fazer com que o navegador ajuste o conteúdo.
  • Confira os Fundamentos da Web para mais documentação.

Como usar meta name="viewport"

Para sinalizar aos navegadores que a página se adaptará a todos os dispositivos, adicione uma metatag ao cabeçalho do documento:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A metatag viewport orienta o navegador sobre como ajustar as dimensões e a escala da página de acordo com a largura do dispositivo. Quando o elemento de metatag viewport está ausente, os navegadores de dispositivos móveis renderizam a página no modo padrão, com a largura de uma tela de computador (geralmente cerca de 980 pixels, com variações entre os dispositivos). Os navegadores de dispositivos móveis tentam melhorar a aparência da página aumentando o tamanho das fontes e redimensionando o conteúdo para caber na tela ou exibindo somente a parte do conteúdo que cabe nela.

Para os usuários, isso significa que os tamanhos das fontes podem ter uma aparência inconsistente e talvez seja necessário tocar duas vezes ou fazer o gesto de pinça para aplicar zoom a fim de visualizar e interagir com o conteúdo. Para o Google, talvez consideremos que a página não é compatível com dispositivos móveis por exigir esse tipo de interação em um dispositivo móvel.

À esquerda, temos uma página sem uma metatag viewport especificada. O navegador utiliza a largura de uma tela de computador e redimensiona a página para caber na tela, tornando o conteúdo difícil de ser lido. À direita, temos a mesma página com a metatag viewport especificada e correspondente à largura do dispositivo. Dessa forma, o navegador do dispositivo móvel não redimensiona a página e é possível ler o conteúdo.

Para imagens responsivas, inclua o elemento <picture>.

Como regra geral, caso seu site funcione em navegadores recentes, como o Google Chrome ou o Mobile Safari da Apple, ele funcionará com nossos algoritmos.

Por que usar o design responsivo

Recomendamos usar o Web design responsivo porque:

  • facilita o compartilhamento e a vinculação do conteúdo com um único URL para os usuários;
  • ajuda os algoritmos do Google a atribuir de maneira precisa propriedades de indexação à página, em vez de sinalizar a existência de páginas correspondentes para computadores ou dispositivos móveis;
  • exige menos tempo de engenharia para manter diversas páginas com o mesmo conteúdo;
  • reduz a possibilidade de erros comuns que afetam os sites para dispositivos móveis;
  • não exige redirecionamento para usuários que têm uma visualização otimizada para dispositivos, o que reduz o tempo de carregamento. Além disso, o redirecionamento com base em user agent é propenso a erros e pode reduzir a qualidade da experiência dos usuários do site. Para mais detalhes, veja a seção Erros ao detectar user agents;
  • economiza recursos quando o Googlebot rastreia seu site. Para páginas com Web design responsivo, um único user agent do Googlebot precisa rastrear a página somente uma vez em vez de vários user agents do Googlebot rastrearem a página diversas vezes para recuperar todas as versões do conteúdo. Essa melhoria na eficiência do rastreamento pode ajudar indiretamente o Google a indexar mais conteúdo do site e mantê-lo devidamente atualizado.

Caso você tenha interesse no Web design responsivo, primeiro leia nossa postagem do blog na Central do webmaster e acesse o site Fundamentos da Web.

JavaScript

Uma parte da criação de sites compatíveis com dispositivos móveis que exige bastante atenção é o uso de JavaScript para alterar a renderização e o comportamento do site em diferentes dispositivos. Situações típicas que envolvem JavaScript incluem decidir qual anúncio ou variante de resolução de imagem será exibido na página.

Esta seção descreve as diferentes abordagens do uso do JavaScript e como elas se relacionam com as recomendações do Google sobre o uso de Web design responsivo.

Configurações comuns

Veja aqui três implementações conhecidas de JavaScript para sites compatíveis com dispositivos móveis:

  • Adaptável ao JavaScript: nesta configuração, todos os dispositivos recebem o mesmo conteúdo de HTML, CSS e JavaScript. Quando o JavaScript for executado no dispositivo, a renderização ou o comportamento do site serão alterados. Se um site exigir JavaScript, essa será a configuração recomendada pelo Google.
  • Detecção combinada: nesta implementação, os recursos do dispositivo são detectados pelo JavaScript e pelo servidor. Assim, o site exibe conteúdos diferentes em dispositivos distintos.
  • JavaScript disponibilizado dinamicamente: nesta configuração, todos os dispositivos recebem o mesmo HTML, mas o JavaScript vem de um URL que disponibiliza dinamicamente diferentes códigos de JavaScript, dependendo do user agent do dispositivo.

Veja a seguir cada configuração em detalhes.

Adaptável ao JavaScript

Nesta configuração, um URL exibe o mesmo conteúdo (HTML, CSS, JavaScript, uma imagem) para todos os dispositivos. A renderização ou o comportamento do site serão alterados somente quando o JavaScript for executado no dispositivo. Isso se assemelha ao funcionamento do Web design responsivo, que usa consultas de mídia CSS.

Por exemplo, uma página envia a todos os dispositivos o mesmo HTML com um elemento <script>, que solicita um URL externo de disponibilização do JavaScript. Todos os dispositivos que solicitam o URL do JavaScript têm o mesmo código. Quando executado, o JavaScript detecta o dispositivo e decide alterar algo na página, por exemplo, incluir uma imagem compatível com smartphones ou adicionar código, em vez de usar as alternativas para computador.

Tal configuração está intimamente ligada ao Web design responsivo, e nossos algoritmos podem detectá-la automaticamente. Além disso, essa configuração não tem uma exigência para o cabeçalho HTTP Vary porque os URLs da página e os respectivos recursos não exibem o conteúdo dinamicamente. Devido a essas vantagens, essa será a configuração recomendada caso seu site demande o uso de JavaScript.

Detecção combinada

A detecção combinada é uma configuração em que o servidor trabalha em conjunto com o JavaScript no cliente para detectar os recursos do dispositivo e alterar o conteúdo a ser exibido.

Por exemplo, um site pode alterar a renderização do conteúdo de maneiras diferentes caso o dispositivo seja um computador ou smartphone. Nesse caso, o site pode incluir um JavaScript para detectar as dimensões da tela. Estas são enviadas para o servidor, que atualiza ou altera o código enviado ao dispositivo. Normalmente, o JavaScript armazena os recursos do dispositivo detectado em um cookie que o servidor lê em visitas subsequentes desse mesmo dispositivo.

Considerando que o servidor retorna códigos HTML distintos para user agents diferentes, a detecção combinada é considerada um tipo de configuração de exibição dinâmica. Os detalhes completos estão descritos na seção de exibição dinâmica. Em resumo, o site precisa incluir o cabeçalho HTTP responsivo "Vary: User-agent" quando for solicitado um URL que exiba um conteúdo em HTML distinto para diferentes user agents.

JavaScript disponibilizado dinamicamente

Nesta configuração, todos os dispositivos recebem o mesmo HTML com um elemento <script> para incluir um arquivo externo de JavaScript, que pode ter conteúdos diferentes de acordo com o user agent solicitante. Ou seja, o código JavaScript é disponibilizado dinamicamente.

Neste caso, é recomendável que o arquivo JavaScript seja disponibilizado com o cabeçalho HTTP "Vary: User-agent". Isso sinaliza para os caches de Internet e o Googlebot que o JavaScript pode ser diferente para user agents distintos, além de indicar para o Googlebot que ele deve rastrear o arquivo JavaScript usando user agents diferentes do Googlebot.