Web design responsivo

O Web design responsivo (RWD, na sigla em inglês) é uma configuração na qual o servidor sempre envia o mesmo código HTML a todos os dispositivos, e o CSS é usado para alterar o processamento 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 seus elementos (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 ("muito longo, não li", na sigla em inglês)

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

Como usar meta name="viewport"

Para sinalizar aos navegadores que sua 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 tag da janela de visualização meta 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 da janela de visualização meta está ausente, os navegadores de dispositivos móveis processam a página no modo padrão, com a largura de uma tela de computador (geralmente cerca de 980 px, com variações entre os dispositivos). Os navegadores de dispositivos móveis tentam melhorar a aparência do conteúdo 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 janela de visualização meta 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 uma janela de visualização 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 possuem 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 do usuário 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 sua 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 melhora na eficiência do rastreamento pode ajudar indiretamente o Google a indexar mais o conteúdo do seu site e mantê-lo devidamente atualizado.

Caso você esteja interessado 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 o processamento 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á exibida na página.

Esta seção descreve as diferentes abordagens do uso de JavaScript e de 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 bastante usadas 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 website exige JavaScript, essa é a configuração recomendada pelo Google.
  • Detecção combinada: nesta implementação, o site usa JavaScript e a detecção do servidor dos recursos de dispositivo para publicar conteúdos diferentes em diferentes dispositivos.
  • JavaScript exibido dinamicamente: nesta configuração, todos os dispositivos exibem o mesmo HTML, mas o JavaScript é exibido de um URL que exibe diferentes códigos de JavaScript, dependendo do user agent do dispositivo.

Observaremos cada uma dessas configurações detalhadamente.

Adaptável ao JavaScript

Nesta configuração, um URL publica 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 publicaçã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 um código de anúncio ou uma imagem compatível com smartphones, 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 seus 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 na qual o servidor trabalha em conjunto com o JavaScript no cliente para detectar as capacidades do dispositivo e alterar o conteúdo a ser exibido.

Por exemplo, um site pode alterar o processamento do conteúdo de maneiras diferentes caso o dispositivo seja 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, podemos dizer que o website deve incluir o cabeçalho HTTP responsivo “Vary: User-agent” quando for solicitado um URL que exiba um conteúdo de HTML distinto para diferentes usuários.

JavaScript exibido 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 é exibido dinamicamente.

Nesse caso, recomendamos que o arquivo JavaScript seja exibido 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 sinalizar para o Googlebot que ele deve rastrear o arquivo JavaScript usando user agents diferentes do Googlebot.