{"id":1864,"date":"2018-10-22T00:00:00","date_gmt":"2018-10-22T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2018\/10\/22\/mobile-friendly-vantagens-site-otimizado\/"},"modified":"2018-10-22T00:00:00","modified_gmt":"2018-10-22T00:00:00","slug":"mobile-friendly-vantagens-site-otimizado","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/mobile-friendly-vantagens-site-otimizado\/","title":{"rendered":"Mobile friendly: o que \u00e9 e as vantagens de ter um site otimizado para dispositivos m\u00f3veis"},"content":{"rendered":"

Voc\u00ea sabe dizer se o seu site ou o blog<\/a> da sua empresa \u00e9 mobile friendly<\/strong>? Se n\u00e3o sabe \u2014 ou sequer entende o que esse termo significa\u2014, temos muito o que conversar.<\/p>\n

Em 2018, 52,2% de todo o tr\u00e1fego online<\/a> aconteceu pelos dispositivos m\u00f3veis. Pois \u00e9, mais da metade de toda a movimenta\u00e7\u00e3o de dados nas redes se deu por celulares e tablets.<\/p>\n

Isso significa que as pessoas est\u00e3o passando mais tempo na Internet em um dispositivo m\u00f3vel <\/strong>do que em um computador. Aposto que voc\u00ea j\u00e1 entendeu qual o problema de n\u00e3o saber se o seu site \u00e9 mobile friendly, certo?<\/p>\n

Se a p\u00e1gina da sua empresa na Internet n\u00e3o \u00e9 preparada para dispositivos m\u00f3veis, pode ser que voc\u00ea esteja perdendo a maior parte dos usu\u00e1rios. Parece grave, n\u00e3o concorda?<\/p>\n

Continue lendo para entender mais sobre o assunto e aprender como resolver essa quest\u00e3o!<\/p>\n

O que \u00e9 um site mobile friendly?<\/h2>\n

Voc\u00ea j\u00e1 parou para reparar no fato de que um computador e um smartphone (ou tablet) s\u00e3o dois dispositivos essencialmente diferentes?<\/p>\n

Por exemplo, a tela de um computador \u00e9 maior do que a de um dispositivo m\u00f3vel<\/strong>. Al\u00e9m disso, ela segue uma raz\u00e3o de aspecto diferente tamb\u00e9m (normalmente, a tela do monitor \u00e9 mais horizontal, com os smartphones sendo mais verticais).<\/p>\n

Por\u00e9m, as diferen\u00e7as v\u00e3o al\u00e9m da disposi\u00e7\u00e3o da tela. Em um computador, o usu\u00e1rio tem um teclado bem grande para digitar informa\u00e7\u00f5es e um mouse para controlar e clicar onde quer. Em dispositivos m\u00f3veis, o controle \u00e9 pela tela t\u00e1til e o teclado \u00e9 bem pequeno.<\/p>\n

Outra distin\u00e7\u00e3o entre os dois tipos de aparelhos \u00e9 o tipo de conex\u00e3o que ambos t\u00eam com a Internet. No computador, a conex\u00e3o \u00e9 sempre Wi-Fi. No dispositivo m\u00f3vel, pode ser via 3G ou 4G.<\/p>\n

Todas essas quest\u00f5es criam cen\u00e1rios online diferentes para os usu\u00e1rios<\/strong>. No celular, por exemplo, a pessoa n\u00e3o consegue entrar em p\u00e1ginas com muitas imagens, pois usa conex\u00e3o m\u00f3vel e isso consumiria muitos dados (al\u00e9m de demorar mais para carregar).<\/p>\n

Isso significa que a maneira como programamos nossos sites devem levar essas diferen\u00e7as em considera\u00e7\u00e3o<\/strong>. Uma p\u00e1gina que \u00e9 otimizada para rodar em um dispositivo m\u00f3vel \u00e9 chamada de mobile friendly (em tradu\u00e7\u00e3o livre, amig\u00e1vel aos dispositivos m\u00f3veis).<\/p>\n

Site responsivo \u00e9 igual a mobile friendly?<\/h2>\n

Voc\u00ea provavelmente j\u00e1 ouviu falar na import\u00e2ncia de otimizar o seu site para dispositivos m\u00f3veis. Existe at\u00e9 uma grande chance de estar pensando algo como \u201cmas o meu site j\u00e1 \u00e9 responsivo\u201d.<\/p>\n

O problema \u00e9 que mobile friendly n\u00e3o significa ter um site responsivo<\/a>. Na verdade, tecnicamente, s\u00e3o coisas diferentes.<\/p>\n

Um layout responsivo \u00e9 aquele cujo c\u00f3digo \u00e9 montado para que o site se adapte \u00e0 diferentes tamanhos de tela<\/strong>. Um smartphone, por exemplo, tem uma tela bem mais vertical do que um monitor de computador.<\/p>\n

O site responsivo vai se adaptar independente das dimens\u00f5es da tela ou do navegador do usu\u00e1rio. Voc\u00ea pode ver isso na pr\u00e1tica agora mesmo.<\/p>\n

Fa\u00e7a um pequeno experimento<\/strong>: tire o seu navegador do modo tela cheia e deixe no modo janela. Depois, use o mouse nas bordas da janela para alterar o seu tamanho o quanto quiser.<\/p>\n

Viu como o nosso blog se adapta a qualquer tamanho? Conforme voc\u00ea diminui ou aumenta a janela, o texto vai se encaixando automaticamente, assim como outros elementos do layout (como nossa logo ou a barra de pesquisas).<\/p>\n

J\u00e1 um site mobile friendly<\/strong> \u00e9 aquele que tem uma vers\u00e3o exclusiva para dispositivos m\u00f3veis<\/strong>. Quando entramos na p\u00e1gina via um smartphone ou tablet, vemos uma disposi\u00e7\u00e3o pr\u00f3pria para esses aparelhos.<\/p>\n

Mesmo que a p\u00e1gina use as mesmas imagens e mesmo conte\u00fado, seus c\u00f3digos s\u00e3o outros, pensados para otimizar a experi\u00eancia de quem usa um dispositivo m\u00f3vel.<\/p>\n

Em uma grande parte dos casos, muitos sites criam at\u00e9 um subdom\u00ednio pr\u00f3prio para a vers\u00e3o mobile, normalmente indicada com um \u201cm\u201d na URL, como \u201cm.sitedeteste.com.br\u201d.<\/p>\n

CONTE\u00daDO RECOMENDADO<\/strong>
\n Google mobile-first index: saiba tudo sobre a indexa\u00e7\u00e3o do Google baseada em mobile<\/a><\/biblioteca><\/p>\n

Quais os crit\u00e9rios para ser mobile friendly?<\/h2>\n

Ok, se chegamos a conclus\u00e3o que um site responsivo n\u00e3o \u00e9 a mesma coisa, ent\u00e3o quais os crit\u00e9rios para ter um mobile friendly?<\/p>\n

Vamos ver!<\/p>\n

F\u00e1cil de navegar<\/h3>\n

Um site mobile friendly precisa ser de f\u00e1cil navega\u00e7\u00e3o<\/strong>. Isso significa que o site precisa ser bem estruturado para facilitar ao usu\u00e1rio encontrar o que ele procura ou precisa.<\/p>\n

Um exemplo pr\u00e1tico \u00e9 desativar todos os tipos de pop-up na vers\u00e3o mobile. Isso se faz necess\u00e1rio porque, ao contr\u00e1rio de outros elementos, dificilmente as pop-ups se adequam ao tamanho da tela.<\/p>\n

Por causa disso, elas ficam grandes demais, obstruem toda a vis\u00e3o do usu\u00e1rio e \u00e9 dif\u00edcil de fech\u00e1-las em um dispositivo m\u00f3vel.<\/p>\n

Outro ponto importante, que vale mencionar, \u00e9 organizar os conte\u00fados do site em menus de f\u00e1cil acesso<\/strong>. O ideal \u00e9 que o usu\u00e1rio chegue exatamente onde ele quer, com poucos toques.<\/p>\n

Carregamento r\u00e1pido<\/h3>\n

Uma estat\u00edstica: 53% de todos os usu\u00e1rios mobile<\/a> deixam um site se ele levar mais de 3 segundos para carregar. E, quanto mais o carregamento demora, mais essa porcentagem cresce.<\/p>\n

Portanto, um site mobile friendly precisa ser mais r\u00e1pido para carregar<\/strong>, at\u00e9 para n\u00e3o consumir muitos dados do usu\u00e1rio.<\/p>\n

Afinal, ningu\u00e9m quer voltar a um site que gastou todo o seu pacote di\u00e1rio por causa de uma imagem que n\u00e3o ficou otimizada, por exemplo.<\/p>\n

Funciona bem em telas pequenas e diferentes<\/h3>\n

Um site mobile friendly precisa compreender que as telas de dispositivos m\u00f3veis, como smartphones e tablets, \u00e9 bem diferente dos monitores de computadores.<\/p>\n

Isso significa que os designers precisam pensar nisso e planejar todo o conte\u00fado, desde a homepage at\u00e9 o layout dos artigos, para funcionar bem em telas de tamanhos diferentes, especialmente as pequenas.<\/p>\n

Uma das maneiras de conseguir isso \u00e9 com um site responsivo, claro. Outra maneira \u00e9 trabalhar o design da p\u00e1gina j\u00e1 pensando nas condi\u00e7\u00f5es espec\u00edficas dos dispositivos m\u00f3veis.<\/p>\n

Usa controle por toque<\/h3>\n

Por fim, os sites mobile friendly est\u00e3o otimizados para usar comandos de toque<\/strong> durante as suas navega\u00e7\u00f5es.<\/p>\n

Voc\u00ea provavelmente j\u00e1 encontrou algum site que n\u00e3o era muito amig\u00e1vel ao seu celular. Por exemplo, ele carregava no \u201ctamanho normal\u201d, como se estivesse abrindo em um monitor de computador.<\/p>\n

Por causa disso, as letras ficavam todas pequenas e era imposs\u00edvel ler o que estava escrito. Quando voc\u00ea tentava usar o comando de zoom para ampliar o texto simplesmente n\u00e3o funcionava.<\/p>\n

Se isso j\u00e1 aconteceu com voc\u00ea (ao mesmo tempo que problemas como links n\u00e3o funcionarem ou a tela n\u00e3o rodar ao toque) \u00e9 porque o site n\u00e3o foi otimizado para lidar com esses comandos diferentes.<\/p>\n

Qual a import\u00e2ncia de ser amig\u00e1vel aos mobiles?<\/h2>\n

Pode impactar seu rankeamento<\/h3>\n

Em 2015, o Google lan\u00e7ou uma atualiza\u00e7\u00e3o do seu algoritmo<\/a> para come\u00e7ar a dar destaque aos sites que eram mobile friendly nas buscas feitas em dispositivos m\u00f3veis.<\/p>\n

A raz\u00e3o para isso \u00e9 \u00f3bvia: com o uso de celulares e tablets aumentando, as pessoas come\u00e7am a pesquisar na Internet com eles. Se os sites n\u00e3o est\u00e3o otimizados para isso, a experi\u00eancia dos usu\u00e1rios \u00e9 ruim e isso \u00e9 p\u00e9ssimo para o Google.<\/p>\n

Portanto, o mecanismo de busca come\u00e7ou a dar mais destaque para os sites otimizados<\/strong> para esses dispositivos. Se a sua p\u00e1gina ainda n\u00e3o \u00e9 assim, est\u00e1 sofrendo no rankeamento<\/a> de buscas m\u00f3veis.<\/p>\n

\"CTA<\/a><\/p>\n

Melhor experi\u00eancia do usu\u00e1rio<\/h3>\n

Como foi descrito anteriormente, a experi\u00eancia do usu\u00e1rio<\/a> sofre muito se o site n\u00e3o for otimizado para dispositivos m\u00f3veis.<\/p>\n

Imagens pesadas, que consomem o pacote de dados, <\/strong>e navega\u00e7\u00e3o ruim fazem com que o visitante n\u00e3o queira mais voltar ao seu site.<\/p>\n

Aumento das taxas de convers\u00e3o<\/h3>\n

Voc\u00ea sabia que mais de 84% da popula\u00e7\u00e3o faz compras online pelo smartphone<\/a>? Isso mesmo: cerca de 8 em cada 10 pessoas costuma fazer compras de algum tipo em um dispositivo m\u00f3vel.<\/p>\n

Isso significa que, se voc\u00ea tiver seu site otimizado para esse p\u00fablico, ver\u00e1 um aumento na sua taxa de convers\u00e3o<\/a>. Afinal, quantas vendas voc\u00ea j\u00e1 n\u00e3o perdeu porque os usu\u00e1rios n\u00e3o conseguiram acessar o bot\u00e3o de compras ou navegar na sua loja?<\/p>\n

Diminui\u00e7\u00e3o da taxa de rejei\u00e7\u00e3o<\/h3>\n

Lembra que 53% dos usu\u00e1rios mobile saem de um site se ele demorar mais de 3 segundos para carregar? Ent\u00e3o, isso contribui para aumentar a <\/strong>taxa de rejei\u00e7\u00e3o<\/strong><\/a> dessa p\u00e1gina.<\/p>\n

Isso tamb\u00e9m acontece quando a pessoa entra e v\u00ea o site todo desorganizado ou quando n\u00e3o consegue navegar direito.<\/p>\n

Por isso, ter uma otimiza\u00e7\u00e3o para dispositivos m\u00f3veis diminui muito a taxa de rejei\u00e7\u00e3o do site, pois elimina todos os fatores que \u201cexpulsam\u201d o usu\u00e1rio da p\u00e1gina.<\/p>\n

Como transformar seu site em mobile friendly?<\/h2>\n

Depois disso tudo, voc\u00ea com certeza quer trabalhar o mais rapidamente poss\u00edvel para transformar seu site em uma p\u00e1gina amig\u00e1vel aos dispositivos m\u00f3veis. Mas como fazer isso? Siga nossas dicas!<\/p>\n

Fa\u00e7a o teste do Google<\/h3>\n

O Google oferece uma ferramenta gratuita para testar e descobrir se seu site \u00e9 mobile friendly<\/a> ou n\u00e3o. Fa\u00e7a esse experimento!<\/p>\n

Uma das partes boas \u00e9 que, al\u00e9m de ter uma confirma\u00e7\u00e3o do Google, o relat\u00f3rio do teste ainda oferece dicas do que melhorar no seu site. \u00c9 um \u00f3timo ponto inicial para seu trabalho!<\/p>\n

Use um layout responsivo<\/h3>\n

\u201cMas voc\u00eas n\u00e3o disseram que responsividade e mobile friendly eram coisas diferentes?\u201d. S\u00e3o coisas diferentes, mas se complementam tamb\u00e9m.<\/p>\n

Um layout responsivo<\/a> ajuda o seu site a se organizar melhor em qualquer tamanho de tela e garante boa parte do trabalho em obter uma boa usabilidade na sua p\u00e1gina.<\/p>\n

Agilize o carregamento da p\u00e1gina<\/h3>\n

Voc\u00ea j\u00e1 sabe que, quanto mais seu site demorar para carregar, pior \u00e9 para os seus usu\u00e1rios m\u00f3veis. Portanto, trate de agilizar essa velocidade.<\/strong><\/p>\n

Uma das maneiras de fazer isso \u00e9 reescrevendo o c\u00f3digo do seu site, para deix\u00e1-lo mais organizado e f\u00e1cil de ser lido pelos navegadores e servidores. Outra forma \u00e9 diminuir o uso de imagens ou, pelo menos, otimiz\u00e1-las com t\u00e9cnicas de compress\u00e3o. Assim, uma foto que antes tinha 1 MB, pode diminuir de tamanho para 100kb ou equivalente.<\/p>\n

Formate seu conte\u00fado corretamente<\/h3>\n

Voc\u00ea j\u00e1 tentou ler um par\u00e1grafo de 5, 6, talvez 7 ou 8 linhas em um celular? Parece que \u00e9 um texto gigantesco, que ocupa toda a tela e n\u00e3o acaba nunca.<\/p>\n

Isso cansa o leitor e o afasta do seu site. Lembre-se de que as caracter\u00edsticas dos dispositivos afetam at\u00e9 mesmo na hora de produzir o seu conte\u00fado.<\/p>\n

Ou seja: voc\u00ea precisa formatar seu texto para que ele seja melhor escaneado<\/a> pelo usu\u00e1rio. Confira algumas dicas:<\/p>\n