Como tornar seu site WordPress compatível com dispositivos móveis
Publicados: 2020-10-02Não é nenhum segredo que os sites WordPress otimizados para dispositivos móveis são a nova norma, mas, apesar de parecerem comuns, ainda pode dar um pouco de trabalho para 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 apresentar as 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 plugins WordPress compatíveis com dispositivos móveis
- Use opt-ins otimizados para 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á recorrendo a 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 otimizado para dispositivos móveis proporciona uma experiência de usuário positiva e ajudará seus usuários a encontrar o que estão procurando enquanto estão em trânsito.
Além do UX, há outro motivo importante pelo qual seu site deve ser compatível com dispositivos móveis: o Google. A partir de 2015 (o ano do “Mobilegeddon”), o Google implementou uma grande reformulação em seu algoritmo de busca para recompensar sites considerados “amigáveis para 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 seu site for bem lido em dispositivos móveis, ele terá um desempenho melhor nos resultados de pesquisa do que os sites que não têm. Essa é uma ótima vantagem se você fez 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 exibir 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 e totalmente funcional. O primeiro passo? Avalie seu design atual.
2. Faça o teste de compatibilidade com dispositivos móveis
Seu site pode ficar ótimo em um dispositivo móvel (como seu próprio celular pessoal), mas você realmente precisa testá-lo em uma ampla variedade de tamanhos de tela para saber se ele é 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 compatível com dispositivos móveis que informará 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 para celular do seu site. Se o seu site estiver totalmente otimizado para dispositivos móveis, você receberá uma pequena mensagem entusiasmada de sucesso semelhante a esta:
Se você está vendo vermelho, você tem um pouco de trabalho a fazer. (Vamos chegar a isso em um segundo!)
Ferramenta muito legal, certo? Pois fica ainda melhor.
Para todos os desenvolvedores, o Google também lançou uma API de teste compatível com dispositivos móveis que permite testar URLs com ferramentas automatizadas. A vantagem 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 otimizada para dispositivos móveis do Google para comparar 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 sua versão do WordPress e a versão atual do tema. Se houver atualizações pendentes, comece com elas. Não posso falar por 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 interessantes 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 que um tema não seja compatível com dispositivos móveis. Dito isto, antes de comprar um tema, verifique se ele é exibido bem em qualquer tamanho de tela. Teste o site de demonstração, dimensione a janela do navegador e leia todas as resenhas 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ê achou que era a combinação perfeita, há tantos temas WordPress para escolher que eu garanto que você encontrará outro que funcionará para o seu site.
Se você estiver procurando por temas gratuitos, certifique-se de ver como fica com o seu próprio conteúdo – como tenho certeza que você sabe, as coisas nem sempre são iguais, então certifique-se de que ele exiba seu conteúdo maneira que você gostaria no celular.
Não sabe por onde começar? Ao hospedar seu site WordPress no Flywheel, você terá acesso a mais de 30 temas premium do StudioPress (incluindo o Genesis Framework!) Esses temas são totalmente responsivos para que fiquem ótimos em qualquer dispositivo, além de você poder alternar facilmente entre eles (em vez de se sentir preso ao tema premium “o único” que você decidiu comprar).
Como criar seu próprio tema WordPress responsivo
Se você preferir seguir o caminho DIY para criar um site compatível com dispositivos móveis, certifique-se de começar do zero ou em um ambiente de teste – você nunca deve fazer mudanças drásticas como essa em seu site ao vivo.
Eu recomendo usar o Local para criar um site WordPress local diretamente em 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 você só precisa começar do zero se quiser.
Há também um recurso chamado Live Links, que gera uma URL compartilhável para o site local. Isso permite enviá-lo a um cliente ou acessá-lo em 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 de uma lousa totalmente em branco e criando seu próprio tema, apenas certifique-se de usar consultas de mídia para estabelecer limites para o design e pensar em elementos um de cada vez.
Pergunte a si mesmo como as imagens devem ser dimensionadas, como deve ser a navegação e se algum conteúdo será ocultado 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 práticas recomendadas para web design responsivo
- Trabalhando com imagens responsivas no WordPress
4. Use plugins responsivos
Plugins adicionam funcionalidade ao seu site WordPress, então eles 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 de CTA), verifique se 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 para desktop, mas se ele 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, apenas preste atenção aos recursos de um plugin e tente ler comentários 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 em todos os tamanhos de tela.
Contanto que você tenha um tema responsivo e plugins que se comportem bem em dispositivos móveis, seu site estará em boa forma para exibição em telas menores.
5. Evite adicionar pop-ups em dispositivos móveis
Se você está tentando construir uma lista de e-mail com seu site WordPress, suponho que você tenha uma variedade de opt-ins em seu site. A maioria dos formulários de inscrição 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 (se eles são exibidos imediatamente ou depois que um usuário estiver no site por algum tempo) e qualquer outro tipo de opt-in que um usuário deva dispensar 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 seguir as práticas recomendadas, evite pop-ups em seu design para dispositivos móveis. Como você faz 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 plano de fundo em sua página inicial pode ficar ótima em um computador desktop, mas se não for dimensionada corretamente, poderá 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 o dimensionamento 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.
Por fim, 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 geralmente são alguns dos maiores em um site, o que os torna a causa de barras de carregamento e longos tempos de espera. Para ajudar a otimizar seu site e aumentar o desempenho em dispositivos móveis, tente otimizar suas imagens usando o menor tamanho de arquivo possível, mantendo a qualidade necessária. (Por exemplo, talvez seu site mobile carregue uma versão menor de uma imagem do que o desktop!)
7. Priorize o desempenho do site
A velocidade da página é importante há muito tempo em termos de como seu site é classificado nas pesquisas de desktop do Google, 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 host do WordPress também desempenham um grande papel.
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 plugins 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 será para você.
Quanto ao seu host WordPress, certifique-se de usar um parceiro de qualidade que inclua serviços como tecnologia de cache, CDN e infraestrutura com fornecedores confiáveis, como o Google Cloud Platform. Se você está hospedando seu site no Flywheel, você está definido em todas essas áreas. Além disso, oferecemos nosso complemento Performance Insights, que o ajudará a dar um passo adiante na solução de problemas para garantir que seu site tenha o melhor desempenho em todos os dispositivos.
À medida que mais e mais pessoas usam seus smartphones ou tablets para acessar a internet, os designers de sites precisam se ajustar para lidar com esses padrões de uso. Então, seu site está pronto para seus visitantes móveis? Quais 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!) do StudioPress
Economize tempo (e dinheiro!) hospedando com o Flywheel 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 Flywheel manterá o desempenho do seu site voando, ajudando as velocidades das páginas a permanecerem rápidas e o seu site bem classificado.
Este artigo foi originalmente publicado em 22-17-2017. Foi atualizado pela última vez em 10-2-2020.