Como tornar um site WordPress responsivo para dispositivos móveis

Sites responsivos são hoje o padrão da indústria, devido ao grande número de usuários que navegam principalmente em dispositivos móveis. Para ilustrar a profundidade desse impacto, gigantes da indústria, como o Google, agora recompensam sites compatíveis com dispositivos móveis em classificações de pesquisa, para ajudar a impulsionar mais sites para atender a dispositivos não desktop.

Em suma, sites responsivos usam o mesmo código de site em todas as plataformas, mas oferecem otimização para cada experiência, independentemente do meio de visualização. Como consequência, configurar um site responsivo pode significar reconstruir todo o seu design ou simplesmente fazer alguns ajustes no existente.

Neste artigo, você aprenderá como os sites do WordPress podem ser otimizados para dispositivos móveis usando um design responsivo. Também explicaremos a importância da capacidade de resposta para Search Engine Optimization (SEO). Vamos quebrar!

O WordPress é compatível com dispositivos móveis?

O WordPress é um sistema de gerenciamento de conteúdo (CMS) que permite projetar o front-end do seu site para atender aos seus requisitos exatos. Isso significa que ele pode ser facilmente otimizado para dispositivos móveis.

Os temas padrão responsivos estão disponíveis desde 2011. Muitos temas de terceiros agora também oferecem design responsivo pronto para uso. Aqueles que não o fazem geralmente estão desatualizados em muitas outras áreas.

O que é Design Responsivo?

Vamos abordar como o design responsivo se aplicará ao seu site WordPress. O design responsivo é uma forma de organizar o conteúdo do seu site para que ele possa responder dinamicamente ao tamanho da tela em que aparece. Isso significa que a experiência do usuário é tão boa em um smartphone quanto em um laptop.

Para alcançar essa excelente experiência em todos os dispositivos, os designers criarão grades de conteúdo fluido e flexibilidade de código em imagens por meio do CSS de um site para reorganizar o HTML em resposta direta ao tamanho e resolução de uma tela.

Se você quiser um ótimo exemplo, abra o Mashable.com em uma nova janela (supondo que você ainda não esteja em um dispositivo móvel). Quando estiver lá, redimensione a janela do navegador para torná-la cada vez menor e observe como o site se reorganiza de acordo

À medida que você reduz a janela, as imagens e os blocos de conteúdo correm para caber na janela cada vez menor de acordo com as grades fluidas que o designer criou. No mínimo, você fica com a aparência do site do Mashable em um iPhone. É lindo e fácil de ler. Abra a janela novamente e eles respondem correndo de volta para sua configuração de “área de trabalho”.

O site se reorganiza porque existem media queries CSS que aplicam regras diferentes à página, dependendo do tamanho do dispositivo (neste caso, a janela do navegador) que está visualizando o site. O HTML permanece o mesmo, é simplesmente reorganizado pelo CSS. As regras de CSS podem ser aplicadas para reorganizar tudo no site, inclusive atendendo a vários tamanhos de imagem de acordo com a resolução do dispositivo. Isso é muito legal quando você deseja fazer coisas como fornecer imagens aprimoradas de retina para dispositivos iOS especificamente.

Aplicativos móveis x sites responsivos

A escolha de um aplicativo em vez de um site responsivo se resume ao objetivo do site. A maioria dos sites ficará bem com um design responsivo que pode se adaptar aos dispositivos. Um aplicativo móvel entra em jogo quando seus usuários desejam uma funcionalidade muito específica em seu dispositivo móvel que seja diferente do que o site completo forneceria. Seu banco provavelmente oferece um aplicativo móvel para que você possa verificar rapidamente seu saldo na fila do Starbucks. O Facebook e o Twitter também ajustam suas funcionalidades em seus aplicativos para se adequar ao uso do celular.

Somente se seus usuários precisarem de um conjunto específico de funções de seus telefones, diferente do que precisam de seu site principal, um aplicativo nativo é algo a considerar.

Considerações de desempenho para sites responsivos

Um design responsivo afetará o desempenho geral do seu site. Carregar muitos CSS e vários tamanhos de imagens para responder aos tamanhos dos dispositivos pode ser caro do ponto de vista do processamento de back-end. Como parte da avaliação do design responsivo, é importante priorizar o desempenho como um recurso. Os usuários ainda esperam que um site para dispositivos móveis seja um pouco mais lento, mas não perdoarão se tentarem abrir seu site para mostrar a um amigo ou seu par e tiverem que esperar mais do que alguns segundos.

Do ponto de vista técnico, ao entregar seu site a um dispositivo móvel que está usando dados de celular, você perde até 0,5s desde o início. Por exemplo, buscar 40 KB em 4G leva 700 ms em condições ideais. A latência da rede e as variações situacionais também aumentarão o tempo de carregamento. Você não pode controlar as variáveis ​​da rede celular, por isso é fundamental que você crie seu site responsivo com desempenho como um recurso desde o início.

Certifique-se de ter feito o seguinte para garantir que seu site seja otimizado para celular.

• Otimize suas imagens: detecte automaticamente o tamanho da tela do dispositivo para criar, armazenar em cache e fornecer o tamanho de imagem correto.
• Reduza suas solicitações HTTP: minimize a quantidade de CSS e JavaScript que você precisa usar e, em seguida, armazene em cache todo o resto.
• Carregar ativos condicionalmente: botões grandes de mídia social, imagens e similares são ótimos para um dispositivo maior, mas não afetarão a experiência do usuário em dispositivos menores. Planeje seu projeto para carregar apenas o que for absolutamente necessário.
• Carregamento preguiçoso: se você conseguir carregar certos ativos, JavaScript em particular, depois dos elementos de página mais importantes, faça-o. No momento em que seus usuários tiverem consumido o conteúdo que desejavam em primeiro lugar, esses outros ativos terão carregado.

Seu site WordPress precisa ser responsivo?

Cada vez mais, a resposta padrão para essa pergunta é sim, principalmente com a ampla disponibilidade de temas responsivos do WordPress. Se seu site está para ser redesenhado ou está em processo de design, é importante oferecer aos usuários uma experiência de qualidade em qualquer dispositivo em que estejam.

Com isso em mente, terminarei com algumas perguntas para você e sua equipe avaliarem se seu WordPress deve ser projetado de forma responsiva.

• Qual é o caso de uso para o seu site? O consumo móvel será importante? As chances são de que a resposta seja “sim, e cada vez mais a cada ano”. Haverá exceções, mas não muitas.
• Quem são seus usuários? Quanto mais técnicos eles forem, quanto mais avançados, mais provável é que eles esperem um site responsivo para cada marca com a qual se associam.
• Você tem o orçamento? Este é um grande problema. Um site responsivo é um pouco mais caro para construir inicialmente, mas é mais barato construir um único site responsivo do que planejar construir duas versões separadas de seu site e, em seguida, gerenciar a manutenção de ambos.
• Você está pronto para aprender um novo tipo de design? O design responsivo apresenta muitos novos conceitos e formas de entender o conteúdo digital. será importante trabalhar com uma equipe de design que possa não apenas projetar algo bonito, mas também educá-lo ao longo do caminho.

Criando um Web Design WordPress Responsivo

Os designs estáticos existentes geralmente podem ser convertidos em temas responsivos. Aqui estão alguns dos elementos a serem considerados ao longo do processo de conversão:

• Zoom padrão do navegador
• Larguras e alturas dos elementos de fluido
• Otimização de imagem
• Pontos de interrupção específicos do design
• Menus responsivos separados para dispositivos móveis

Você também deve testar seu design atualizado em vários dispositivos e considerar elementos extras, como tabelas responsivas, em seus testes. No entanto, a maneira mais fácil de tornar o WordPress responsivo é escolher um tema responsivo pré-construído desde o início.

Escolhendo o Tema WordPress Certo

Antes de começar a pesquisar nos mais de 10.000 temas do WordPress disponíveis hoje, é uma boa ideia fazer uma lista dos recursos que você deseja que seu site tenha e usar essa lista como ponto de partida.

Se você não tem certeza sobre os tipos de recursos a serem procurados, há algumas linhas de base nas quais você pode insistir para ajudá-lo a restringir as coisas: otimização de mecanismo de pesquisa (SEO) e tempos de carregamento de página rápidos (independentemente do dispositivo) são duas coisas que qualquer tema deve ter.

Embora existam muitos temas do WordPress que não possuem essa funcionalidade integrada, o uso de um tema que tenha esses dois recursos proporcionará uma experiência de usuário final muito melhor em seu site.

O conjunto de Temas WordPress Premium do WP Engine, por exemplo, são todos otimizados para mecanismos de pesquisa e responsivos para dispositivos móveis, o que significa que todos carregam rapidamente em qualquer dispositivo. Esses temas de ótima aparência foram criados para uma ampla variedade de casos de uso, e empresas de todas as formas e tamanhos os estão usando para alimentar sua presença online.

O acesso a esses temas também está incluído em todos os planos do WP Engine, o que significa que os clientes do WP Engine podem usar todos eles sem nenhum custo extra.

Plug-ins do WordPress para dispositivos móveis

Os telefones celulares abrem muito potencial para recursos como notificações push e carregamento persistente em conexões lentas. No entanto, embora existam soluções para ajudar a transformar seu site em um aplicativo da Web para dispositivos móveis e levar o conceito de compatibilidade com dispositivos móveis para o próximo nível, muitas ainda estão em fase de desenvolvimento e teste.

Isso significa que algumas das funcionalidades que você esperaria podem estar faltando. No entanto, existem vários plug-ins móveis do WordPress que podem ajudá-lo a melhorar seu site de várias maneiras.

1. JetPack

Embora existam muitas soluções disponíveis, o plug-in Jetpack é uma opção muito popular. Você o encontrará no Diretório de plug-ins, mas também possui opções para criar um tema móvel simples em seu site.

Uma das melhores coisas sobre o Jetpack é que ele é bem conservado. Isso significa que haverá atualizações frequentes para garantir sua segurança e funcionalidade. É também uma das ferramentas com mais recursos que você pode encontrar. O plug-in básico é gratuito e vem com muitas opções. A desvantagem é que existem tantos recursos que a interface pode parecer confusa no início.

Além disso, se você deseja backups diários, temas personalizados e ferramentas de SEO, precisará investir na versão premium do Jetpack. Dependendo de suas necessidades, você pode obter o plug-in premium para uso pessoal por $ 39 por ano, com o nível superior chegando a $ 299 anualmente.

2. WPtouch

Além disso, você pode explorar o WPtouch, um plug-in popular que pode criar um site móvel a partir do seu site existente. Um dos principais benefícios de usar este plug-in é que você pode personalizar a versão móvel sem interromper ou alterar seu site original.

A versão gratuita também possui uma funcionalidade bastante robusta. Se você está procurando uma aparência diferente, no entanto, terá que comprar a versão profissional. Os planos de preços Pro começam em $ 79 por ano e variam até $ 359 por ano para licenciamento de nível empresarial.

3. Pacote Móvel WordPress

Embora o WordPress Mobile Pack não tenha sido testado com a versão mais recente do WordPress, é um plug-in popular para criar um Progressive Web Application (PWA) a partir do seu site existente. Isso significa que os usuários do seu site terão uma experiência 'semelhante a um aplicativo', sem exigir que você coloque recursos na programação de um aplicativo para download para uma loja de aplicativos.

Com este plug-in, você poderá enviar mensagens de banner aos usuários, alertando-os sobre a opção de adicionar seu site às telas iniciais. Suas páginas serão armazenadas em cache e carregadas muito rapidamente. A funcionalidade básica deste plug-in é gratuita, mas você terá que comprar a versão pro para obter acesso a mais temas, opções de personalização e a capacidade de sincronizar determinados conteúdos.
A versão pro do plug-in tem três níveis para escolher. O pacote Freelancer começa em $ 99 por ano e pode ser usado em três domínios. Os níveis de preço atingem o máximo com a opção VIP, de $ 499 por ano para dez licenças de domínio.

Imagens responsivas

O WordPress oferece imagens responsivas em destaque por padrão desde a versão 4.4. No entanto, especialmente para sites que usam o código antigo, há um snippet simples que você pode adicionar à sua folha de estilo para garantir que as imagens nunca pareçam muito grandes em dispositivos pequenos:

img {
max-width: 100%;
height: auto;
}

Embora existam muitas maneiras de garantir o desempenho ideal da imagem responsiva, esse snippet garante que todas as suas imagens sejam responsivas como linha de base.

Finalmente, a maioria das imagens é adequada para inclusão em um site responsivo, embora a escalabilidade deva ser um fator. Por exemplo, se você incluir uma imagem com muito texto, pode não ser fácil de ler em dispositivos móveis. Nesse caso, talvez seja melhor escolher uma imagem diferente ou fornecer uma maneira de o texto ser lido independentemente da imagem.

Menus responsivos

Existem duas escolas primárias de pensamento sobre a criação de menus responsivos:

1. Faça um menu que funcione em todos os tamanhos.
2. Crie dois menus: um para telas grandes e outro para telas pequenas. Apenas um será exibido por vez, dependendo do tamanho da tela em uso.

A abordagem de tamanho único funciona melhor para menus menores, já que otimizar o CSS para legibilidade móvel requer apenas alguns ajustes simples. Nessa situação, o menu fica sempre visível para o usuário independente do tamanho do dispositivo.

No entanto, se um menu for muito grande para ser reduzido facilmente para dispositivos móveis, você pode precisar de uma segunda versão dedicada a telas menores. Nesse caso, o menu grande só é visível em telas grandes e um ícone de menu móvel está presente em telas menores.

Um exemplo típico dessa abordagem é o ícone do menu de hambúrguer, que mostra o menu móvel completo quando clicado. Você também pode usar a seleção diversificada de plugins do WordPress para ajudar na criação de menus responsivos. Vejamos três opções.

1. UberMenu

Uma opção que você pode experimentar é o UberMenu. Por US$ 25, você terá acesso a atualizações futuras e seis meses de suporte. O UberMenu pode ajudá-lo a criar menus totalmente responsivos e fáceis de usar. Infelizmente, a menos que seu tema seja específico do UberMenu, você provavelmente terá que fazer algumas alterações manuais para que seu tema funcione corretamente.

2. Mega Menu Máximo

Outra opção é o plugin Max Mega Menu. Esta ferramenta tem uma opção gratuita no WordPress Plugin Directory e funciona com seus menus existentes para convertê-los em 'mega' menus:

A versão gratuita também possui muitos recursos de menu móvel, como suporte nativo para telas sensíveis ao toque. Para obter acesso a mais fontes e opções de alternância móvel, você precisará verificar um dos três níveis de preços. A versão premium do plug-in começa em $ 29 por ano e varia até $ 99 por ano para licenças de vários sites.

3. Menu Responsivo

Outro plug-in popular e bem avaliado que você pode conferir para tornar seus menus compatíveis com dispositivos móveis é o plug-in de menu responsivo. Esta solução possui mais de 150 opções de personalização diferentes, tudo dentro de uma interface fácil de usar.

Você terá a flexibilidade de alterar quase todos os aspectos de seus menus na página de configurações do plug-in. No entanto, se você estiver procurando por animações e mais fontes, precisará verificar a atualização do plug-in do menu responsivo.

A versão gratuita do plugin pode trazer as funcionalidades que você precisa, já que a lista de opções é bem extensa. Se você atualizar, poderá obter uma licença de site único por US$ 29 ou obter licenças ilimitadas por US$ 99. O custo do plug-in é uma taxa única e você receberá atualizações gratuitas vitalícias.

Tabelas responsivas

Por padrão, as tabelas ocupam tanto espaço quanto seu conteúdo (ou mais). Isso pode levar a tabelas extra largas arruinando os layouts móveis.

Infelizmente, tabelas cheias de conteúdo tornam-se difíceis de ler quando reduzidas para caber na largura de uma página móvel. O design responsivo não se resume a espremer dados em uma tela pequena. Em vez disso, trata-se de tornar tudo amigável, independentemente do dispositivo.

Para uma solução rápida e simples, você pode adicionar capacidade de resposta básica às suas tabelas com este trecho de CSS:

table {
width: 100%;
border-collapse: collapse;
}

No entanto, você não precisa parar por aí. A menos que você tenha tabelas pequenas, recomendamos otimizar cada uma com base no tipo de conteúdo que apresenta. Dependendo dos dados em suas tabelas, há várias opções responsivas que você pode escolher para obter a melhor legibilidade possível.

No entanto, se você está procurando uma solução de plug-in para tabelas responsivas, está com sorte! Existem várias opções, mas vamos recomendar três em particular.

1. TablePress

Em primeiro lugar, o plug-in TablePress é uma opção popular, bem mantida e altamente avaliada. Você poderá criar e incorporar belas tabelas com shortcodes. No entanto, para obter tabelas realmente responsivas, você precisará instalar uma extensão do TablePress. Embora também sejam gratuitos, é recomendável que você faça uma doação para o desenvolvedor.

2. Construtor de tabelas WP

Se você está procurando uma opção de criador de tabelas de arrastar e soltar cinco estrelas, o WP Table Builder pode ser para você. Um plug-in um tanto novo, mas bem recebido, sua interface de arrastar e soltar facilita a criação de tabelas responsivas para o seu site.

Este também é um plugin totalmente gratuito. A única desvantagem real dessa opção é que ela vem com apenas cinco opções de dados no momento. Você está um tanto limitado a texto, imagens, botões, listas e avaliações com estrelas.

3. wpDataTables

O terceiro plug-in que recomendamos verificar é o wpDataTables. Com esta ferramenta, você pode criar rapidamente tabelas e gráficos a partir de dados existentes do Excel, CSV, PHP ou outros. Isso significa que você pode pegar grandes conjuntos de dados e torná-los acessíveis em seu site.

Este plug-in também está pronto para Gutenberg, facilitando a adição de tabelas às páginas e postagens do seu site depois de personalizá-las nas configurações do plug-in. No entanto, você ficará um pouco limitado pela versão gratuita deste plug-in.
Por exemplo, você não poderá criar tabelas baseadas em consultas MSQL ou extrair informações do Google Spreadsheets, a menos que faça upgrade. A versão premium começa em $ 59 por ano para o nível de preço básico e chega a $ 249 por ano para o pacote de desenvolvedor.

Adicionando recursos multilíngues

Como a adoção do WordPress continuou a crescer em todo o mundo, surgiu uma necessidade crescente de funcionalidade multilíngue, que permite que os sites sejam traduzidos para idiomas locais com base na localização do usuário.

Esse tipo de funcionalidade é enorme para empresas com clientes em vários países e, com o WordPress, adicioná-lo ao seu site não é tão desafiador quanto você imagina. Na verdade, isso pode ser feito instalando um plug-in como o Weglot, que permite tornar seu site multilíngue em minutos – sem a necessidade de código.

O Weglot também é compatível com todos os temas e plugins do WordPress, o que significa que funcionará em qualquer tema que você usar e não causará problemas com seus outros plugins. Quando adicionado a um dos Temas WordPress Premium do WP Engine, o Weglot ajuda os proprietários de sites a criar um site responsivo para dispositivos móveis compatível com SEO que pode ser acessado em qualquer idioma.

Confira este guia para saber mais e visite o WP Engine para conhecer nossos diferentes planos e outros recursos e funcionalidades que acompanham nossa plataforma de experiência digital para WordPress.

Responsividade móvel para SEO

Simplificando, sites otimizados para dispositivos móveis são recompensados ​​pelo Google em resultados de pesquisa orgânica. Entre 2015 e 2016, várias atualizações foram adicionadas ao algoritmo de classificação para favorecer sites responsivos. É importante observar que, como a velocidade desempenha um papel importante na facilidade de uso para usuários móveis, isso também contribui para melhores classificações nos mecanismos de pesquisa.

Claro, sites responsivos de carregamento rápido dependem de hospedagem estelar para ter sucesso. Quando você escolhe uma empresa de hospedagem de qualidade, como o WP Engine (oferecemos PHP 7 como padrão e uma rede de entrega de conteúdo gratuita em planos de nível superior), você notará tempos de carregamento mais rápidos e operação mais suave.

Crie responsivamente com o WP Engine

Trabalhar para um site responsivo deve ser uma prioridade em nosso mundo dependente de dispositivos móveis. Há muito o que acompanhar, mas aqui no WP Engine podemos ajudar a apontar os melhores recursos para desenvolvedores WordPress e temas altamente responsivos para usuários móveis.

Além disso, temos uma grande variedade de planos e soluções para o seu site. Ajudaremos você a criar de forma responsiva em nossa plataforma de experiência digital e você não precisará se preocupar em perder visitantes por causa do tamanho da tela!