Não há nada pior do que ter um site de desktop com ótima aparência e um site para celular que não funciona corretamente.

A maioria das correções de design são simples, mas exigem atenção se você quiser que os visitantes permaneçam em seu site enquanto navegam em um dispositivo móvel.

Este artigo destacará sete problemas de sites compatíveis com dispositivos móveis e correções para eles.

• As alterações feitas não estão^(Are) sendo exibidas no celular^(Mobile)
• Navegação não amigável
• Layout responsivo^{(Responsive Layout)} para de funcionar de repente
• As imagens estão demorando muito para carregar
• O conteúdo mais importante não é óbvio
• Muita informação
• Dados para telas pequenas

Atualizações de sites compatíveis com dispositivos móveis não aparecem^{(Mobile Friendly Website Updates Not Showing Up)}

Você acabou de gastar muito tempo fazendo atualizações em seu site. Eles ficam ótimos em sua área de trabalho, mas não aparecem em seu dispositivo móvel.

Um dos motivos mais comuns é o cache. Seu navegador móvel pode estar mostrando uma versão antiga do seu site que você baixou anteriormente. Outro motivo pode ser que seu site está mantendo a versão antiga de sua página e não mostrando suas alterações.

Se este for o problema, você precisará limpar o cache para baixar a versão revisada. Um plug-in de cache como WP Super Cache , W3 Total Cache ou WP Fastest Cache pode ajudar a resolver esse problema.

Abaixo estão quatro etapas para ajudá-lo a liberar o cache e o navegador do seu site para permitir que a nova versão seja exibida em seu site compatível com dispositivos móveis.

1. Atualize seu navegador várias vezes em seu desktop e dispositivo móvel.
2. Teste seu site em diferentes dispositivos móveis.
3. Limpe seu site com um plug-in de cache.
4. Verifique com sua empresa de hospedagem se há outro sistema de cache em seu servidor que precisa ser limpo.

Navegação não amigável^{(Unfriendly Navigation)}

Pode ser um desafio criar um menu de navegação que funcione bem em dispositivos móveis. Se a navegação do seu site tiver muitos itens e submenus, é ainda mais complicado espremer tudo em uma tela menor.

Por exemplo, se você tiver apenas três ou quatro itens na navegação do seu site, deve ficar bem no celular. No entanto, se você tiver mais itens e submenus, eles se empilharão uns sobre os outros e parecerão lotados.

Abaixo^(Below) estão algumas maneiras de corrigir esse problema para um site compatível com dispositivos móveis:

• Transforme sua navegação em um menu suspenso para dispositivos móveis.
• Exiba seu menu de navegação como elementos de bloco, para que apareçam verticalmente.
• Use um ícone de menu que pode ser alternado para ocupar menos espaço.
• Crie um menu de navegação móvel usando jQuery.
• Use o menu Hambúrguer (muitos temas incluem isso como uma opção ou você pode ^(Hamburger)usar um plugin^{( use a plugin)} .)

Layout responsivo para de funcionar de repente^{(Responsive Layout Stops Working Suddenly)}

Se o seu site compatível com dispositivos móveis parar de funcionar de repente, pode ser devido a um plug-in no seu site.

Instalar um novo plug-in ou uma atualização de um plug-in existente pode estar causando um conflito com outros que afeta seu layout responsivo.

Comece desativando cada plugin um de cada vez para ver se é a causa. Não desative todos de uma vez ou você não saberá qual plugin pode ser o culpado.

^(Code)As alterações de código são outra causa possível. Se você modificou algum código acidentalmente ou intencionalmente, restaure a base de código original e veja se seu site responsivo volta a funcionar.

Ao verificar a capacidade de resposta móvel do seu site, você deve sempre testá-lo em um dispositivo móvel. 

Às vezes, parece funcionar ao redimensionar a janela do navegador na área de trabalho, mas não é exibida corretamente no celular.

Se uma linha de código estiver faltando em um arquivo de cabeçalho HTML , isso pode quebrar o design responsivo. ^(HTML)Essa única linha de código ausente fará com que seu dispositivo móvel assuma que o site que você está visualizando é um site em tamanho real.

O site renderizado será do tamanho da janela de visualização (o tamanho da área da página da web que é visível para o usuário).

Para corrigir seu site compatível com dispositivos móveis, adicione a seguinte linha de código à seção de cabeçalho:

<meta name=”viewport” content=”width=device-width”>

Às vezes, quando um tema é atualizado, esse código pode desaparecer.

As imagens estão demorando muito para carregar^{(Images Are Taking Too Long to Load)}

Otimizar imagens e reduzir o tamanho do arquivo de imagem^{(reducing image file size)} faz sentido. Imagens grandes que não são otimizadas podem diminuir a velocidade de carregamento de suas páginas da web. Isso pode ser frustrante para usuários móveis.

O WordPress^(WordPress) versão 4.4 e superior exibe automaticamente a menor versão de uma imagem em seu servidor.

Se você já estiver executando a versão mais recente do WordPress , mas seu site ainda não estiver carregando rápido o suficiente, você pode:

• Instale um plugin como Smush Image Optimization, Compression e Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} para redimensionar e otimizar suas imagens
• Use uma ferramenta de compactação e otimização antes de enviar imagens para seu site, como TinyPNG , Compress JPEG ou Online Image Optimizer .

O conteúdo mais importante não é óbvio^{(Most Important Content Isn’t Obvious)}

Alguns sites são carregados com muito conteúdo desnecessário para preencher o espaço vazio quando abertos em uma área de trabalho.

Os sites desenvolvidos sem o conhecimento dos usuários móveis geralmente se enquadram nessa categoria. Esses sites levam mais tempo e largura de banda para carregar.

Se as páginas não forem projetadas adequadamente para dispositivos móveis, parte do conteúdo pode não aparecer em dispositivos móveis sem muita rolagem.

Na maioria das vezes, um elemento em sua página da web terá uma aparência em um computador e completamente diferente em um dispositivo móvel.

Por exemplo, uma página de preços com três colunas as mostrará lado a lado em um computador.

No entanto, em um dispositivo móvel, as colunas são empilhadas umas sobre as outras porque o tamanho da tela é menor. Esse comportamento é esperado.

Certifique^(Make) -se de que sua tabela de preços esteja em uma posição superior em sua página da Web para que ela apareça primeiro quando visualizada em dispositivos móveis. Se você tiver muito texto sobre sua mesa, os usuários de dispositivos móveis terão que rolar para baixo para vê-lo e talvez não.

Para a melhor experiência do usuário móvel, coloque as partes mais importantes do conteúdo no topo da página. Se um usuário precisar rolar muito antes de poder visualizar seu conteúdo, provavelmente não o fará.

Muita informação^{(Too Much Information)}

Sites com elementos de interface de usuário complicados, como tabelas, formulários de várias etapas e recursos de pesquisa avançados, podem produzir uma experiência de usuário móvel ruim.

Esses elementos contêm muitas informações que podem sobrecarregar a tela do celular e interferir na localização de um usuário com as informações desejadas.

Uma abordagem é remover ou ocultar algum conteúdo de usuários móveis. No entanto, esta não é uma solução ideal para os visitantes que desejam ter acesso a esses elementos.

Para evitar esse problema, otimize seu site compatível com dispositivos móveis o máximo possível. Além disso, remova quaisquer elementos desnecessários enquanto se concentra na estrutura principal do seu site.

Dados para telas pequenas^{(Data For Small Screens)}

Tabelas complexas com muitas linhas e colunas podem ser um problema quando visualizadas em pequenas telas móveis. A melhor solução é usar tabelas responsivas.

Um plugin como o WP Responsive Table pode facilitar isso.

Assim como na tabela de preços acima, quando visualizadas em um dispositivo móvel, as colunas serão empilhadas para caber na tela menor.

Outras maneiras de mostrar dados em dispositivos móveis incluem:

• Criando uma tabela menor sem o layout da grade para evitar a necessidade de rolagem horizontal.
• Virar uma mesa de lado para encaixar melhor em uma tela menor.
• Substituindo tabelas maiores por menores que se vinculam à versão completa.
• Convertendo tabelas em gráficos de pizza.

Como o uso de dispositivos móveis está crescendo exponencialmente, é imperativo que os sites de negócios sejam otimizados com versões compatíveis com dispositivos móveis. Melhore^(Enhance) a experiência do usuário sem sacrificar a funcionalidade seguindo as etapas acima.

Você também deve sempre monitorar o desempenho do seu site e fazer ajustes quando necessário para melhorar o desempenho e a experiência do usuário.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than havіng a great-looking desktop website and a mobile site that doesn’t work correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

<meta name=”viewport” content=”width=device-width”>

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• Como configurar seu próprio site semelhante ao Twitter usando o tema P2 do WordPress

• 10 plugins essenciais do WordPress para um site de pequenas empresas

• Como fazer um WordPress Site Secure

• Resenha do livro: Construa seu próprio site: um guia em quadrinhos para HTML, CSS e Wordpress

• Wix vs WordPress: Qual é o melhor para criar seu site?

• Use a nova função “Inserir dados da imagem” do Excel Mobile

• 10 dicas e truques do Gboard para melhorar a digitação em dispositivos móveis

• Como mover WordPress site de um host para outro

• Como proteger páginas com senha em seu site WordPress

• Como parar / transformar Off Reddit Notifications no Mobile and Desktop

• Como salvar GIFs animados para celular e computador

• 8 grátis Premium WordPress temas para instalar

• 7 dicas técnicas de otimização de SEO para qualquer site

• Monitore sites ocultos e conexões com a Internet

• Como lançar para Roku TV de PC or Mobile

• Lista de processadores para tablets e celulares

• Como tomar um Screenshot em Netflix (Desktop & Mobile)

• Como obter notificações do Twitter na Web e em dispositivos móveis

• Verifique a idade de um site

• Como monitorar quando um site é atualizado