Como tornar seu site WordPress compatível com dispositivos móveis
Publicados: 2023-02-12Não é nenhum segredo que os sites WordPress compatíveis com dispositivos móveis são a nova norma, mas, apesar de parecerem comuns, ainda pode dar um pouco de trabalho criar um site bonito e responsivo. Este guia ajudará você a entender por que é importante ter um site compatível com dispositivos móveis, como criar um no WordPress e apresentá-lo às melhores ferramentas para criar um site responsivo.
Para tornar seu site WordPress compatível com dispositivos móveis, você precisa:
- Entenda por que o web design responsivo é importante
- Faça o teste de compatibilidade com dispositivos móveis do Google
- Use um tema WordPress responsivo (ou crie o seu próprio)
- Considere plug-ins WordPress compatíveis com dispositivos móveis
- Use opt-ins compatíveis com dispositivos móveis
- Pense em termos de mídia responsiva
- Priorize o desempenho do site
Preparar? Vamos mergulhar!
1. Por que os sites compatíveis com dispositivos móveis são importantes?
No quarto trimestre de 2019, 61% das pesquisas do Google ocorreram em um dispositivo móvel. Isso significa que mais da metade da população está optando por telefones e tablets em vez de dispositivos de desktop tradicionais; portanto, para acompanhá-los, seu site precisa estar pronto para ser exibido em qualquer tamanho de tela. Um design compatível com dispositivos móveis proporciona uma experiência de usuário positiva e ajuda os usuários a encontrar o que procuram quando estão em trânsito.
Além do UX, há outro motivo importante para o seu site ser compatível com dispositivos móveis: o Google. A partir de 2015 (o ano do “Mobilegeddon”), o Google implementou uma grande reformulação de seu algoritmo de busca para recompensar sites considerados “compatíveis com dispositivos móveis”. A mudança se resumiu a um ponto de dados crucial: se o seu site é responsivo ou não.
Isso significa que, se o seu site for lido bem em dispositivos móveis, ele terá um desempenho melhor nos resultados de pesquisa do que os sites que não o fazem. Essa é uma ótima vantagem se você tiver feito o trabalho de criar um site compatível com dispositivos móveis! Mas também pode prejudicar o tráfego do seu site se não estiver à altura da tarefa de exibição em telas menores.
Felizmente, se o seu site WordPress ainda não é compatível com dispositivos móveis, existem muitas ferramentas para ajudá-lo a se atualizar e criar um site responsivo totalmente funcional. O primeiro passo? Compare seu design atual.
2. Faça o teste de compatibilidade com dispositivos móveis
Seu site pode parecer ótimo em um dispositivo móvel (como seu celular pessoal), mas você realmente precisa testá-lo em uma ampla variedade de tamanhos de tela para saber se é realmente responsivo. Mesmo que você tenha um monte de telefones antigos por aí, pode ser um processo demorado para testá-lo em todas as telas.
Para simplificar as coisas, o Google nos presenteou com uma ferramenta gratuita de teste de compatibilidade com dispositivos móveis que informa se seu site se qualifica como “compatível com dispositivos móveis” ou não. Basta inserir o URL do seu site para uma avaliação rápida do design móvel do seu site. Se o seu site estiver totalmente otimizado para dispositivos móveis, você receberá uma pequena mensagem de sucesso com esta aparência:
Se você está vendo vermelho, você tem um pouco de trabalho a fazer. (Vamos chegar a isso em um segundo!)
Pequena ferramenta muito legal, certo? Bem, fica ainda melhor.
Para todos os desenvolvedores, o Google também lançou uma API de teste de compatibilidade com dispositivos móveis que permite testar URLs com ferramentas automatizadas. O benefício disso é que você pode testar rapidamente mais páginas, mas também pode monitorar as páginas mais importantes do seu site sem precisar recorrer manualmente à ferramenta do navegador o tempo todo. Pontuação!
Depois de usar a ferramenta compatível com dispositivos móveis do Google para avaliar seu site, é hora de começar a fazer melhorias. Vamos começar com o seu tema WordPress.
3. Use (ou crie) um tema WordPress responsivo
Se você instalou recentemente um novo tema WordPress, há uma boa chance de você estar bem neste departamento. Se o seu tema já existe há algum tempo, talvez seja hora de uma pequena atualização.
Primeiras coisas primeiro: verifique novamente sua versão do WordPress e a versão atual do tema. Se houver atualizações pendentes, comece com elas. Não posso falar de todos os temas disponíveis, mas algumas atualizações conterão elementos compatíveis com dispositivos móveis e podem ser suficientes para corrigir seus problemas. O WordPress 4.4, por exemplo, adicionou algumas funcionalidades realmente legais para imagens responsivas (você pode ler tudo sobre isso aqui).
Se as atualizações não funcionarem, provavelmente é hora de procurar um novo tema ou considerar criar o seu próprio. Vamos explorar as duas opções.
Os melhores temas WordPress compatíveis com dispositivos móveis
Realisticamente, muitos temas do WordPress hoje em dia são responsivos – provavelmente é mais raro um tema não ser compatível com dispositivos móveis. Dito isso, antes de comprar um tema, verifique se ele é bem exibido em qualquer tamanho de tela. Teste o site de demonstração, dimensione a janela do navegador e leia as avaliações que encontrar para procurar a experiência de usuários reais.
Se você está feliz com o que vê, vá em frente! Mas se algo não parece certo, fique longe. Mesmo se você pensou que era a combinação perfeita, há tantos temas WordPress para escolher que garanto que você encontrará outro que funcionará para o seu site.
Se você estiver procurando temas gratuitos, certifique-se de ver como fica com seu próprio conteúdo - como tenho certeza de que você sabe, as coisas nem sempre parecem as mesmas, portanto, certifique-se de exibir seu conteúdo o maneira que você gostaria no celular.
Não sabe por onde começar? Ao hospedar seu site WordPress no WP Engine, você terá acesso aos temas do StudioPress (incluindo o Genesis Framework!) Gratuitamente com seu plano. Esses temas são totalmente responsivos para que fiquem ótimos em qualquer dispositivo, além de você poder trocá-los facilmente (em vez de se sentir preso ao tema premium "único" que você decidiu comprar).
Como criar seu próprio tema WordPress responsivo
Se preferir seguir o caminho DIY para criar um site compatível com dispositivos móveis, comece do zero ou em um ambiente de teste – você nunca deve fazer alterações drásticas como essa em seu site ativo.
Eu recomendo usar o Local para criar um site WordPress local diretamente na sua máquina. Este aplicativo gratuito permitirá que você experimente o conteúdo do seu coração, sem nunca quebrar seu site atual (o que é essencial ao passar por uma reformulação). Você pode até importar seu site existente para o Local, então só precisa começar do zero se quiser.
Há também um recurso chamado Live Links, que gera um URL compartilhável para o site local. Isso permite que você o envie para um cliente ou acesse seu telefone, para que você possa testar facilmente a aparência do site em um dispositivo móvel.
Se você criar um tema filho com base em um tema pai responsivo, estará em boa forma. Se você está começando do zero e criando seu próprio tema, certifique-se de usar consultas de mídia para estabelecer limites para o design e pense nos elementos um de cada vez.
Pergunte a si mesmo como as imagens devem ser dimensionadas, como deve ser a aparência da navegação e se algum conteúdo ficará oculto em um dispositivo móvel. Aqui estão alguns tutoriais que podem te ajudar:
- Como criar um menu de navegação responsivo no WordPress
- 7 dicas de melhores práticas para web design responsivo
- Trabalhando com imagens responsivas no WordPress
4. Use plugins responsivos
Os plug-ins adicionam funcionalidade ao seu site WordPress, portanto, nem sempre adicionam algo visualmente ao front-end. Mas, caso eles adicionem um elemento físico ao seu site (como um widget ou botão CTA), certifique-se de que ele se adapta bem a todos os tamanhos de tela ou, pelo menos, oferece a opção de desativá-lo em tamanhos de tela menores.
Por exemplo, um widget de barra lateral é uma adição maravilhosa a um site de desktop, mas se dominar o design móvel ou não for reduzido, não proporcionará uma experiência de usuário muito boa.
Assim como os temas, preste atenção aos recursos de um plug-in e tente ler as análises ou encontrar uma demonstração antes de comprar um. E sempre que você ativar um novo plug-in, lembre-se de fazer uma rápida verificação de qualidade do seu site para garantir que ele esteja dimensionado corretamente nos tamanhos de tela.
Contanto que você tenha um tema responsivo e plug-ins que se comportem bem em dispositivos móveis, seu site estará em ótimas condições para exibição em telas menores.
5. Evite adicionar pop-ups em dispositivos móveis
Se você está tentando criar uma lista de e-mail com seu site WordPress, imagino que você tenha vários opt-ins em seu site. A maioria dos formulários de opt-in por e-mail funciona bem em dispositivos móveis (supondo que eles sejam dimensionados e fáceis de usar).
Os pop-ups, no entanto, são uma fera diferente. O Google começou a penalizar sites com intersticiais intrusivos, também conhecidos como opt-ins que cobrem o conteúdo de um site. Isso inclui pop-ups (quer sejam exibidos imediatamente ou depois que o usuário estiver no site por algum tempo) e qualquer outro tipo de opção que o usuário deva ignorar antes de acessar o conteúdo da página. Você pode ler tudo sobre a posição do Google sobre o assunto aqui.
Para manter seu site WordPress compatível com dispositivos móveis e seguindo as práticas recomendadas, evite pop-ups em seu design móvel. Como você fará isso dependerá do serviço que alimenta seus opt-ins, mas a maioria dos provedores deve ter a opção de desativar pop-ups intrusivos em dispositivos móveis.
6. Crie estratégias para mídia responsiva
Esteja você trabalhando com um site de portfólio, um blog diário ou um site de comércio eletrônico, uma peça importante do quebra-cabeça responsivo é considerar a mídia em seu site. Essa grande imagem de fundo em sua página inicial pode parecer ótima em um computador desktop, mas se não for dimensionada corretamente, pode perder todo o contexto e levar a uma experiência de visualização difícil em um telefone. Então, regra número um para mídia responsiva? Pense em como as coisas escalam.
Se dimensionar não for realmente a melhor solução para seu site, você também pode considerar ocultar determinados elementos quando seu site for carregado em um dispositivo móvel. Isso ajudaria a simplificar a experiência e levar os usuários ao conteúdo mais importante mais rapidamente.
Finalmente, você também precisa ter em mente o tamanho do arquivo da mídia que está incluindo em seu site. Isso não apenas melhorará a experiência móvel, mas também o tempo de carregamento da área de trabalho! Os arquivos de mídia costumam ser alguns dos maiores em um site, o que os torna a causa de barras de carregamento e longos tempos de espera. Para ajudar a simplificar seu site e aumentar o desempenho móvel, tente otimizar suas imagens usando o menor tamanho de arquivo possível, mantendo a qualidade necessária. (Por exemplo, talvez seu site móvel carregue uma versão menor de uma imagem do que a versão desktop!)
7. Priorize o desempenho do site
A velocidade da página tem sido importante há muito tempo em termos de classificação do seu site nas pesquisas do Google para desktop, mas a partir de julho de 2018, agora também é o caso das classificações para dispositivos móveis. Combine isso com a estatística acima de que mais de 60% das pesquisas na Internet estão usando dispositivos móveis, e o desempenho do seu site (em todos os dispositivos) agora é mais importante do que nunca.
As imagens são uma grande parte da equação de desempenho, mas seu código e o host do WordPress também desempenham um papel importante.
Quando se trata de seu código, considere ações como minificação (especialmente se estiver trabalhando com um tema personalizado). Faça um inventário de todos os plug-ins instalados em seu site e desative e desinstale os que não são mais necessários. Basicamente, quanto mais organizado você mantiver os elementos que alimentam seu site, melhor você estará.
Quanto ao seu host WordPress, certifique-se de usar um parceiro de qualidade que inclua serviços como tecnologia de cache, CDN e infraestrutura fornecida por provedores confiáveis, como o Google Cloud Platform. Se você estiver hospedando seu site no WP Engine, estará em todas essas áreas.
À medida que mais e mais pessoas usam seus smartphones ou tablets para acessar a Internet, os designers de sites precisam se ajustar para atender a esses padrões de uso. Então, seu site está pronto para seus visitantes móveis? Que aspectos do seu site você teve que mudar? Quais ferramentas você usou para criar um design responsivo? Compartilhe sua experiência nos comentários!
Obtenha acesso a mais de 30 temas premium (e compatíveis com dispositivos móveis!)
Economize algum tempo (e dinheiro!) Com a hospedagem do WordPress pelo WP Engine e obtendo acesso aos temas do StudioPress e ao Genesis Framework. Os temas são totalmente responsivos e fáceis de personalizar, economizando tempo ao tentar criar um site compatível com dispositivos móveis. Além disso, a poderosa plataforma do WP Engine manterá o desempenho do seu site otimizado, ajudando as velocidades da página a permanecerem rápidas e a classificação do seu site bem.