Se o seu site WordPress ainda é somente para desktop, você está perdendo visitantes. Mais da metade das pessoas navega em seus celulares e, se o seu site não for compatível com dispositivos móveis, elas sairão rapidamente.
Aprendi isso da maneira mais difícil, quando um dos meus sites mais antigos parecia bom no desktop, mas não funcionava completamente no celular. O texto era minúsculo, o menu não funcionava e minha taxa de rejeição disparou. Depois de corrigi-lo, meu tráfego e minhas inscrições melhoraram quase da noite para o dia.
Neste guia, mostrarei exatamente como tornar um site WordPress somente para desktop compatível com dispositivos móveis. Essas etapas são simples e podem ser seguidas por qualquer pessoa, mesmo que você nunca tenha mexido em código.
- 1. Veja se seu site já é compatível com dispositivos móveis
- 2. Escolha um tema de WordPress responsivo para celular
- 3. Simplifique seu menu de navegação
- 4. Garantir que as informações importantes sejam fáceis de encontrar
- 5. Use fontes de tamanho grande e legível
- 6. Mantenha os formulários de contato e Optin curtos
- 7. Torne suas páginas de destino responsivas para celular
- 8. Altere o tamanho e o posicionamento do botão de CTA
- 9. Remover ou simplificar popups móveis
- 10. Use plug-ins do WordPress compatíveis com dispositivos móveis
- 11. Tornar a velocidade do site uma prioridade
- Perguntas frequentes sobre como tornar um site compatível com dispositivos móveis
1. Veja se seu site já é compatível com dispositivos móveis
Antes de alterar qualquer coisa, verifique se seu site já é compatível com dispositivos móveis. Muitos temas mais recentes do WordPress são responsivos por padrão, portanto, você pode estar no meio do caminho sem perceber.
A maneira mais rápida de verificar é com o Teste de compatibilidade com dispositivos móveis gratuito do Google. Cole seu URL, pressione Enter e você obterá os resultados em segundos.
O relatório mostra se o seu site foi aprovado, além de uma captura de tela de como ele fica em um telefone. Ele também sugere correções se algo não estiver funcionando.
Quando fiz esse teste em um dos meus sites mais antigos, os resultados foram surpreendentes. As fontes eram muito pequenas, os botões se sobrepunham e os menus não abriam. Esse teste me deu uma lista clara de tarefas para corrigir os problemas.
Se seu site não for aprovado, faça disso sua principal prioridade. Mesmo que seja aprovado, continue lendo. Você ainda encontrará maneiras de melhorar ainda mais a experiência móvel.
2. Escolha um tema de WordPress responsivo para celular
Se o seu tema atual não for compatível com dispositivos móveis, a solução mais rápida é mudar para um tema responsivo do WordPress. Um tema responsivo se ajusta automaticamente a qualquer tamanho de tela, para que os visitantes não precisem aplicar zoom ou rolar para os lados.
Você pode encontrar opções gratuitas diretamente no WordPress. Vá para Aparência " Temas " Adicionar novo e pesquise por "Responsivo". Você verá uma variedade de temas prontos para dispositivos móveis que podem ser instalados com um clique.
Quando testei isso pela primeira vez em um dos meus sites mais antigos, a troca para um tema responsivo resolveu instantaneamente metade dos meus problemas de layout. Foi a melhoria mais fácil que eu poderia ter feito.
Se você preferir criar algo exclusivo, recomendo o SeedProd. Ele é um construtor de temas do tipo arrastar e soltar que permite criar seu próprio tema responsivo para WordPress sem tocar no código.
Você pode começar com um modelo predefinido ou criar cada seção passo a passo. De qualquer forma, você verá suas alterações ao vivo no editor visual, e tudo o que você criar será totalmente responsivo a dispositivos móveis.
Isso significa que seu site terá uma ótima aparência e funcionará sem problemas em telefones, tablets e desktops, sem necessidade de ajustes adicionais.
3. Simplifique seu menu de navegação
As telas dos celulares são muito menores do que as dos desktops, portanto, menus longos e complicados não funcionam bem. Se os visitantes tiverem que aplicar zoom ou rolar para os lados apenas para encontrar um link, eles provavelmente desistirão.
A melhor abordagem é manter sua navegação simples. Limite seu menu a apenas alguns itens principais que caibam em uma tela. Isso facilita para as pessoas chegarem rapidamente onde precisam ir.
Quando simplifiquei um de meus próprios menus para três links principais, a diferença foi enorme. Os usuários passaram mais tempo no site porque puderam realmente encontrar o que precisavam.
Se você não tiver certeza de como tornar seu menu responsivo, confira este guia passo a passo sobre como criar um menu WordPress pronto para dispositivos móveis.
4. Garantir que as informações importantes sejam fáceis de encontrar
Quando as pessoas visitam seu site por telefone, geralmente estão procurando algo específico. Pode ser uma resposta rápida, seus detalhes de contato ou até mesmo instruções para chegar à sua empresa.
Se essas informações estiverem ocultas, eles irão embora. No celular, cada toque extra parece lento e frustrante.
Pense nos detalhes que seus visitantes mais precisam e certifique-se de que eles estejam na frente e no centro. Algumas maneiras fáceis de fazer isso incluem:
- Adição de uma pequena seção de perguntas frequentes com respostas rápidas
- Incorporação de um vídeo explicativo curto
- Destacar seus principais recursos ou serviços
Quando coloquei as informações de contato e as perguntas frequentes em uma posição mais alta em um site no qual eu estava trabalhando, a taxa de rejeição caiu imediatamente. As pessoas não precisavam procurar respostas, elas as viam instantaneamente.
Você não precisa colocar tudo em sua página inicial, mas certifique-se de que os itens essenciais sejam óbvios e fáceis de acessar no celular.
5. Use fontes de tamanho grande e legível
É quase impossível ler textos minúsculos em um telefone. Se os visitantes tiverem que apertar e aplicar zoom apenas para ver seu conteúdo, eles não ficarão por perto.
Uma boa regra geral é manter o corpo do texto com pelo menos 14-16 px. Os títulos e os botões devem ser ainda maiores para facilitar a leitura e o toque.
Use fontes limpas e padrão que carreguem rapidamente. Fontes personalizadas e extravagantes podem parecer bonitas no desktop, mas no celular elas podem deixar o site mais lento e dificultar a leitura.
Quando aumentei o tamanho das fontes em um dos meus blogs, a diferença foi que as taxas de rejeição caíram instantaneamente e os leitores permaneceram nas páginas por mais tempo porque podiam ler confortavelmente em seus telefones.
Para obter mais detalhes, consulte nosso guia sobre tipografia em web design.
6. Mantenha os formulários de contato e Optin curtos
Formulários longos são uma das maiores desvantagens em dispositivos móveis. Digitar muitos detalhes em uma tela pequena é frustrante, e a maioria das pessoas não termina o formulário.
Examine seus formulários e pergunte se todos os campos são realmente necessários. Por exemplo, se você estiver criando uma lista de e-mails, normalmente só precisa de um nome e de um endereço de e-mail.
Se sua meta for vendas, mantenha os formulários de checkout o mais curtos possível - apenas informações de cobrança e envio. A solicitação de detalhes adicionais aumenta o atrito e o abandono do carrinho.
Certa vez, reduzi o formulário de inscrição de um cliente de seis campos para dois, e as conversões quase dobraram. No celular, o mais curto sempre vence.
7. Torne suas páginas de destino responsivas para celular
As páginas de destino são onde ocorre a maioria das conversões, mas se elas não funcionarem bem em dispositivos móveis, você estará deixando dinheiro na mesa. Já vi páginas que pareciam perfeitas no desktop se desfazerem completamente em um telefone - botões cortados, texto sobreposto e formulários impossíveis de preencher.
A solução mais fácil é usar um construtor de páginas do WordPress com controles móveis integrados. Dessa forma, você pode fazer o design uma vez e saber que ele ficará bem em todas as telas.
O SeedProd simplifica esse processo. Ele inclui uma biblioteca de modelos de páginas de destino responsivas que você pode importar com um clique. A partir daí, você pode personalizar tudo no editor de arrastar e soltar, sem necessidade de código.
O que mais gosto é que o SeedProd permite alternar instantaneamente entre as visualizações para desktop e celular. É possível ajustar o espaçamento, o tamanho das fontes e o posicionamento dos botões especificamente para telas menores, tudo na mesma página.
Antes de publicar, você pode visualizar a versão móvel ao vivo e fazer ajustes no local. Dessa forma, você faz o lançamento com confiança, sabendo que sua página será convertida tanto no desktop quanto no celular.
8. Altere o tamanho e o posicionamento do botão de CTA
Os botões de call-to-action (CTA) são a parte mais importante da sua página, mas, no celular, muitas vezes eles se perdem. Se os visitantes não puderem vê-los ou tocá-los facilmente, você perderá conversões.
Faça com que os botões sejam grandes o suficiente para serem tocados com o polegar e coloque-os onde os usuários rolam naturalmente - geralmente perto do meio ou da parte inferior da tela. Evite empilhar muitas CTAs em uma página, pois isso gera confusão.
Um estudo constatou que, em mais da metade dos sites, os botões de CTA levam mais de 3 segundos para serem localizados. Se o seu for óbvio logo de cara, você já tem uma vantagem.
Certa vez, coloquei um botão de inscrição mais alto em uma página de destino e dobrei as conversões no celular. Às vezes, uma simples mudança de posicionamento faz a maior diferença.
9. Remover ou simplificar popups móveis
Os popups podem funcionar bem no desktop, mas no celular eles costumam fazer mais mal do que bem. As telas pequenas dificultam o fechamento e, se o usuário tocar no local errado, poderá ser enviado para outra página por engano.
A melhor solução é manter os pop-ups leves e discretos. Em vez de um pop-up em tela cheia, experimente uma barra flutuante ou um pequeno slide-in que não bloqueie toda a exibição.
Em um site com o qual trabalhei, a substituição de um grande pop-up de entrada por uma pequena barra inferior reduziu as reclamações e, na verdade, melhorou as conversões. Os usuários podiam continuar navegando sem se sentirem interrompidos.
Se você quiser mais ideias, aqui está um guia de práticas recomendadas de pop-ups para celular da OptinMonster, que aborda estratégias que funcionam sem frustrar os visitantes móveis.
10. Use plug-ins do WordPress compatíveis com dispositivos móveis
Nem todos os plug-ins do WordPress são criados pensando em dispositivos móveis. A escolha dos plug-ins corretos pode fazer uma grande diferença na fluidez do seu site em um telefone.
Procure plug-ins que sejam leves, responsivos e testados em telas pequenas. Algumas boas opções incluem:
- Plugins de formulário compatíveis com dispositivos móveis
- Plug-ins responsivos para brindes ou concursos
- Plug-ins de feed de mídia social que são redimensionados para dispositivos móveis
- Plug-ins de cache do WordPress para carregamento mais rápido
- Plug-ins de menu responsivo
Em um dos meus sites, a mudança para um plug-in de formulário mais leve reduziu pela metade o tempo de carregamento em dispositivos móveis. A experiência foi mais suave, e as conversões aumentaram imediatamente.
Você pode ver mais recomendações neste resumo completo dos melhores plug-ins móveis para WordPress.
11. Tornar a velocidade do site uma prioridade
Um site lento é um fator decisivo no celular. Pesquisas mostram que até mesmo um atraso de 3 segundos pode fazer com que mais da metade dos visitantes abandone o site. Em telas pequenas, onde as pessoas esperam resultados instantâneos, a velocidade é ainda mais importante.
A maneira mais simples de manter seu site rápido é usar um design limpo e evitar a desordem desnecessária. Cada script, imagem ou plug-in extra aumenta o tempo de carregamento.
Algumas maneiras comprovadas de aumentar a velocidade de seu site incluem:
- Redimensionar e compactar imagens grandes
- Use uma rede de distribuição de conteúdo (CDN)
- Ativar o carregamento lento para imagens e vídeos
- Mantenha o WordPress, os temas e os plug-ins atualizados
- Reduza a quantidade de arquivos CSS e JavaScript
- Reduzir processos pesados em segundo plano
Quando otimizei as imagens e adicionei uma CDN em um dos meus sites, o tempo de carregamento em dispositivos móveis caiu pela metade. A taxa de rejeição caiu imediatamente, e os usuários passaram mais tempo em cada página.
Para obter dicas mais detalhadas, confira este guia definitivo sobre velocidade e desempenho do WordPress.
Perguntas frequentes sobre como tornar um site compatível com dispositivos móveis
Espero que este post tenha ajudado você a aprender como tornar um site somente para desktop compatível com dispositivos móveis. Talvez você também goste deste artigo sobre os melhores plug-ins de SEO para WordPress.
Enquanto estiver aqui, não se esqueça de nos seguir no Facebook, Twitter e YouTube para obter mais dicas e tutoriais úteis.
