Como otimizar seus layouts de WordPress para tráfego móvel

Publicados: 2020-12-16

O número de dispositivos móveis e de pessoas que os utilizam está em constante aumento. Não é nenhuma surpresa que mais da metade de todo o tráfego da Internet seja móvel, e a maioria das consultas de mecanismo de pesquisa feitas em dispositivos móveis. Além disso, o Google penaliza sites que não são otimizados para dispositivos móveis.

Para otimizar seus layouts de WordPress para tráfego móvel, você precisa fazer muito mais do que instalar um tema. Você deve investir na versão móvel do seu site, não apenas do ponto de vista de experiência do usuário, mas também do ponto de vista de SEO, CRO, publicidade e desempenho.

Portanto, neste artigo, explicaremos o que você precisa abordar em seu site WordPress para fazê-lo funcionar para o tráfego móvel e para garantir que os usuários tenham a melhor experiência possível ao visitar o site em um dispositivo móvel.

Por que o tráfego móvel é importante

Usuário navegando em dispositivo móvel

Em 2016, pela primeira vez, o tráfego de Internet móvel ultrapassou o de desktop. Para acompanhar isso, você deve preparar seu site WordPress para o tráfego de entrada de qualquer tipo de dispositivo.

Otimização não significa apenas ter uma ótima aparência em smartphones, significa também ter um site funcional. Ter um site pronto para celular aumentará a experiência do usuário e sua taxa de conversão, e é crucial para sites que baseiam sua receita em publicidade.

Além de uma UX aprimorada, um layout compatível com dispositivos móveis também influencia positivamente seu SEO. Da atualização do Google em 2015 em diante, houve uma revisão significativa nos algoritmos do mecanismo de busca. Agora, a compatibilidade com dispositivos móveis é um dos fatores importantes para uma melhor classificação de pesquisa e aumento do tráfego da web.

O aumento do tráfego móvel mostra a necessidade de otimização do layout

O tráfego da web para celular está em crescimento contínuo, conforme mostrado neste gráfico do Statista.

Portanto, se o seu site tiver uma renderização excelente em dispositivos móveis, terá uma classificação melhor nas SERPs e resultará em mais vendas via celular. Até mesmo grandes varejistas como o Walmart Canadá se beneficiaram ainda mais com as otimizações de layout da web móvel, com um aumento de 98% nas vendas de celulares!

Quando a empresa descobriu que quase 50% de seus clientes-alvo são mães que usam tablets, eles perceberam que deveriam fazer algo sobre sua experiência móvel. Para resolver com sucesso os problemas com seus layouts móveis, eles implementaram as seguintes soluções:

  • Estabelecendo um plano móvel primeiro: a equipe chegou à decisão de que precisava adotar uma abordagem centrada no toque para o design e fez com que parecesse realmente bom em tablets e smartphones.
  • Implementando a otimização do design móvel: A abordagem de design responsivo tornou a renderização do site excelente em todos os tamanhos de tela. Além disso, eles otimizaram suas páginas de produtos para o tráfego da web móvel também.

O resultado: aumento de 20% na taxa de conversão geral e aumento de 98% nas vendas de celulares, conforme mencionado acima.

Como o Google avalia os layouts de sites para celular?

Ao avaliar a capacidade do site de receber tráfego de uma pesquisa móvel, o Google considera os seguintes fatores:

  • Layout da página: o Google examina se sua página é renderizada corretamente na tela de um celular.
  • Acessibilidade: verificar se os botões, mídia e texto são grandes o suficiente para serem facilmente acessíveis sem que os usuários ampliem.
  • Desempenho: a velocidade da página é vital para experiências de desktop e web móvel, e o Google prioriza o desempenho da página móvel em relação ao desktop em SERPs.
  • Posicionamento do anúncio: uma página cheia de anúncios é intrusiva para muitos e também um problema para o Google. É por isso que, ao usar anúncios, você precisa garantir que não viole as diretrizes de posicionamento de anúncios.

Devrix Google avalia fatores de layouts de sites para celular

Comece com alguns testes

A primeira coisa que você precisa fazer é examinar se o seu site atual responde adequadamente ao tráfego da web móvel ou não. Para isso, você pode usar a ferramenta de teste de compatibilidade com dispositivos móveis do Google.

Amostra de página de teste de compatibilidade com dispositivos móveis do Google

Teste de compatibilidade com dispositivos móveis do Google como uma das melhores ferramentas para examinar os layouts responsivos para dispositivos móveis do seu site.

Basta inserir o URL do site e selecionar Testar URL . A análise não levará mais do que alguns segundos. Se o seu site funciona em dispositivos móveis, a ferramenta irá informá-lo, com uma captura de tela de como o site fica em um smartphone. Ou, se seu site não for otimizado para celular, a ferramenta indicará o que você precisa ajustar.

Existem várias outras ferramentas úteis que você pode usar para testar a compatibilidade com dispositivos móveis, como:

  • Varvy Mobile SEO
  • W3C Mobile Validator
  • Verificador de Design Responsivo

As ferramentas são ótimas, mas nada supera a experiência da primeira mão. Sempre sugerimos que você vá por todo o seu site, execute ações que você considera prioritárias para seus usuários (como adicionar um produto a um carrinho, enviar um formulário, navegar para uma página, compartilhar uma postagem). Esteja atento a possíveis problemas ao longo do processo. Esta é a forma mais simples de teste de UX.

Teste o desempenho

A velocidade é mais relevante do que nunca. O Google considera a velocidade como um dos fatores de classificação mais importantes, e até 85% dos usuários esperam que os sites para celular carreguem muito mais rápido do que as versões para desktop.

Aqui estão algumas ferramentas que você pode usar para testar a velocidade do seu site:

  • PageSpeed ​​Insights
  • GTMetrix
  • Pingdom

Se você deseja acelerar o conteúdo em dispositivos móveis, um CDN pode ajudá-lo a fornecer conteúdo com mais rapidez por meio do armazenamento em cache e da distribuição de vários locais.

Por exemplo, digamos que seu servidor de hospedagem seja em San Francisco, CA, e seu visitante da web móvel seja de Paris. É uma distância que pode desacelerar a transversal do conteúdo. Um CDN pode armazenar uma versão do seu site em um servidor francês perto de Paris e, como resultado, fornecer o seu conteúdo com muito mais rapidez.

Além disso, você precisa selecionar um poderoso provedor de hospedagem gerenciada para o seu site WordPress. Um host compartilhado executa centenas de sites ao mesmo tempo e, se um dos sites apresentar um pico de tráfego maior do que o normal, isso diminuirá a velocidade dos outros sites.

Uma atualização para uma hospedagem WordPress como o Pagely pode trazer melhorias significativas de desempenho. O Pagely usa uma infraestrutura de servidor que agiliza imediatamente o seu site. Eles também usam a versão mais recente do PHP 7 e incluem um CDN que pode disparar os ativos do seu site.

Mantenha a Simplicidade

Como os smartphones têm uma tela muito menor do que os layouts de desktop, a quantidade de elementos que você pode mostrar aos usuários é menor. Portanto, se você deseja exibir muito conteúdo, apenas impedirá a experiência do usuário.

Por exemplo, vamos dar uma olhada no site da filial brasileira da Toyota. Parece realmente sólido em um laptop.

Layout do site WordPress para desktop Toyota Brasil

Um site de desktop com boa aparência não significa que o layout para celular seguirá o exemplo. Fonte da imagem: Toyota Brasil

Mas, e se você quiser navegar em seus veículos em seu smartphone.

Layout WordPress móvel não otimizado da Toyota Brasil

Um layout da web para celular desordenado leva a menos tráfego e a uma taxa de conversão reduzida. Fonte da imagem: Toyota Brasil

Não é tão ruim, mas, novamente, aquela barra superior e o menu principal são um pouco demais, tornando toda a experiência desatualizada e confusa.

Manter as coisas simples com o seu design melhora a IU móvel e os usuários podem navegar nas suas páginas com mais eficiência. Além disso, layouts simples melhoram a pontuação de velocidade da página móvel porque quanto menos elementos um navegador precisa carregar, mais rápida a página é.

Swell bottle Mobile Screenshot

Um layout WordPress simples para celular da Swell

Quando você projeta um layout para celular, é melhor se concentrar em um layout de página de uma coluna, para promover mais rolagem na página. Pense nisso - por que o Facebook e o Instagram são tão bem-sucedidos como plataformas móveis?

Rolagem no telefone GIF

Os usuários deslizam naturalmente na vertical. Fonte da imagem: Giphy

Além disso, você precisa considerar outros recursos aceitáveis ​​para um design de web móvel simples, como o “menu de hambúrguer”.

Captura de tela do site AMC com menu de hambúrguer

Um botão de menu de hambúrguer no canto superior esquerdo. Fonte da imagem: AMC

Agora é um componente padrão no design da web móvel e, quando os usuários desejam navegar em outra página, eles procuram a parte superior do layout da página. Não use menus suspensos extensos. Eles são desafiadores para navegar em smartphones e, às vezes, até mesmo impedem a usabilidade de sites de desktop.

Exclua conteúdo desnecessário

Além de agilizar a transição da página para dispositivos móveis removendo elementos desnecessários, você pode remover o conteúdo extra também. Claro, você nunca deve excluir conteúdo que melhore sua taxa de conversão. No entanto, simplesmente existe algum conteúdo que não é necessário para a versão móvel do seu site.

Ao revisar o conteúdo que deve aparecer na página, pergunte-se o seguinte:

  • Quão relevante é este conteúdo para a página?
  • O conteúdo é crucial para a jornada do usuário?
  • Se precisarmos incluir esse conteúdo, como podemos simplificá-lo para dispositivos móveis?
  • Se pudermos removê-lo no celular, ele ainda será necessário no desktop?

A eliminação de conteúdo desnecessário aumentará a experiência do usuário e as taxas de conversão. Salve apenas o conteúdo mais importante para os visitantes da web móvel. Simplifique seu conteúdo onde puder, mas não elimine nenhum conteúdo importante que possa convencer os usuários a optar por seu produto.

Captura de tela do site BuildFire simples

Uma interface de usuário simples do site móvel BuildFire.

Limite as áreas clicáveis

Quando as pessoas visitam sites em dispositivos móveis, elas não querem muitas opções para clicar. Isso pode ser opressor e você não conseguirá fornecer uma experiência do usuário móvel operacional. Em vez disso, você precisa destacar as frases de chamariz mais importantes e as áreas clicáveis ​​em suas páginas.

Botão de apelo à ação de Todoist

Todoist tem apenas o call-to-action e alguns belos gráficos.

Lembre-se de que navegar em um site em um smartphone consiste em olhar e clicar em uma tela sensível ao toque com os dedos em vez de apontar com setas. Portanto, incluir um número limitado de links e espaçá-los adequadamente garantirá que você tenha uma página acessível na qual os usuários de dispositivos móveis possam navegar.

Botões grandes do site móvel Quicksprout

O site móvel Quicksprout tem grandes áreas clicáveis.

Isso é crucial porque, se as áreas clicáveis ​​estiverem fechadas na tela de um celular, as pessoas podem clicar no link errado. Além disso, o Google pode sinalizar o seu site como hostil para usuários de celular, e você perderá muito tráfego de pesquisa orgânica em potencial.

Design Responsivo de Arreios

Se você deseja exibir seu site corretamente no desktop e no celular, deve torná-lo responsivo. Um site responsivo usa os mesmos elementos de página para as versões desktop e mobile. De acordo com o aparelho, o design muda para caber na tela.

Benefícios Devrix do design responsivo

Além de UX aprimorado para os visitantes da web em dispositivos móveis, o design responsivo traz ao seu site os seguintes benefícios também:

  • Flexibilidade: com design responsivo, você não precisa pensar em mudar o design em dois sites. Você só precisa corrigir ou adicionar elementos uma vez, e isso é feito para as versões para celular e desktop.
  • Custo-benefício: executar um site para desktop e celular pode ser caro. Ao utilizar um design responsivo, você elimina esses custos desnecessários.
  • Benefícios de SEO: O design responsivo é benéfico para sua classificação de pesquisa porque o Google, conforme discutido no início do artigo, prioriza sites compatíveis com dispositivos móveis em SERPs.

No entanto, você deve ter cuidado. A maioria dos sites responsivos apenas converte três colunas de conteúdo de desktop em uma coluna.

Um site responsivo é aquele que cabe em todas as telas. Ele carrega os mesmos dados do desktop para a versão móvel. Por exemplo, se você quiser mostrar uma foto de desktop de 1.200 px em uma tela de celular de 300 px, carregará todo o 1.200 px, apenas renderizado em tamanho menor.

Gif de design responsivo

Fonte da imagem: Giphy

Em relação às imagens, o WordPress já fez progressos significativos para uma melhor experiência. Desde a versão 4.4, o CMS dimensiona automaticamente até as imagens maiores por meio do atributo HTML srcset .

PNG e JPEG são os formatos de arquivo de imagem mais comuns. Mas, com os mais recentes desenvolvimentos de tecnologia e imagem digital, os formatos WebP e SVG estão se tornando cada vez mais presentes.

Um SVG é uma imagem vetorial e pode ser redimensionada para caber em qualquer tamanho de tela. Normalmente, os SVGs são bem menores do que os PNGs, portanto, economiza um tempo valioso durante o carregamento.

No entanto, você ainda deve ter cuidado. Elementos visuais como vídeos, fotos e gráficos podem ser um dos devedores de desempenho significativos para sites. Embora não haja regras estritamente definidas para o tamanho do arquivo de mídia, arquivos menores resultam em melhores tempos de carregamento.

Lembre-se de que os mesmos elementos visuais da versão para desktop do seu site WordPress nem sempre funcionam no design móvel. É por isso que eliminar imagens de fundo grandes e trocá-las por uma imagem que não atrapalhe a UX no celular é uma opção muito melhor.

Vamos tomar a página inicial da HubSpot como exemplo. Os gráficos na seção de herói representam perfeitamente como o CRM faz as coisas andarem. Imagine uma imagem realista de um prédio de escritórios com essa quantidade de pessoas em cada janela. Não funcionaria tão bem assim.

Captura de tela do Hubspot

Fonte: HubSpot

Otimize Formulários

Preencher formulários em um smartphone pode ser um desafio, especialmente se os usuários tiverem que enviar muitos dados e navegar em muitos campos. É por isso que você precisa simplificar seus formulários móveis e coletar apenas as informações mais importantes.

Captura de tela do formulário do Copyblogger

Mantenha os formulários para suas páginas móveis o mais simples possível. Fonte: Copyblogger

No WordPress, você pode instalar um plug-in como WPForms e criar formulários responsivos de forma rápida e fácil que podem ajudá-lo a converter visitantes da web móvel.

Da perspectiva do desenvolvedor, usamos o Formulário de Contato 7, pois ele oferece mais flexibilidade. Embora deva ser observado que sua IU não é amigável para usuários não técnicos que desejam um design personalizado para seus formulários.

Processo de otimização de formulário do Formulário de Contato 7

Contact Form 7 é a melhor ferramenta de otimização de formulário do ponto de vista do desenvolvedor.

Empacotando

Ter um layout WordPress compatível com dispositivos móveis é crucial hoje em dia. É um requisito necessário que os usuários-alvo e os mecanismos de pesquisa aceitem seu site.

Um site WordPress compatível com dispositivos móveis tem o poder de trazer mais tráfego orgânico, atrair novos clientes potenciais e clientes.

Agora que você tem uma ideia melhor do que testar, como procurar problemas de IU móvel e identificar problemas adicionais. Você pode seguir os conselhos descritos acima para garantir que a UX móvel do seu site WordPress esteja sempre pronta.

As pessoas por trás do melhor CMS também estão fazendo um grande progresso em direção a uma UX móvel nativa aprimorada. Desde o dimensionamento de imagens em navegadores móveis até um back-end aprimorado, você pode ter certeza de que está à frente dos proprietários de sites que usam outro CMS.

Se você tiver mais perguntas ou precisar de ajuda com questões de UX móvel e criando uma experiência web moderna em dispositivos, não hesite em entrar em contato.