A internet reestruturou nossas vidas de uma forma que torna difícil imaginar a vida sem ela. À medida que os cabos de fibra ótica de banda larga continuam chegando ao redor do mundo, os smartphones também oferecem o que é essencialmente um computador de bolso que nos permite acessar aplicativos e a internet na palma da mão.
Como exemplo da popularidade do celular, de acordo com um artigo da Quartz publicado em 2017, a internet móvel representou 98% de todo o uso da internet no Zimbábue. Apesar do alto custo dos smartphones – especialmente nas partes em desenvolvimento do mundo, onde os impostos de importação podem ser adicionados pelos governos – os hábitos cotidianos das pessoas de acessar a internet definitivamente progrediram para serem predominantemente por dispositivos móveis. Por esse motivo, a usabilidade móvel é uma prioridade no design do site.
Por que a compatibilidade com dispositivos móveis é importante?
Mobile-first, ou compatível com dispositivos móveis, é uma abordagem adotada por desenvolvedores da Web e profissionais de marketing para garantir que os usuários de dispositivos móveis vejam o que precisam ver em suas telas quando acessam uma página. Se os usuários passarem muito tempo rolando a página ou precisando aumentar o zoom para poder ler a cópia, eles podem ficar impacientes e abandonar completamente o site inteiro. Projetar wireframes compatíveis com dispositivos móveis e estruturar o conteúdo de acordo (por exemplo, limitar os menus suspensos de navegação) torna as páginas do site mais fáceis de navegar em um smartphone ou tablet e resulta em uma experiência de usuário mais intuitiva.
As páginas da Web projetadas principalmente com a compatibilidade com dispositivos móveis em mente têm maior probabilidade de manter os usuários de dispositivos móveis na página ou explorar todo o site do que aquelas que não são. As primeiras impressões são importantes e um design que exibe clareza tem um efeito imediato e positivo nos usuários. As vendas no varejo de celulares (m-commerce) estão a caminho de ultrapassar a marca de £ 100 bilhões até 2024, de acordo com a Statista, devido ao aumento geral do número de pessoas que usam dispositivos móveis (telefones e tablets). Os hábitos dos compradores parecem mostrar que os celulares são mais propensos a serem usados para navegação pré-compra e comparação de preços com tráfego de desktop, resultando em taxas de conversão mais altas. No entanto, de acordo com o Mobile Search Moments Report do Google com a Nielsen, 77% das pesquisas em dispositivos móveis ocorrem em casa ou no trabalho, quando provavelmente há computadores de mesa.
O que é a ferramenta de teste de compatibilidade com dispositivos móveis?
O teste de compatibilidade com dispositivos móveis do Google torna mais fácil do que nunca verificar instantaneamente se uma página é compatível com dispositivos móveis. O teste pode ser acessado pelo Google Search Console, que é gratuito e ajuda a monitorar e manter a presença de qualquer site nos resultados de busca do Google. Basta digitar o URL de um site na barra de pesquisa na página da ferramenta de teste e os resultados do teste retornarão uma captura de tela de como a página aparece para o Google em um dispositivo móvel, bem como um relatório de usabilidade móvel detalhando quaisquer problemas encontrados.
Alguns dos problemas que podem afetar um usuário que visita uma página em um dispositivo móvel incluem tamanhos de fonte pequenos (que são ainda mais difíceis de ler em uma tela pequena) e o uso de Flash (que não é compatível com a maioria dos dispositivos móveis).
O teste pode identificar os seguintes erros:
Uso de plugins incompatíveis
É quando uma página da web inclui plug-ins, como Flash, que não são suportados pela maioria dos navegadores móveis. Para um site compatível com dispositivos móveis, use tecnologias da Web modernas e amplamente suportadas, como HTML5 ou JavaScript, especialmente ao considerar animações e interatividade.
Janela de visualização não definida
Isso ocorre quando uma página não define uma propriedade viewport, que é o que informa aos navegadores como ajustar a dimensão e a escala de uma página para se adequar ao tamanho da tela. Como os visitantes de qualquer site usarão dispositivos diferentes com tamanhos de tela diferentes, as páginas precisam especificar uma viewport usando a tag meta viewport.
Janela de visualização não definida como “largura do dispositivo”
Isso significa que a página define uma propriedade de viewport de largura fixa e, portanto, não pode ser ajustada para diferentes tamanhos de tela. A correção para esse erro é adotar um design responsivo para as páginas do seu site e definir a janela de visualização para corresponder à largura do dispositivo e redimensioná-la de acordo.
Conteúdo mais largo que a tela
Isso forçará o usuário a rolar para que possa ver palavras e imagens na página. O erro ocorre quando as páginas usam valores absolutos em declarações CSS ou usam imagens que foram projetadas para ter a melhor aparência em uma largura específica do navegador (por exemplo, 980px). Para resolver o problema, verifique se as páginas usam valores relativos de largura e posição para elementos CSS e se as imagens também podem ser dimensionadas.
Texto muito pequeno para ler
Se o tamanho da fonte da página for muito pequeno, ela ficará ilegível em um dispositivo móvel. Depois de especificar uma janela de visualização para suas páginas da Web, defina os tamanhos de fonte para dimensionar adequadamente na janela de visualização. Uma fonte base de 16 pixels geralmente é o tamanho padrão. Os tamanhos de texto para cabeçalhos podem ser definidos em relação à fonte base.
Elementos clicáveis muito próximos
Quando elementos como botões e links de navegação estão muito próximos uns dos outros, os visitantes móveis do site podem ter problemas. Devido à proximidade dos elementos, pode ser difícil tocar em um sem tocar acidentalmente em um elemento vizinho. Certifique-se de dimensionar e espaçar corretamente os botões e links de navegação para melhorar a usabilidade móvel.
É importante observar que não há um índice mobile-first separado. O Google não usa a versão para desktop, mas a versão móvel de todas as páginas da web para classificação e, consequentemente, toda a indexação é a indexação mobile-first.
Qual é a diferença entre compatibilidade com dispositivos móveis e design responsivo?
Os termos compatibilidade com dispositivos móveis e design responsivo às vezes são usados de forma intercambiável, mas têm significados ligeiramente diferentes. A compatibilidade com dispositivos móveis em sua forma pura significa projetar do zero com uma abordagem voltada para dispositivos móveis. Às vezes, isso pode ser limitante porque o que parece e funciona melhor em um telefone celular pode não parecer e funcionar melhor em laptops ou monitores. Também pode ser prejudicial para a jornada do cliente em sua simplicidade percebida. Por exemplo, menos opções disponíveis em um menu suspenso podem não fazer o trabalho necessário para sinalizar o usuário ou responder suficientemente às suas perguntas.
O design responsivo ainda segue os fundamentos de um bom design UX, mas resulta em um site que muda com base no tamanho da tela do dispositivo em que é visualizado. Possui conteúdo dinâmico que altera seu layout, imagens otimizadas que não aparecem distorcidas e espaçamento correto de acordo com o dispositivo. Uma maneira simples de entender isso é que, no design responsivo, um layout de três colunas muda para um único que se ajusta perfeitamente à tela do seu dispositivo. Você pode verificar se um site é responsivo diminuindo a janela em sua área de trabalho e vendo se o conteúdo se reorganiza para corresponder ao tamanho da janela.
Quando se trata de otimização de mecanismo de pesquisa (SEO), os algoritmos do Google classificavam os sites para desktop como a versão principal de qualquer domínio. Isso acontecia em uma época em que as pessoas costumavam criar um site separado hospedado em um subdomínio móvel, otimizado especificamente para dispositivos móveis para os quais os usuários móveis seriam redirecionados. A versão móvel do seu site agora é aquela que determinará se o seu site se classifica, mas se você usar um design responsivo, o conteúdo será o mesmo em todas as versões.
Se você usa um sistema de gerenciamento de conteúdo (CMS), como WordPress, Wix ou Squarespace, todos eles têm guias dedicados para ajudá-lo a tornar seu site compatível com dispositivos móveis.