TEMA: Site Responsivo x Versão Mobile
ARTIGO: Revisado e melhorado (esta postagem sofreu nova atualização em 15/05/2018)
VERSÃO: WEBACAPPELLA 4
Olá galera, beleza?
Lembram do que já falei sobre a forma de se olhar para a xícara? Que a xícara tem uma alça só, e dependendo do ângulo que se olha pra ela, verá a mesma xícara porém de formas diferentes?
Resumindo: " Veja tudo com vários pontos de vistas"
Quando o Google começou com suas penalidades para sites não compatíveis para dispositivos móveis todos começaram (mais do que certo) a procurar alternativas.
No Webacappella então a alternativa seria criar outro projeto para a versão mobile.
Então surgiram artigos com configurações para o htacces para direcionar para a versão mobile, surgiram explicações sobre quais formatações deveriam ser usadas no projeto mobile, enfim..
Eu, como disse, gosto de analisar as situações em vários pontos de vistas, ver as prioridades, não concentrar no problema e sim na solução.
Como havia acompanhado e percebido que os sites dos meus clientes que não tinham a versão mobile começaram a perder visitação de uma forma considerável me senti na obrigação de executar uma estratégia imediata. Para compartilhar com todos criei o seguinte artigo: Clique aqui e veja o artigo mais detalhado sobre isso.
Site Responsivo x Versão Mobile | PRIORIDADE 1 > Sair da Penalidade do Google
Clique aqui e veja o artigo .
Neste artigo eu criei um código simples de redirecionamento para versão desktop e mobile e informei também as dimensões que o blog oficial do Webacappella informa para se criar a versão Mobile.
Mas na prática eu senti um grande desconforto de criar um site com dimensões enormes. Era muito ruim, e eu sempre tinha dúvidas como ficaria no celular ou outro dispositivo móvel que seja.
Daí verificando nas ferramentas do Google, percebi que criar o site nessas dimensões sugeridas não era a melhor opção. Como eu já disse a intenção do Google é fornecer a melhor experiência para seu usuário. Então mesmo o site passando pelo teste mobile do Google, outros fatores vão colaborar para que sua posição seja melhor no ranqueamento. Tais como velocidade do carregamento do site entre outras.
Entre estas outras está a meta tag Viewport a qual me chamou atenção e foi a primeira solução para alguns problemas.
Possa ser que crie um artigo exclusivo sobre o Viewport, mas hoje vou mostrar bem simplificado como utilizá-lo, o motivo e a vantagem.
Para quem entrasse no site do WebacappellaShow pelo celular via a seguinte tela:
Esta foi feita usando as dimensões sugeridas no blog oficial do WebAcappella.
Apesar de depois de ter a prioridade de sair da penalidade como falado no outro artigo (link informado acima). Mesmo passando no teste do Google, os ajustes não teriam terminado.
Meu próximo passo era testar a experiência do usuário. Para isso utilizei a seguinte ferramenta do Google:
Preste atenção ao destaque em vermelho na imagem abaixo:
Repare que para a satisfação total do Google muitas coisas ainda devem ser feitas no meu projeto.
Mas me chamou a atenção em "Configure o Visor"
Clicando em detalhes:
Daí de cara percebi.. Falta o Viewport
Neste momento pensei. "Caramba!! eu aqui que nem bobo fazendo sites versão mobile com dimensões gigantescas " Que até mesmo ficaria até pesado para celular.
Então pensei, qual seria a dimensão boa para trabalhar com o projeto mobile. Então, no meu achar, (você pode achar que outra dimensão te atenda melhor) resolvi usar a largura 440 px.
Então eu que estava trabalhando no Webacappella assim:
Passei a trabalhar assim:
E aquela estória de tamanho das fontes, besteira,, nem me preocupo mais com aquilo. Em questão das fontes o que tenho que me preocupar é de utilizar fontes maior que 12.
Faço o projeto visualizando quase exato do que vai aparecer no celular. Digo quase pois o viewport faz alguns ajustes automaticamente.
O que se deve ter um certo cuidado é de manter uma distancia mais confortável entre os elementos e dependendo da fonte utilizada sugiro transformar o texto em imagem..
Para transformar o texto em imagem basta clicar na caixa de verificação na configuração do texto pelo próprio WebAcappella.
Outro detalhe que não é obrigatório é criar as imagens nas dimensões reais que se vai usar no projeto. Não é obrigatório pois vão abrir normalmente ao visitar o site, mas sugiro por questão de velocidade. O Google adora sites que carregam rapidamente
Acredite, é muito mais confortável trabalhar assim. Sem contar que você pode criar também projetos separado para tablet; por exemplo.
Mesmo já utilizando o WebAcappella Responsive, continuo também utilizando o WA 4 com versões separadas para mobile (óbvio dependendo do projeto) , pois o WA4 possibilita maior liberdade de criação do que o WA RC. Um exemplo é ícones em botões, sobrescrever um elemento com outro e etc. Seguindo o mesmo pensamento dos grandes como Facebook, loja submarino e etc. Todos estes possuem a versão mobile separada.
A versão mobile você foca diretamente no que o usuário gostaria de ver por um dispositivo móvel.
E sabe como eu faço?
1 - Faço o site primeiro por inteiro na vesão desktop.
2 - Depois duplico as páginas para as outras versóes (sem precisar criar pastas para outras versões, apenas acrescento um -m(mobile) , -t(tablet), -d(desktop) no final do nome de cada url
3 - Daí saio retirando tudo que não vou querer na versão mobile e tablet
4 - Altero as dimensões
5 - Faço todos os ajustes para as novas dimensões
Em poucas horas já ta pronta a versão mobile.
Bom, continuando.......
Preciso de definir as dimensões referente a largura de cada versão. Então depois de vários testes cheguei nas seguintes dimensões:
Para celular (na vertical) 410 px de largura
Para celular (na vertical) 410 px de largura
Para tablet (na vertical) 600px de largura
As áreas que separei para cada lado de 10 px é para que tenha uma melhor visualização. Elementos esbarrando no canto da tela ninguém merece.
E no caso do celular estiver vai depender de cada dispositivo, pois dependendo da resolução ele pode assumir a de outro dispositivo. Por exemplo: Dependendo da resolução do tablet ele poderá assumir a versão do site para desktop.
Minhas páginas ficaram assim:
Lembrando que no caso do ipad, pode também ser criada uma página para ipad com suas dimensões. Dessa forma quem entrar pelo ipad terá uma visualização só para ele. O importante deste post é passar a ideia de como fazer. As dimensões você pode alterar do seu jeito e fazer devidos testes.
Agora que já estou trabalhando com as dimensões reais, mais confortavelmente e mais feliz vou inserir o detalhe chave. A tag Viewport.
Então através do Viewport vou fazer que a página para cada dispositivo se ajuste a resolução do mesmo.
Sendo assim para cada tipo dispositivo incluirei o código no head da página. Lembrando que cada página mobile (celular, tablet, ipad e etc) do projeto do seu site tem que ser inserido o código .
Código:
<meta name="viewport" content="width=device-width, user-scalable=no">
Agora vamos as simulações . O ideal seria testar diretamente nos dispositivos, mas como isso pra mim é quase impossível vou usar o Opera Mobile Emulator.
Para celular (na vertical) 410 px de largura
E o teste Google mobile
Para tablet (na vertical) 600px de largura
E o teste Google mobile
Agora que já tenho minha página para cada dispositivo, falta fazer com que ao entrar na página ela seja direcionada pela versão certa. PRESTE BEM ATENÇÃO!!! Estou dizendo que é entrar na PÁGINA, NÃO NO SITE. Porque? Simplesmente se você determinar um código somente no inicio do site para redirecionar para a versão correta, só irá funcionar se for digitado a url inicial do site.
Então imagina a seguinte situação: Em uma pesquisa no Google feita pelo celular, encontra a página contato da versão desktop (por exemplo) ao clicar para abrir a página contato não estará configurada para celular, abrindo a versão incorreta e não se adaptando ao dispositivo.
Para solucionar isso vou criar uma página que apelidei de página piloto para cada página onde ela vai decidir para qual versão ela vai direcionar de acordo com o dispositivo.
então para cada página serão 4 páginas.
1 - Página Piloto : A que vai fazer o redirecionamento
2 - Página para desktop
3 - Página para tablet
4 - Página para celular
Parece muito trabalho né? Mas na prática verá que não é e funciona.
Supomos que tenho só a página Home. Então ficaria assim:
Para melhorar ainda mais o entendimento vamos supor que temos a página Home e a página Contato.
Ficaria assim:
Coloquei um hífen na frente das páginas home só por uma questão de organização, pois Home começa com H, e como é minha página principal fica melhor para trabalhar se forem as primeiras e estiverem próximas uma abaixo da outra.
Eu usei o que chamo de página piloto onde vai conter as configurações para o redirecionamento pois dessa forma nos meus menus fica mais fácil e prático de manusear. Pois assim não preciso em ir em cada menu de cada versão e ficar trocando as referências. Pois todo menu vai apontar para a página piloto, e ela que vai direcionar para a página certa.
COMO DEVE SER CADA PÁGINA PILOTO:
Para que o carregamento da página piloto seja o mais rápido possível eu configurei uma página em branco nas dimensões mínimas que o WA4 permite.
Na aba SEO marco para que os mecanismos de busca não localize as páginas piloto. (só para as páginas piloto)
E no head de cada página piloto usei o seguinte código:
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINACELULAR'>")
else
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINACELULAR'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINATABLET'>")
else
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINADESKTOP'>")
</script>
Os valores 600 e 800 são as dimensões para atender a condição.
Então vai seguir a ordem das seguintes condições:
1ª condição) Verifica se o dispositivo tem uma largura menor que 600px. Se sim vai direcionar para a página para celular, se não vai para a próxima condição.
2ª condição) Verifica se o dispositivo tem uma largura menor que 800px. Se sim vai direcionar para a página tablet, se não vai para a próxima condição
3ª condição) Vai direto para a página desktop (só executa esta condição se não atender nenhuma das anteriores)
Então vai seguir a ordem das seguintes condições:
1ª condição) Verifica se o dispositivo tem uma largura menor que 600px. Se sim vai direcionar para a página para celular, se não vai para a próxima condição.
2ª condição) Verifica se o dispositivo tem uma largura menor que 800px. Se sim vai direcionar para a página tablet, se não vai para a próxima condição
3ª condição) Vai direto para a página desktop (só executa esta condição se não atender nenhuma das anteriores)
Lembrando que você determinas as dimensões e para que página quer o redirecionamento. Eu usei essas medidas pois em testes encontrei os melhores resultados. Mas é opcional. E caso você tiver mais páginas específicas para outra resoluções como exemplo ipad, terá que adaptar conforme seu projeto.
Testando pelo Teste de compatibilidade com dispositivos móveis do Google utilizando o url principal de onde usei para fazer a simulação e printar os exemplos veja o resultado.
Provando assim que ele o Google não penalizou o site e se observar a url, o teste está direto na url principal do site. Ou seja, não foi feito teste em cima da url do celular como os outros citados acima.
Testando então pelo PAGE SPEED INSIGHTS (óbvio que não foi feito nenhum tipo de otimização, então não leve em consideração a pontuação e sim qual versão ele localizou para cada dispositivo)
Mas se numa pesquisa pelo celular o Google mostrar a versão desktop?
Pois agora tem mais uma questão, se caso for localizado por uma pesquisa no Google uma página que não corresponde ao dispositivo correto, tenho que informar para não prosseguir e voltar para a página piloto.
Então para cada página de cada dispositivo, inclusive a página para desktop tenho que colocar um código no inicio do head, ou seja; na primeira linha. Sendo que a condição tem que ser oposta a condição que foi inserida na página piloto.
O código seria:
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (CONDIÇÃO)
document.write("<meta http-equiv='refresh' content='0; url=URLDAPÁGINAPILOTO'>")
</script>
Vamos a lógica para tentar explicar melhor. Tomamos como exemplo a página contato. Sento que a página contato piloto seria contato.html; essa faz a verificação das dimensões e envia para a página da versão desejada. Sendo por exemplo, contato-m.html (para celular) , contato-t.html (para tablet) , contato-d.html (para desktop)
No head da página contato.html (que seria a página piloto de contato) teria o seguinte código.
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-t.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-d.html'>")
</script>
Então a condição do exemplo é: Primeiro ele verifica se a de largura do dispositivo for menor que 600px ele vai redirecionar para a versão contato para celular (contato-m.html), se for maior ele passa para a segunda condição; se for a largura do dispositivo for menor que 800px ele redireciona para a versão para tablet (contato-t.html). Se for maior ele passa para terceira condição que é redirecionar para a versão desktop (contato-d.html).
Mas se pelo mecanismo de busca. O internauta fizer uma pesquisa pelo celular e o resultado for mostrado por exemplo a url para desktop (contato-d.html), Ao clicar, obviamente o arquivo acionado será contato-d.html ( o que corresponde a versão desktop), a qual não iria ser bem visualizada no celular.
Por este motivo no head da versão desktop (contato-d.html) teria de ter o seguinte código:
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>
* Informei que: Ao acessar o contato-d.html (versão desktop) vai verificar a largura, ser for menor que 800px ele vai para a página contato.html (que é a página piloto a qual vai verificar a largura e o e enviar para a página certa)
Já se no caso em uma busca pelo desktop, o resultado apresentar a versão celular (contato-m.html). Ao clicar mostraria a página que deveria mostrar somente pelo celular. Então seria muito estranho o internauta visualizar aquela página fina e espichada. Por isso no head da versão celular (contato-m.html) deveria ter o seguinte código no head.
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")
</script>
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")
</script>
Coloquei o mesmo código inserido nas páginas piloto , porém se a condição obedece a resolução que eu quero que a página abra eu mato com ENDIF, e as condições em que a resolução do dispositivo não obedece a página ele envia para a página piloto. Dái a piloto encaminha para a página que atenda o a largura do dispositivo.
Você pode até não querer usar uma página piloto, neste caso teria que substituir onde o codigo envia para a página piloto para a página exata correspondente a cada dispositivo. E também ter o trabalho de ajustar em cada menu do seu projeto. O que é meio cansativo inda mais se utilizar um menu feito por script.
Resumindo, tomando como exemplo a página contato usando as dimensões escolhidas neste post sendo para os direcionamento; os códigos a serem inseridos no head (completos) em cada página ficaria assim:
PÁGINA PILOTO | contato.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-t.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-d.html'>")
</script>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-t.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-d.html'>")
</script>
PÁGINA DESKTOP | contato-d.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
endif
</script>
PÁGINA CELULAR | contato-m.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>
PÁGINA TABLET | contato-t.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
if (width < 800)
endif
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
if (width < 800)
endif
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>
Tá achando complicado né? Mas saiba que no WARC para ficar um site bacana também tem seus ajustes para cada versão. Mas isso vai ser mostrando na série de postagens com o tema Criando um site com M7admin com WA 4 e WA RC
DETALHE MUITO IMPORTANTE:
UTILIZE DE TITULO DA PÁGINA, DESCRIÇÃO, PALAVRAS CHAVES ; DIFERENTES ENTRES AS PÁGINAS MOBILE, DESKTOP E TABLET..
Além de favorecer o site em SEO, evita que o Google bot leia as duas versões, que são duas URLs, contendo o mesmo conteúdo, o famoso conteúdo duplicado que tanto falamos.
HEHEH. .me lembrou as pessoas que gostam de fazer sites ONE PAGE (de uma página só); nem imaginam como esse prática prejudica para SEO). "Respeito outras opiniões".
Algumas pessoas saem falando por aí que o Google pune os sites que não são responsivos. Foi provado o contrário. Tanto que o próprio Google sugere uma forma que deve ser feito para sites em várias versões; ou seja, sites que tem versões para cada dispositivo.
Segue link da orientação do Google: https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=pt-br
E outra, se fosse assim sites gigantes como o Facebook estariam punidos.
Mas confesso a vocês, que antes de ter conhecimento sobre as orientações do Google eu já fazia da minha maneira (citada neste post) , e acabei me acostumando com a mesma e nem experimentei usar a do Google. Pelo menos comigo a que uso sempre funcionou, passou nos testes do Google e o site não foi penalizado..
Quer ver On line? . em breve.... Pois estarei dando continuidade na série com o tema Criando um site com M7admin com WA 4 e WA RC, onde estarei construindo aos poucos um site com WARC e o gerenciador de conteúdo para webacappella M7ADMIN e outro com WA4 usando também o gerenciador de conteúdo M7ADMIN.
Como as postagens do tema acima tem vídeos makingoff, achei interessante criar este explicando a utilizar o WA4 em várias versões para que os vídeos das outras postagens não fiquem muito grandes.
GOSTARIA DE LEMBRAR QUE MEUS POSTS TEM SOMENTE O INTUITO DE COMPARTILHAR MINHAS EXPERIÊNCIAS, MAS NÃO SOU NENHUM GURU; E PEÇO QUE QUALQUER PESSOA TENHA UMA SUGESTÃO DE MELHORIA, ENVIE UM E-MAIL PARA CONTATO@WEBACAPPELLASHOW.COM.BR QUE SERÁ ANALISADA E MUITO BEM VINDA.
Abração a todos.
FRASE DO DIA:
"A experiência nem sempre está no tempo de vida e ou até mesmo no tempo que faz a mesma tarefa. Muitas das vezes a experiência está no poder de observação. Quem se acha muito fera por fazer determinada ação por muito tempo, pode pecar e não perceber que está bitolado"
FRASE DO DIA:
"A experiência nem sempre está no tempo de vida e ou até mesmo no tempo que faz a mesma tarefa. Muitas das vezes a experiência está no poder de observação. Quem se acha muito fera por fazer determinada ação por muito tempo, pode pecar e não perceber que está bitolado"
