Site Responsivo x Versão Mobile | PRIORIDADE 1 > Sair da Penalidade do Google

Olá galera do bem!

Voltamos em mais uma postagem da série Site Responsivo x Versão Mobile.

Portanto diante aos acontecimentos que ando enfrentando, a prioridade mudou. Acredito que mais alguém possa estar passando por isso.

Não sei você leitor, se você desenvolve seu próprio website, se faz por hobby ou se trabalha desenvolvendo websites para terceiros e como trabalha. No meu caso eu tenho contrato com clientes.

Ando observando que aqueles clientes em que o site não tem a versão mobile tem caído consideravelmente na quantidade de visitas. O que sei é que é uma situação muito ruim apresentar a estatística para seu cliente onde o resultado é negativo.

Muitos vão dizer: - Tem algo errado com o site, só pode.

Pior, ele está certo. Tem sim! O site não tem sua versão mobile.


 E o que fazer?

• Chegar no meu cliente sem ter o mínimo de bom senso e dizer que ele não contratou uma versão mobile? 
• Ignorar a situação como nada estivesse acontecendo e deixar que o mesmo fique insatisfeito até decidir cancelar o contrato?
• Jogar a culpa no cliente dizendo que o negócio dele que não é interessante e ocultar a questão do mobile de forma não o conscientizar da situação? Saiba que uma hora pode aparecer um concorrente mostrando esta situação pra ele e ainda o convencendo que você o enganou o tempo todo.

Não sei a relação de vocês com seus clientes, mas a minha é de parceria. Cada cliente para mim é um parceiro. 

Portanto, não tem como simplesmente chegar no meu cliente e cobrar dele um site Mobile. Em qualquer ramo de atividade, um profissional que se preze passará momentos em que "vai trabalhar de graça". 

Mas como sempre digo "Olhe a Xícara por ambos os lados, a xícara tem uma alça de um lado só. Dependendo do ângulo que se olha para ela, verá a mesma xícara de formas diferentes." Então encare a situação com vários pontos de vista. 

Nesta situação, em vez de eu ser pessimista e ficar trabalhando pensando: "Que xato. to trabalhando de graça" vou pensar "O fato de esclarecer a situação com meu cliente, e fornecer uma solução vai aumentar a confiabilidade que ele tem em meu trabalho".

Galera, o seu cliente é o seu combustível para que seu negócio saia do lugar  para que ele prospere. 

Então qual a medida decidi tomar:

Simples, Contatei cada cliente, expliquei sobre as mudanças drásticas do Google e expus a solução imediata para contornar a situação no momento até tomarmos novas decisões. Informei que seria criado uma página básica a qual estaria informando que a versão mobile estava em construção e com um botão para que visite a versão Desktop" E depois seria criado a versão mobile bem simples direcionada no que é realmente é relevante sem custo algum. Assim, se ele optasse a ter uma versão mais completa para celular, neste caso sim; seria tarifado.

Desta maneira poderia salvar em menor espaço de tempo todos meus clientes da penalidade, ter tempo para um ajuste da versão Mobile simples e por fim; para os que interessassem criaria a versão mais completa e ainda teria entradas no caixa.

Diante desta história contada pra vocês, o post de hoje é:

PRIORIDADE 1 >> SAIR DA PENALIDADE DO GOOGLE

Como visto no artigo anterior vamos sequenciar este tema usando o próprio domínio do WebAcappelashow para criarmos duas ou mais versões do site , ou seja desktop e mobile, e de quebra tentar fazer um responsivo utilizando o WebAcappela.

 Caso você ainda não viu clique aqui.

O primeiro passo, feito anteriormente é criar na minha hospedagem, dentro da pasta public_html as seguintes pastas:

desktop > para a versão pc
mobile > para a versão dispositivos móveis
responsive > para a experiência responsiva

Mas seguindo nossa prioridade estaremos criando então o básico do básico para a versão mobile do site. Lembrando da meta prioritária: Sair da penalidade do Google.

Obviamente não estou querendo dizer que vamos nos posicionar melhor no ranqueamento e ou que estamos cumprindo todas as diretrizes do Google. Nossa primeira preocupação é passar no teste oficial de Google para dispositivos móveis. Se o Google disponibiliza uma ferramenta teste a qual fornece um resultado positivo ou negativo e ainda lista detalhes para correções; entende-se que passando no teste pelo menos o site está cumprindo com as principais regras e para ela está considerado um site para dispositivo móveis saindo da penalidade.

Então galera, vamos criar o projeto para o site WebacappellaShow na versão Mobile. Para isto criei o projeto chamado WebacappellaShow_Mobile.

Como tenho uma prioridade, vou evitar perder tempo com novas experiências e vou criar a versão Mobile seguindo as instruções fornecidas no Blog Oficial do Webacappella.

Link da Matéria do Blog > http://blogwebacappella.fr/2013/04/04/creer-un-site-pour-les-appareils-mobiles/#more-2049

Está em Francês, mas nada que um bom translator não resolva. rs


Resumindo:

• Configurar as páginas com 900px de largura ; pois em 1000 pixels como havia dito na postagem anterior. Conforme o blog oficial do WebAcappella 1000 px não seria muito adequado para os smartphones de tela como o iPhone.
• Tamanho da fonte para textos: 36px
• Tamanho da fonte para títulos: 44px 
• Aproveitar bastante dos recursos âncora no WebAcappella ou utilizar de um menu flutuante para  páginas compridas .

Então criei esta telinha básica da básica para minha versão celular

Assim terá um botão redirecionando para a versão Desktop do site.

Criado esta página emergencial posto ela dentro da pasta public_html/mobile vista pelo browser como http://www.webacappellashow.com.br/mobile/index.html


Agora testando o site no teste do Gooble conferimos se passamos no teste:

Wowwww!!! Passamos!!!

Além de passarmos, melhor; se o internauta clicar em VERSÃO DESKTOP, ele será redirecionado para a versão desktop do site mesmo no celular. Faça o teste no seu celular e comprove.

Um detalhe que percebi, que se seguir as medidas conforme dito no WebAcappella full de largura 1000px se enquadraria melhor. Mas isto é um detalhe que irei testar em vários dispositivos mais tarde. Agora estou seguindo minha prioridade.



Agora, minha versão Desktop: Outro projeto que nomeei como Webacappellashow_desktop

Esta publicada dentro da pasta public_html/desktop e vista pelo browser como http://www.webacappellashow.com.br/desktop/index.html

Como já dito são dois projetos: 1 Desktop, outro Mobile

Agora reparem bem, a versão desktop foi produzida de tal forma que até o momento também passaria pelo teste do Google. Mas o Google reconheceu a versão Mobile.



Para isto eu criei o terceiro projeto chamado Webacappellashow_principal 

Este é uma página única em branco a qual pela opção do Webacappella SITE>>PROPRIEDADES DO SITE, inseri o seguinte código no head

<script type="text/javascript">

//pega a largura da resolução da tela

var width = screen.width;

//pega a altura da resolução da tela

var height = screen.height;



//verifica se a resolução dará uma boa visão do site

if (width <= 799)

document.write("<meta http-equiv='refresh' content='0; url=http://www.webacappellashow.com.br/mobile/index.html'>")

else

document.write("<meta http-equiv='refresh' content='0; url=http://www.webacappellashow.com.br/desktop/index.html'>")




</script>

Este código diz: Se a largura do dispositivo que eu estiver conectando form menor ou igual a 799px redirecione para o url da versão mobile, se não redirecione para a  url da versão desktop.


Sei que existem vários códigos diferentes para o tal espalhados pela internet, mas criei este de forma emergencial até poder estudar os demais.

Caso queira aproveitar este código, basta trocar os trechos em vermelho pelas suas url's.

Você deve estar se perguntando por que eu apenas não criei um arquivo index.html com os códigos e postei apenas o arquivo na raiz do public_html.

Resposta simples: Porque no WebAcappella já vou ter a facilidade da criação do robot.txt e das personalizações feitas com o redirect-310 usadas no htaccess, quanto a criação do mapa do site. 

Contudo publico este meu terceiro projeto na raiz do public_html





ps. Gostaria de lembrar que ao visitar o site pode não condizer com as telas aqui printadas. Isto porque a medida que vou postando sobre este Tema "Site Responsive X Versão Mobile"  vou alterando o projeto de acordo com os artigos.