Uma folha de referência para design móvel: design responsivo, veiculação dinâmica e sites móveis

Atualização do editor (julho de 2015): em abril de 2015, o Google fez uma atualização pré-anunciada no algoritmo que classifica os resultados de pesquisa em dispositivos móveis. A compatibilidade com dispositivos móveis de um site é um sinal de classificação confirmado para classificações de pesquisa em dispositivos móveis. Tome nota e torne seu site compatível com dispositivos móveis com a ajuda do artigo a seguir.

Todos nós já ouvimos as estatísticas: 2014 é o ano em que mais pessoas acessam a Internet em um smartphone do que em um computador ou laptop. O design móvel é o futuro. Você não quer que seu site fique para trás, mas como exatamente você programa para essa Internet cada vez mais móvel? Existem três opções principais, cada uma com suas próprias vantagens e desvantagens. Neste post, detalharei suas opções de preparação para dispositivos móveis, apresentando os prós e contras de cada uma para ajudá-lo a escolher o melhor caminho a seguir para o seu site e estratégia de SEO.

Opção 1: Design responsivo

O design responsivo determina a resolução da tela na qual uma página está sendo visualizada usando consultas de mídia e, em seguida, ajusta o tamanho e o layout da página adequadamente. O Google afirmou que prefere web design responsivo, o que o torna o peso pesado nesta discussão.

Prós :

1. Há apenas uma versão de cada página. A mesma página se adapta ao tipo de dispositivo que a exibe (em vez de detectar o tipo de dispositivo e fornecer conteúdo diferente com base nele). Ter o mesmo HTML e URL em todos os dispositivos simplifica a manutenção do seu site.
2. O design responsivo não depende da detecção do agente do usuário, como as outras duas opções. A detecção de agente do usuário (ou seja, detectar qual navegador ou dispositivo está solicitando uma página da Web) não é ruim em si, mas não é perfeita e, se houver uma falha no processo, os usuários podem receber a versão errada do seu site. Além disso, isso evita que os spiders dos mecanismos de pesquisa precisem rastrear seu site como vários agentes de usuário diferentes - o que significa que mais do seu site é rastreado.
3. O responsivo geralmente carrega mais rapidamente nos navegadores. Como todos os dispositivos obtêm o mesmo conteúdo, não há processo de redirecionamento possível de detecção de agente de usuário de solicitação. E quem já passou fome e procurou um bom restaurante no smartphone sabe, a velocidade conta.

Contras:

1. Pode ser um processo longo e intensivo redesenhar um site existente. Então, se você tem um site grande, mudar para responsivo pode não ser a melhor escolha.
2. Dependendo do layout do seu site, pode ser muito difícil colocar o conteúdo em uma tela de celular. Sites como o NYTimes.com mantêm sites móveis separados porque é mais fácil dividir o conteúdo do que colocá-lo em uma única página.
3. Os elementos de navegação nem sempre são redimensionados bem; elementos de passar o mouse não funcionam em uma tela sensível ao toque. Portanto, ser responsivo pode significar mudar sua navegação.
4. Houve casos em que páginas responsivas com muitas imagens foram carregadas mais lentamente com design responsivo. Devo salientar que esta não é a norma, mas aconteceu.

Se você optar pelo design responsivo, lembre-se de otimizar suas imagens e testar seu site em vários navegadores e dispositivos (ou usar um bom emulador de agente de usuário) antes de colocá-lo no ar.

Opção 2: veiculação dinâmica

Às vezes chamado de “sniffing” do agente do usuário, o serviço dinâmico pode ser feito de duas maneiras e é difícil de implementar. Na verdade, o Google descreve alguns erros comuns cometidos com a veiculação dinâmica. O que essa técnica faz é detectar o agente do usuário de um visitante (ou seja, qual dispositivo ele está usando para visualizar seu site) e, em seguida, redireciona no nível do servidor . Uma maneira de implementar a veiculação dinâmica é o redirecionamento unidirecional , em que os links para um site são padronizados para o site para computador, mas os dispositivos móveis são redirecionados do site para computador para o site para dispositivos móveis.

O segundo tipo, redirecionamento bidirecional , possui código nos sites para desktop e para dispositivos móveis, garantindo que qualquer visitante, independentemente do dispositivo, receba o conteúdo apropriado. (Esses pedaços de código às vezes são chamados de tags de painel de controle.) Implementação significa colocar uma tag rel=”alternate” no desktop, apontando para o site móvel; e, no site para celular, colocando uma tag rel=”canonical” apontando para o site para computador.

Prós:

1. Como o redirecionamento é feito no nível do servidor, você só precisa de uma URL por página.
2. O serviço dinâmico também funciona bem para telefones comuns . Conforme definido pela PCMag.com, um feature phone é um “celular que contém um conjunto fixo de funções além de chamadas de voz e mensagens de texto, mas não é tão extenso quanto um smartphone”. Por exemplo, os feature phones normalmente não podem baixar aplicativos, mas geralmente têm algum recurso de navegação na web. De acordo com o Google, a maior diferença é que os feature phones não podem processar CSS, então eles não podem lidar muito bem com o design responsivo. Portanto, é importante conhecer seu público e que tipo de dispositivos móveis eles estão usando.
3. Se você quiser ter um conjunto separado de palavras-chave especificamente para seus usuários de dispositivos móveis, essa opção permitirá que você faça isso, pois usuários de dispositivos móveis e usuários de computadores veem HTML distinto. (Search Engine Land tem um ótimo artigo que discute palavras-chave específicas para celular.)

Contras:

1. O redirecionamento dinâmico duplica o trabalho de manutenção do seu site porque configura um site separado para dispositivos móveis, com um conjunto separado de HTML indexado exigindo um projeto de SEO separado.
2. A lista necessária de strings de agente do usuário também requer manutenção constante, pois novas strings devem ser adicionadas sempre que um novo dispositivo móvel é lançado.
3. Por fim, lembre-se de que você precisará usar um cabeçalho “Vary HTTP-User Agents” se seu site veicular conteúdo dinamicamente. O cabeçalho ajuda o conteúdo a ser veiculado corretamente e ajuda os mecanismos a armazená-lo corretamente. O Google tem detalhes sobre como adicionar este cabeçalho.

Opção 3: um site móvel

Essa opção, como o nome indica, envolve a criação de um domínio separado especificamente para usuários móveis. Os exemplos mais comuns são m.domain.com ou mobile.domain.com . É uma opção popular para grandes varejistas; Bridget Randolph aponta que “73% dos sites classificados no Quantcast Top 100.000 sites usaram redirecionamentos de URL para um URL específico para celular”. Assim como o serviço dinâmico, essa técnica envolve o desenvolvimento de conteúdo específico para visitantes usando um dispositivo móvel; no entanto, os URLs de um site móvel separado são distintos, portanto, não há redirecionamento no nível do servidor.

Prós:

1. Para sites maiores com contagens de páginas na casa das centenas de milhares ou milhões, implementar o design responsivo pode ser simplesmente muito trabalhoso. Um site para celular permite que você personalize a experiência do usuário e crie lentamente uma experiência única para celular.
2. Assim como a veiculação dinâmica, um site para celular é melhor para feature phones do que um design responsivo. Dependendo da demografia do seu site, isso pode não ser um critério; mas para algumas empresas, é uma consideração importante.

Contras :

1. Seu site para celular não se beneficiará de nenhum perfil de backlink positivo que seu site para computador tenha criado (a menos que você implemente redirecionamentos bidirecionais). Portanto, se você deseja que seus usuários de dispositivos móveis o encontrem na pesquisa orgânica, isso pode ser um verdadeiro revés.
2. Seu site móvel exigirá algum trabalho extra de SEO. Você terá que enviar um Sitemap XML separado para o Google e Bing Webmaster Tools. Além disso, telas menores significam SERPs menores, então você pode precisar editar suas metatags. Metatags específicas para celular devem ser mais curtas do que as de um site para computador.

Como você pode ver, o conteúdo foi reformatado e reduzido drasticamente para torná-lo legível em um dispositivo móvel.

Ao analisar todas essas informações para fazer a escolha certa para seu site, não se esqueça de se perguntar quantos de seus visitantes estão usando dispositivos móveis para acessar o site. Verifique suas análises. Se a porcentagem total de tráfego móvel for inferior a cinco por cento, você provavelmente poderá esperar para implementar o design móvel. Por enquanto. Se as previsões estiverem corretas, o uso de dispositivos móveis continuará reivindicando cada vez mais tráfego da Internet.

Para obter informações sobre como otimizar suas páginas para velocidade e SEO móvel, recomendamos começar com estes recursos:

• A lista de verificação de SEO e design para dispositivos móveis tudo-em-um
• 7 práticas recomendadas de navegação otimizada para dispositivos móveis
• Guia de SEO: SEO para dispositivos móveis e otimização de UX
• Otimização de imagem: a coisa nº 1 que você pode fazer para melhorar o UX móvel
• Guia para celular do webmaster do Google Developers