Kristina Kledzik escreveu recentemente um artigo sobre design responsivo e porque ele é, muitas vezes, a melhor opção ao criar uma experiência mobile amigável online. Ela discutiu suas vantagens em lidar com questões de usabilidade, conteúdo duplicado, rankings de busca móveis e link building. O Google recomenda o uso de um design  responsivo onde isso faz sentido do ponto de vista do usuário, e o Bing incentiva uma abordagem “uma URL por item de conteúdo“.

Kristina apresenta um argumento convincente para o design responsivo. No entanto, os sites responsivos podem ser complicados para desenvolver, especialmente se a versão desktop original tem muito conteúdo e/ou de opções de navegação. Se você tem uma empresa ou um cliente cujo site tem centenas de milhares, ou mesmo milhões de páginas, pode ser difícil redesenhar todo o site com um design responsivo. Um site móvel separado, no entanto, pode começar com menos páginas, e você pode adicionar mais conforme tiver tempo. Para algumas empresas, o design responsivo simplesmente não é a melhor opção porque as necessidades de seus visitantes móveis são muito diferentes das dos usuários de desktop, e, portanto, exigem conteúdo drasticamente diferente. Portanto, não podemos contar sempre com os conselhos de que o design responsivo seja a solução preferida.

Aleyda Solis criou este fluxograma recentemente para ilustrar o processo de tomada de decisão para a escolha de uma opção de mobile amigável. Destaquei abaixo a opção “versões separadas de URL”, que Aleyda recomenda para quando “você não pode implementar uma única URL/design responsivo.

Se o seu site (ou o do seu cliente) enquadra nessa categoria “versões separadas de URL”, você está em boa companhia. Entre os melhores 20 varejistas do Reino Unido, apenas 14 têm sites mobile amigáveis​, e 13 deles têm sites móveis separados. O padrão é semelhante nos EUA, com MongooseMetrics relatando que 73% dos sites classificados no Quantcast Top 100 mil sites usaram redirecionamento de URL para uma URL móvel específica.

Aqui estão alguns exemplos de abordagens diferentes de grandes varejistas para celular:

A Apple não tem qualquer tipo de site móvel; o Ebay usa uma URL separada do site móvel; e Currys usa um design responsivo.

A boa notícia é que os sites móveis, quando feitos corretamente, são certamente capazes de lidar com os mesmos problemas de usabilidade, conteúdo duplicado, ranking de busca móvel e link building.

Então, como você otimiza um site móvel para funcionar, bem como implementar de um projeto responsivo? Você deve fazer a si mesmo algumas perguntas antes de alcançar seu objetivo final.

Arquitetura da informação

Quando você está apenas começando, a primeira coisa em que precisa pensar é na arquitetura da informação. Um dos benefícios de um site mobile (sobre um design puramente responsivo) é que você pode fornecer ao usuário uma experiência drasticamente diferente da versão desktop. Primeiro você precisa fazer algumas perguntas:

1. Será que o seu site móvel reflete a intenção dos usuários mobile?

Ao estruturar um site móvel, uma das primeiras coisas a se perguntar é se os visitantes mobile estão interagindo com seu site de forma diferente dos usuários de desktop. Se assim for, o design do site móvel precisa refletir isso.

Se você não tem certeza de como os usuários estão interagindo com seu site, dê uma olhada nas suas análises e segmente o tráfego móvel. O Google Analytics já tem “segmentos avançados” para tráfego de celular e de tablet. O segmento mobile inclui o tráfego de tablets, então você pode precisar criar um segmento personalizado, a fim de ver apenas o tráfego móvel não proveniente de tablets.

Isso pode ser um pouco complicado, pois você vai precisar usar uma expressão regular (‘RegEx’). A configuração que estou usando é:

• Name: ‘Mobile – no tablets
• Include: ‘Mobile (Including Tablet)’ containing ‘Yes’ AND
• Exclude: ‘Screen Resolution’ Matching RegExp (1\d|[7-9])\d\d+x.*

O que essa expressão regular significa é que esse segmento personalizado deve incluir o tráfego de dispositivos móveis, mas excluir o tráfego de dispositivos com uma resolução de tela de 700+ por nada. Você pode decidir ajustar o RegEx dependendo do quão grande (ou pequeno) é um dispositivo que você deseja incluir. (Alguns dos maiores smartphones também caem nesse intervalo, mas, novamente, talvez estes devam ver a versão desktop, também.)

Uma vez que você tem os dados, tenha foco nas landing pages (as pessoas estão entrando no seu site no lugar certo?), naa taxa de conversão, e onde as pessoas saem do funil de conversão (onde estão ficando presas?); bounce rate (as pessoas não estão encontrando o que procuram?); e, se possível, local de pesquisa e palavras-chave de busca orgânica (pra começar: o que as pessoas estão procurando?). Se você tiver analytics configurado para o seu site móvel, você deve usar esses dados para ver quais páginas de sites móveis estão tendo um desempenho acima ou abaixo da média. Para uma visão detalhada do que procurar, ver Seção 3.1 neste excelente artigo por Aleyda Solis.

2. Você fez o design para o usuário?

Depois de entender os objetivos de seus usuários, você deve fazer o design do seu site para refletir as razões mais comuns para visitar o site em um dispositivo móvel. Um exemplo óbvio disso é usar um telefone celular para encontrar um site de uma loja perto de você. Esse recurso pode ser menos proeminente no site desktop, mas, para um usuário móvel, tem que ser muito fácil de encontrar na página inicial.

Você também pode aproveitar recursos específicos para celulares para melhorar a experiência do usuário. Usando o mesmo exemplo, você poderia oferecer a opção de pesquisa de loja por código postal, mas também por geolocalização (“utilizar a localização atual”). Quando os resultados da “loja mais próxima” aparecem, inclua um número de telefone que é “clicar para ligar”.

(Imagens de m.primelocation.com)

3. E os usuários de tablet?

A recomendação atual do Google é servir tablets no site desktop, em vez de no site móvel. Isso porque os padrões de navegação do usuário e o tamanho de tela de um tablet de tamanho normal como o iPad se assemelham mais à navegação desktop do que à navegação no smartphone. Além disso, um site que fica bem em um navegador pequeno do smartphone vai aparecer muito grande e irritantemente granulado na tela bem maior do tablet. Certifique-se de testar as capacidades touchscreen do seu site desktop.

Uma exceção à diretriz atual seria se você deseja fornecer uma experiência online específica para tablet, caso em que você pode decidir usar um terceiro subdomínio (t.domain.com). Conforme o tamanho dos tablets torna-se mais variado, essa orientação pode mudar.

Vamos verificar alguns exemplos de domínios específicos para tablet:

Exemplo um: Colbert Nation é o site oficial para a Comedy Central show, The Colbert Report.

Exemplo dois: Mail Tribune é um editor de notícias.

É importante certificar-se que seus visitantes móveis estejam sendo servidos com a versão correta do seu site. Meu melhor conselho é usar redirecionamentos com base em agente do usuário. Se você não estiver redirecionando com base em agente de usuário, você deve configurar redirecionamentos baseados na detecção do agente do usuário, de modo que quando alguém visite o site de desktop em um celular, seja redirecionado para a versão mobile. Se possível, use redirecionamentos do lado do servidor (301s ou 302s) em vez de redirecionamentos Javascript; JS provoca um atraso no tempo de carregamento (porque a página tem que carregar e, em seguida, analisá-lo), e uma página com um redirecionamento JavaScript é menos provável de ser armazenada em cache. Além disso, certifique-se de que, se alguém em um PC desktop clicar em um link móvel, seja redirecionado para a versão desktop.

Algumas dicas rápidas para lidar com redirecionamentos para o site mobile:

• Estados mais recentes do Google orientam que tanto 301 quanto 302 podem ser usados.
• Ao usar a detecção de agente do usuário, tenha cuidado com camuflagem.
• Não redirecione todas as páginas desktop para a página inicial móvel, em vez disso, use uma página móvel que seja relevante para a original. Se você não tem uma página relevante móvel, considere a criação de uma página que explique isso e ofereça a opção de ver a versão desktop da página desejada e/ou páginas alternativas no site mobile.
• Certifique-se de incluir um link para “ver versão desktop” em seu site mobile (e vice-versa). Use cookies para garantir que, se um usuário clicar sobre essa opção, a detecção do agente do usuário será substituída, e não ser redirecionada novamente (a menos que decidam voltar através da opção “ ver versão mobile”).
• Tente usar estruturas de URL “espelhadas” (de modo que www.domain.com/hello redirecione para m.domain.com/hello, e não para m.domain.com/xi3l3kxd. Isso pode não ser possível, no entanto, se não houver uma relação um a um entre as páginas de desktop e móvel.
• Para mais informações sobre redirecionamentos de sites móveis, consulte o artigo de Cindy Krum sobre “gerar redirecionamentos móveis corretamente”.
• Para evitar o aparecimento de conteúdo duplicado, você deve usar uma tag mobile especial rel = “canônica”. Isso será abordado em mais detalhes posteriormente

Na segunda parte deste artigo, veremos sobre Google Analytics, SEO e otimização.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.seomoz.org/blog/how-to-optimize-a-mobile-site