Este ano a pergunta mudou. Em vez de “será que devo fazer um site mobile?”, você deve questionar “como eu faço um bom site mobile?”. Apesar de ser essencialmente um site, a versão para telas pequenas deve ser redesenhada e linkada para seu site desktop, e isso te dá muito o que pensar.

Eu fiz uma lista de a) aspectos de sites mobile que geralmente são ruins, mas apesar disso poucos se preocupam; e b) opções de otimização que muitos deixam passar. Eu coloquei links para mais informações, quando necessário, então você terá algumas opiniões de pessoas mais inteligentes do que eu, em mais detalhes.

Conectando as versões mobile e desktop do seu site

– Cheque seus redirecionamentos

• Seus redirecionamentos estão programados para levar os visitantes para a página específica que eles querem ver, não para a sua home?
• Os visitantes mobile são redirecionados para a versão mobile?
• Os usuários em um desktop são levados para o seu site desktop?

– Permita que os visitantes mobile vejam a versão desktop

• Essa opção é fácil de encontrar?
• Se o usuário escolher visualizar a versão desktop, ele vai continuar nessa versão durante toda a navegação? Ou os redirecionamentos o levam de volta para a versão mobile cada vez que eles clicam em uma página?

– Sites com servidor dinâmico – cheque o Vary-HTTP header

• Você fez o set up de um Vary-HTTP header para avisar ao Google e aos navegadores que você varia o HTML de acordo com o user agent?

– URLs separadas: cheque rel=alternate/canonical tags

• As páginas desktop possuem a tag rel=”alternate” apontando para a respectiva versão mobile?
  • No header, adicione: <link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.domain.com” />
• As páginas mobile possuem a tag rel=”canonical” tag apontando para a respectiva versão desktop?
  • No header, adicione: <link rel=”canonical” href=”http://www.domain.com” />

Questões técnicas

– Use o Google Webmaster Tools para ver se o Google está tendo problemas em realizar o crawling do site mobile

• Veja Crawl > Crawl Errors e escolha a aba Smartphone. Você verá apenas URLs que estão com problemas para o crawling na versão mobile, mas não na versão desktop:

(Temos um erro 🙁 )

• Google vai retornar as páginas que não estão com problemas para fazer o crawling.

– Cheque/adicione o sitemap XML do mobile

• Todas as páginas mobile foram submetidas ao Google via um sitemap XML no Google Webmaster Tools?
• Mantenha as páginas mobile separadas das versões desktop; o Google Webmaster Tools fará reports do número de páginas indexadas por sitemaps separados. Se você mantiver os dois em separado, poderá ver se o número de páginas mobile indexadas é menor que o número de páginas desktop.

– Faça o review do site mobile da mesma forma que você faria com qualquer outro site

• Este Checklist para Auditoria Técnica de um site do Geoff Kenyon é um ótimo início.

– Verifique a velocidade do site em dispositivos móveis

• O Google tem uma ótima ferramenta para verificar a velocidade de um site que oferece uma lista de recomendações com base no crawl do seu site.
• Este passo é mais importante aqui do que na otimização da versão desktop, já que os aparelhos móveis possuem menos poder computacional, e códigos ou imagens pesados vão gerar uma experiência muito lenta para o usuário.

– Use redirecionamentos no server-side

• Eles geralmente são mais rápidos, já que não precisam utilizar a potência baixa do celular.
• Em sites mobile, redirecionamentos 301 e 302 enviam a mesma mensagem para os mecanismos de buscas, então você pode utilizar qualquer um, mas o Google recomenda o 302 sempre que possível.

Design

– Visualize o site em uma variedade de dispositivos móveis

• A visualização fica boa em muitos aparelhos celulares?
  • Verifique os principais celulares do mercado. Bons exemplos são iPhone (iOS), Samsung Galaxy S4 (Android), Nexus 5 (outro Android), e Nokia Lumia 520 (Windows).
  • Verifique os principais smartphones utilizados pelos seus usuários, de acordo com o seu web analytics.
• A visualização fica boa em muitos tablets?
  • Verifique os principais tablets do mercado. Bons exemplos são iPad (iOS), Samsung Galaxy Tab em diversos tamanhos (Android), Kindle Fire (Amazon), e Asus Transformer Book (Windows).
  • Verifique os principais tablets utilizados pelos seus usuários, de acordo com o seu web analytics. Preste atenção nos principais tamanhos de tela também.

– Verifique o tamanho dos links

• Todos os links estão em uma margem de 28×28 pixels entre outros links, de forma a serem facilmente clicados com um dedo?

– Verifique que nenhum elemento esteja em Flash

• iPhones não renderizam e é lento nos aparelhos com Android.
• Verifique em lugares pouco óbvios, como o Flash Player para vídeos.

– Garanta que o visual do site mobile seja igual à versão desktop

– Use uma tag viewport

• Use a tag viewport para fazer com que as páginas tenham o tamanho ajustado, de forma que fiquem perfeitas em qualquer aparelho.

– Não use pop-ups

• Além de serem fáceis de clicar acidentalmente, levam o visitante totalmente para longe da página em que ele quer estar.
• Eles aumentam o tempo de download do conteúdo.

– Sites responsivos: verifique onde os elementos terminam

• Em sites mobile, os elementos mais importantes estão no topo da página? Garanta que elementos como o botão “adicionar ao carrinho de compras” não sejam movidos para depois de todo o conteúdo.
• Nas versões para tablets, as coisas ainda fazem sentido?

Na próxima parte, continuaremos com o ckecklist, abordando navegação, conteúdo, vídeo e SERP.

***

Este artigo é uma republicação feita com permissão. Moz não tem qualquer afiliação com este site. O original está em http://moz.com/blog/mobile-site-audit-checklist