Como ter certeza de que meu site é compatível com dispositivos móveis? Uma lista de verificação

Conforme informamos em nosso resumo de notícias SEM na sexta-feira, o analista de tendências para webmasters do Google, John Mueller, confirmou que a última onda de mudanças no sinal de classificação amigável para dispositivos móveis do Google terminou de ser lançada.

Desde a atualização inicial do ' ^Mobilegeddon ', que estreou em 21 de abril de 2015, a compatibilidade com dispositivos móveis tem sido um fator de classificação significativo nos resultados de pesquisa do Google. Em sua postagem no blog, prenunciando as mudanças de algoritmo dois meses antes, o Google disse que queria que os usuários “achassem mais fácil obter resultados de pesquisa relevantes e de alta qualidade otimizados para seus dispositivos [móveis]”.

O Google afirmou e reafirmou seu compromisso com a compatibilidade com dispositivos móveis ao longo dos anos, implementando um rótulo "amigável para dispositivos móveis" para distinguir sites adaptados para dispositivos móveis, fazendo alterações na página de resultados de pesquisa para dispositivos móveis, incluindo URLs fáceis de usar e sitelinks expandidos, e o lançamento de Accelerated Mobile Pages para fornecer uma experiência móvel ultrarrápida.

Agora, com esta atualização mais recente, o Google fortaleceu ainda mais seu sinal de classificação compatível com dispositivos móveis, tornando ainda mais importante para os webmasters ter um site que atenda aos padrões do Google.

Com isso em mente, como você pode ter certeza de que seu site está de acordo? Reunimos uma lista de verificação útil de coisas que você deve fazer (ou não fazer) para obter a conta de saúde móvel mais limpa possível do Google.

Não use Flash

A maioria dos navegadores para celular não pode renderizar conteúdo em Flash, portanto, uma regra prática na criação de um site otimizado para celular é: não use Flash. O relatório de usabilidade móvel do Google recomenda descaradamente que você use “tecnologias modernas da web” para exibir o conteúdo, animações e navegação de sua página. Ai!

Certifique-se de que sua janela de visualização esteja configurada corretamente

Uma janela de visualização é um tipo de metatag que fornece ao navegador instruções sobre como ajustar as dimensões da página e dimensioná-la para diferentes larguras de dispositivo. Isso deve aparecer no cabeçalho da sua página da web.

Se não houver uma tag de janela de visualização, os navegadores móveis terão como padrão renderizar a página na largura de uma tela de desktop. O Google tem um tutorial sobre como definir a janela de visualização da sua página e garantir que ela esteja acessível.

O que não fazer: defina sua viewport para uma largura fixa. Alguns desenvolvedores definirão a janela de visualização para uma largura de pixel fixa para se adequar a tamanhos de tela móveis comuns, mas isso ainda não será adequado para todos os tipos de dispositivos e, portanto, o Google não a considera compatível com dispositivos móveis.

Se você seguir as instruções do tutorial do Google e usar o valor da janela de visualização width=device-width , isso permitirá que sua página corresponda à largura de qualquer dispositivo que seus visitantes estejam usando.

Adicionar o atributo initial-scale=1 também permitirá que sua página preencha a tela, independentemente de o dispositivo ser retrato ou paisagem, e assim aproveitar toda a largura da tela.

Por fim, certifique-se de que seu conteúdo esteja dimensionado para a janela de visualização. Se você definir larguras CSS absolutas para elementos de página, como imagens e vídeos, isso poderá causar problemas para dispositivos mais estreitos do que a largura especificada. Você pode contornar isso usando valores de largura relativos, como width: 100% , em seu CSS.

Usar fonte grande

Se você configurou sua janela de visualização corretamente, os tamanhos das fontes serão dimensionados de acordo com o dispositivo do usuário, mas o Google faz algumas recomendações adicionais para fontes além disso.

Ele recomenda usar um tamanho de fonte base de 16 pixels, com quaisquer outros tamanhos de fonte (como pequeno e grande) definidos em relação a essa linha de base. O espaço vertical entre as linhas deve ser definido em 1,2em.

Tente também evitar o uso de muitas fontes e tamanhos de fonte diferentes, o que leva a layouts de página confusos e complicados.

Espaçar links e botões

Links e botões, também chamados de “alvos de toque” pelo Google, são mais difíceis de pressionar em um dispositivo móvel do que em um navegador de desktop, porque os dedos são mais largos e geralmente menos precisos que o cursor do mouse.

O Google penalizará todas as páginas em que os pontos de toque são muito pequenos e próximos para serem pressionados com precisão.

O dedo médio adulto tem cerca de 10 mm de largura, então o Google recomenda um tamanho mínimo de alvo de toque de cerca de 7 mm ou 48 pixels de largura – pelo menos para os alvos de toque mais importantes, como botões usados ​​com frequência, links de navegação, barras de pesquisa e campos de formulário.

Os alvos usados ​​com menos frequência podem ser menores, mas ainda devem ser espaçados o suficiente para que um usuário que tente pressionar um não atinja acidentalmente outro alvo. O espaço recomendado em torno de alvos de toque menores é de pelo menos 5 mm.

Não use pop-ups de tela cheia

Pop-ups e sobreposições grandes ou de tela cheia, também chamados de “intersticiais”, como um formulário de inscrição em lista de e-mail ou promoção de aplicativo, podem ser ainda mais perturbadores em um dispositivo móvel.

Embora um pop-up grande e chamativo possa parecer uma boa ideia do ponto de vista de uma empresa, o Google reconhece que isso interfere na experiência de navegar em um site em dispositivos móveis e penalizará os sites que os utilizam.

Em vez de um pop-up de tela cheia, o Google recomenda usar um banner ou implementar a indexação de aplicativos, que permitirá que o conteúdo de seu aplicativo apareça nos resultados de pesquisa, tornando-o um método de promoção muito eficaz.

Faça uma verificação com as ferramentas do Google

A maneira mais fácil de verificar se seu site está atingindo todas as metas corretas de compatibilidade com dispositivos móveis é usar as ferramentas fornecidas pelo Google para fazer uma verificação.

O Search Console do Google, anteriormente conhecido como Webmaster Tools, tem uma seção de 'usabilidade móvel' que diagnosticará quaisquer problemas persistentes com seu site, geralmente um dos erros listados acima.

Você também pode verificar a integridade móvel de páginas da Web individuais colando o URL no Teste de compatibilidade com dispositivos móveis do Google. E o Google Developers tem uma seção listando erros comuns cometidos ao projetar para dispositivos móveis, que tem alguns detalhes adicionais sobre coisas como conteúdo não reproduzível, redirecionamentos defeituosos e 404s e como corrigi-los.

A necessidade de velocidade

Em suas recomendações para trabalhar com um desenvolvedor para criar um site compatível com dispositivos móveis (se você não conseguir fazer as alterações necessárias no site dele por conta própria), o Google sugere pedir ao desenvolvedor que “se comprometa com a velocidade”.

Embora o Google não inclua uma velocidade de carregamento lenta como um de seus problemas de compatibilidade com dispositivos móveis "devem ser corrigidos", sabemos que a velocidade é um fator de classificação, e as estatísticas mostram que a velocidade de carregamento lenta pode fazer com que os usuários abandonem páginas da web com frequência.

Portanto, se você deseja fornecer a melhor experiência do usuário e também dar ao seu site compatível com dispositivos móveis a melhor chance de uma classificação mais alta, considere acelerá-lo o máximo possível.

O PageSpeed ​​Insights do Google tem uma guia 'móvel' que dará à sua página uma classificação de velocidade móvel de 100, com conselhos sobre como corrigir os elementos que podem estar diminuindo a velocidade.

Ele também dará à sua página móvel uma classificação de experiência do usuário de 100 e sinalizará quaisquer problemas de compatibilidade com dispositivos móveis da mesma forma que as outras ferramentas do Google.

Há também as Accelerated Mobile Pages, as páginas da Web móveis ultrarrápidas do Google que são executadas em uma versão reinventada do HTML. Criar uma versão AMP do seu site para dispositivos móveis é outra maneira de garantir que seja rápido e compatível com dispositivos móveis, embora muitos SEOs ainda estejam impedindo a implementação de AMP por vários motivos. É uma opção, mas não uma necessidade para ter um site móvel rápido e amigável ao Google.

___
por Rebecca Sentence