Na semana passada, o Google começou a enviar e-mails, bem como notificações das Ferramentas do Google para webmasters, informando aos webmasters se seus sites estavam de acordo com os padrões atuais de usabilidade móvel. As páginas que não são codificadas para fornecer uma experiência móvel amigável podem ter uma classificação mais baixa para usuários de smartphones, pois o Google experimenta isso como um sinal de SEO profissional. Se você recebeu uma dessas mensagens, provavelmente deseja saber o que fazer em seguida.
Veja como resolver o aviso de usabilidade móvel do Google.
Como são as mensagens
Este é o aspecto do aviso de usabilidade em dispositivos móveis nas Ferramentas do Google para webmasters. O aviso começa nos informando quantas páginas em seu site têm erros críticos de usabilidade em dispositivos móveis. Ao clicar em “Inspecionar problemas móveis”, você verá uma tabela mostrando o tipo de erro de usabilidade , bem como o número de páginas em seu site com esse erro.
O que é um erro crítico de usabilidade móvel?! Isso soa importante!
Mesmo com mais de 58% dos adultos americanos possuindo smartphones , milhares de empresas ainda negligenciam a importância do design responsivo e da criação de uma experiência amigável para quem acessa seu site em um dispositivo móvel.
Por exemplo: podemos tentar expandir a página em nossos smartphones para aumentar um pouco o zoom, mas isso já cria uma experiência ruim para o usuário. Mesmo que nosso site possa parecer e renderizar perfeitamente em um navegador de desktop, é um ambiente completamente diferente quando o tamanho da tela muda. Muito simplesmente, é por isso que o web design responsivo se tornou uma necessidade na indústria. Mantém a sensação, a aparência e o estilo do negócio/marca; cria unidade.
Mas vamos voltar a esses erros irritantes. Existem três erros comuns que você provavelmente encontrará se receber um aviso de usabilidade móvel. Vamos dar uma olhada neles, bem como as etapas que você pode seguir para corrigi-los o mais rápido possível.
3 erros comuns de usabilidade móvel
Tamanho de fonte pequeno
A correção: defina um tamanho de fonte base de 16px .
Em seguida, crie classes como ‘.small’ e ‘.large’ para designar quando tamanhos maiores ou menores devem ser renderizados.
Janela de visualização não configurada
A janela de visualização é o que controla como um site será exibido em um dispositivo móvel. Sem uma janela de visualização configurada, um dispositivo móvel renderizará o conteúdo de uma página em uma largura de área de trabalho típica (resultando em telas que se parecem muito com o meu exemplo acima).
A correção: configure uma viewport para que as páginas incluam uma meta viewport no cabeçalho do documento. Por exemplo:
meta name=viewport content=”width=device-width, initial-scale=1″
Além disso, você desejará dimensionar o conteúdo para a janela de visualização, ou seja; você não deseja criar larguras absolutas para imagens.
Em vez disso, use larguras relativas, como:
width:100%
Elementos de toque muito próximos
A correção: enquanto estamos lentamente nos tornando mestres no manuseio da tecnologia móvel, elementos de toque ou alvos de toque (seus botões, menus, gatilhos de pop-up etc.) geralmente são muito pequenos para toques precisos. Aqui está um detalhe interessante: o tamanho médio do dedo adulto é de cerca de 10 mm de largura (pouco menos de ½ polegada), portanto, um tamanho mínimo de alvo de toque de aproximadamente 48 pixels CSS de altura/largura é recomendado . Espaçar os links menos importantes e tê-los um pouco menores também é recomendado.
Conselhos úteis do Google
Na parte inferior da mensagem de erro de aviso de usabilidade móvel do Google, vemos algumas dicas para aqueles que não têm certeza de como prosseguir.
Eles oferecem:
- Dicas para tornar um CMS compatível com dispositivos móveis (um CMS é um sistema de gerenciamento de conteúdo, como WordPress ou Joomla)
- Conhecimento geral e guias para criar sites compatíveis com dispositivos móveis
- Um fórum de suporte para webmasters
