Como adicionar uma visualização móvel do WordPress com Mobilook

Você já quis visualizar seu site em um dispositivo móvel durante o desenvolvimento? Nesse caso, você ficará satisfeito em saber que pode fazer isso com o plugin Mobilook. Com ele, você pode simular a aparência do seu site em vários tamanhos de tela populares, incluindo smartphones e tablets.

É uma ferramenta útil que ajuda você a avaliar o lado móvel do seu site. Isso se tornou uma preocupação obrigatória desde que o Google iniciou a indexação que prioriza os dispositivos móveis. Essencialmente, o Google indexará primeiro a versão móvel do seu site, portanto, se não for boa, sua classificação irá despencar.

Hoje vou demonstrar como realizar um teste de compatibilidade com dispositivos móveis com o Mobilook.

Por que os usuários móveis são importantes

Em maio de 2021, os usuários móveis representavam 55,31% do tráfego da Internet. E tem crescido consistentemente ano após ano. Assim, os usuários móveis são a base de usuários mais importante para a maioria dos proprietários de sites.

E graças à iniciativa de indexação mobile-first do Google, os desenvolvedores de sites não podem ignorá-la.

O Google realiza um teste para determinar se o seu site é compatível com dispositivos móveis e, se for aprovado, você está pronto para prosseguir. Assim, mesmo que você tenha um ótimo site para desktop, você pode prejudicar sua classificação com uma versão móvel ruim. Mas os motores de busca são apenas metade da preocupação.

Ler:  Por que WooCommerce é uma plataforma poderosa de marketing afiliado

Você também deve considerar os próprios visitantes móveis.

Sejamos realistas: um site móvel que não responde em 2021 é simplesmente inaceitável. Na verdade, você realmente precisa se esforçar para fazer com que um site não responda hoje. Isso inclui botões difíceis de tocar, imagens grandes demais para serem visualizadas e tempos de carregamento lentos e insuportáveis.

Uma experiência móvel ruim fará com que os clientes evitem seu site tanto no celular quanto no desktop.

Como criar uma visualização móvel do seu site com Mobilook

Passo 1: Instale o Mobilook

Mobilook é uma extensão do Google DEVTOOL que permite verificar a capacidade de resposta de suas páginas nos dispositivos mais populares. É simples de configurar e altamente eficaz na descoberta de problemas. Também vale destacar a versão Pro do plugin.

Com ele, você pode executar o teste do otimizador móvel do Google, que permite ver exatamente como o Google vê a página. Ele dirá se eles consideram a página compatível com dispositivos móveis ou não. É extremamente útil ver se o seu site não está à altura.

Comece clicando em Plugins e selecionando a opção Adicionar Novo no painel de administração esquerdo.

Pesquise Mobilook na caixa de pesquisa disponível.

Encontre o plugin Mobilook e clique no botão “Instalar agora” e ative o plugin para uso.

Etapa 2: Conectando-se ao Mobilook

Após a ativação, você será perguntado se deseja que o Mobilook comece a otimizar suas páginas responsivas. É recomendado clicar no botão “Permitir e Continuar”. No entanto, você pode pular isso por enquanto e fazer isso mais tarde, pois o tutorial presumirá que você deu permissão.

Ler:  Como girar a tela no Chromebook?

Você deve então verificar seu e-mail associado à sua conta de administrador e clicar no link de verificação.

Isso o levará de volta ao WordPress, onde verá que o processo de ativação foi concluído. Agora você está pronto para usar o plugin.

Etapa 3: definir as configurações

No painel de administração esquerdo, clique em Configurações e selecione a opção Mobilook.

A versão gratuita do plugin permite ativar ou desativar alguns recursos. Isso inclui o formato Samsung Galaxy S9, formato iPhone 6/7/8, formato Google Pixel 2 e o Facebook Debugger. Por padrão, todos eles estão habilitados e é recomendado que permaneçam assim.

Para desligá-lo, basta clicar no botão “Ativado” para desativá-los.

Existem vários recursos PRO que você pode ativar e desativar abaixo, mas eles só estarão acessíveis se você atualizar. Este tutorial tratará apenas da versão gratuita.

Etapa 4: visualização móvel no WordPress

Com as configurações resolvidas, é hora de finalmente usar a visualização móvel no WordPress. Isso pode ser acessado diretamente de um editor em qualquer postagem ou página.

Vá para qualquer postagem ou página do WordPress e role para baixo até a seção Mobilook.

Na parte superior, você pode selecionar em qual dispositivo visualizar sua postagem ou página. Ao lado disso, você pode visualizar as dimensões da tela.

Observação: Na versão gratuita, apenas as três primeiras opções estão disponíveis.

Clique no botão “Girar” para alternar entre a visualização retrato (vertical) ou paisagem (horizontal).

Ler:  Como adicionar um widget de avaliações do Google à barra lateral do WordPress

No final desta seção, você encontrará ferramentas para ajudá-lo a identificar problemas móveis. Isso inclui o Facebook Debugger, o Linkedin Debugger, o Google Mobile-Friendly Tool e o Viewport Opt (Mobile SEO).

Apenas a ferramenta Facebook Debugger é gratuita. Ele permite que você identifique quaisquer problemas relacionados às visualizações das postagens do seu blog no Facebook. É uma ferramenta útil se você usa o Facebook regularmente para compartilhar postagens.

Parabéns por configurar e aprender a usar o plugin Mobilook.

Ferramentas Alternativas

Muitos desenvolvedores de WordPress podem não gostar de dedicar um plugin para essa finalidade. Felizmente, existem muitas ferramentas gratuitas que você pode usar.

Aqui estão alguns dos melhores:

Ferramentas de desenvolvimento do Chrome

Ferramentas de desenvolvimento do Chrome são outro excelente recurso gratuito do qual você deve aproveitar. Com ele, você pode simular a aparência de qualquer site em um dispositivo móvel. Você pode até simular o uso do site configurando o cursor para ter um formato redondo maior, como um dedo.

Assim, você não apenas pode visualizar seu site, mas também testar como ele funciona. E você não está limitado por dispositivos. Em vez disso, você pode inserir manualmente as dimensões na ferramenta.

Portanto, você pode testar as dimensões visíveis de qualquer dispositivo com este testador de sites responsivo.

Teste de compatibilidade com dispositivos móveis do Google

Enquanto Teste de compatibilidade com dispositivos móveis do Google não oferece uma visão móvel completa do seu site, mas sim algo crítico para o sucesso. E é isso que o Google pensa do seu site.

Ele dirá se a página é compatível com dispositivos móveis ou não. Caso contrário, a ferramenta do Google fornecerá um raciocínio sobre o motivo.

Ler:  Um guia para o polonês Cloudflare: recursos e recursos B...

E sim, este é o mesmo teste incluído na versão Pro do Mobilook. É uma ferramenta gratuita por si só que oferece uma grande vantagem para o desenvolvimento.

Não posso simplesmente usar meu próprio smartphone?

Absolutamente! Na verdade, é um ótimo teste.

No entanto, nem todos os smartphones têm o mesmo tamanho. Um dos maiores problemas ao testar em um dispositivo é que os desenvolvedores tendem a considerar apenas essa opção. Em vez disso, você precisa considerar todos os tamanhos de tela possíveis.

Embora os tablets representem a menor parte do tráfego, é importante notar que eles são muito maiores que os smartphones e também vêm em vários tamanhos. Assim, um único smartphone não ajuda tanto no desenvolvimento para um público maior.

Design responsivo é a única opção

Há boas notícias: quase tudo no WordPress responde por padrão. Portanto, seu site deve ficar ótimo em qualquer dispositivo, não importa o quê.

A razão pela qual o teste é importante é que existem alguns plug-ins que não respondem nativamente. Embora sejam raros hoje em dia, eles existem e podem prejudicar sua classificação. Existem também algumas opções de personalização que ajudam a melhorar a experiência móvel.

Por exemplo, uma das mais comuns no WordPress é desabilitar a barra lateral em dispositivos móveis. As telas simplesmente não são grandes o suficiente para garantir a presença de uma barra lateral em todas as páginas.

Você achou fácil usar o Mobilook? Você acha que o WordPress deveria ter uma visualização móvel integrada por padrão?

Novas publicações:

Recomendação