abr 02
2 ferramentas gratuitas para analisar se seu site e responsivo

2 ferramentas gratuitas para analisar se seu site é responsivo

Vamos te ajudar a descobrir se sua loja virtual é realmente responsiva com algumas dicas simples e ferramentas gratuitas.

Você que é empreendedor sabe muito bem da importância de uma loja que se adapte a celulares e tablets.

De acordo com a Desktop, Social & Mobile, as pesquisas via dispositivos móveis aumentaram em 109%.

Mesmo que sua agência tenha feito um bom trabalho, informação nunca é demais.

Confira nossas dicas para verificar por si só.

 

Conceito

O conceito por trás da responsividade é a adaptação.

Antigamente construíamos sites com Layouts fixos, cada coisa em seu lugar.

Com o passar do tempo e a diversificação nos tamanhos de tela, foi preciso pensar em novas maneiras de se trabalhar os códigos e elementos.

Agora trabalhamos com Layouts flexíveis que conseguem ler automaticamente a largura da tela e mostrar ao usuário o que ele precisa.

Esse conceito ainda é um pouco difícil de ser entendido por alguns usuários, que ainda pedem para que o site no mobile seja uma versão miniatura do desktop.

Quem nunca se deparou com um site tão pequeno que precisou dar zoom para ler o que estava escrito?

Códigos responsivos são construídos em colunas.

Colunas essas que podem estar lado a lado ou acima e abaixo umas das outras, dependendo do monitor.

 

site responsivo

Como saber se sua loja é responsiva

A resposta para essa pergunta parece obvia.

Basta entrar pelo celular e verificar você mesmo.

Mas responsividade não significa apenas caber no celular.

Além de se adaptar a todos os tipos de dispositivos (Tablets, telas gigantes da Apple ou Iphones) é preciso que seja intuitivo realizar qualquer ação.

Esses detalhes vão desde uma boa resolução das imagens até botões que não são maiores ou menores para o dedo do usuário.

 

1 – Responsinator

Responsinator é um site que simula diversos tamanhos de tela e sistemas operacionais, te dando assim uma boa visão de como sua loja se comporta com esses dispositivos.

Basta inserir a URL da sua loja no canto superior esquerdo da tela e visualizar como ficou.

loja virtual responsiva

 

2 – Teste de compatibilidade do Google

O site acima te ajuda a ver com seus próprios olhos o Layout da sua página.

Porém nem sempre beleza significa usabilidade.

O Google possui uma ferramenta que analisa o código da sua loja para verificar se realmente é compatível com as necessidades dos usuários.

Como utilizar

  1. Acesse o link clicando aqui.
  2. Insira a URL do seu site ou loja
  3. Clique em testar URL

Caso haja problemas, a própria ferramenta te dará uma análise um pouco mais aprofundada sobre os erros e dicas de como melhorar.

Teste de compatibilidade com dispositivos moveis

 

Versão exclusiva para mobile

Fora a responsividade existe também a possibilidade de criar uma versão diferente do seu site apenas para dispositivos móveis.

Essa prática é recomendada em casos específicos, já que gera um custo extra de desenvolvimento e é possível realizar adaptações de acordo com o tamanho da tela sem precisar criar uma nova versão.

Caso opte por realizar versões diferentes para cada dispositivo é necessário cuidar para que ambas versões possuam a mesma URL principal.

Maneira errada: meusite.com e mobile.meusite.com

O Google só faz a indexação de URLs que são boas para todos os tipos de dispositivos.

 

Mobile First

Nós aqui na agência utilizamos uma forma de desenvolvimento ainda mais moderno que a responsividade, o Mobile First.

Entenda a trajetória desses formatos:

  1. Antigamente os sites eram construídos para computadores e com a chegada dos celulares não era realizada nenhuma adaptação, sendo necessário navegar pelo site com muito zoom e paciência.
  2. Com o aumento dos usuários acessando sites através do celular desenvolvedores começaram a criar uma versão para cada dispositivo.
  3. Chegou a tecnologia responsiva, que é inovadora e transforma os Layouts automaticamente para ficar perfeito em qualquer tamanho de tela.

A grande diferença é que, com a tecnologia responsiva os sites são criados para o computador e adaptados para o mobile.

Com a expansão das telas menores temos o desenvolvimento mobile first, ou seja, o site é desenvolvido para celular e adaptado para o computador.

 

Pequenas dicas que podem fazer a diferença

1- Avise o Google sempre

Caso seu site possua uma versão específica para dispositivos, não deixe de avisá-lo.

Assim sua loja virtual não perde indexação e seu usuário não fica frustrado.

 

2 – Evite erros comuns

Se a versão desktop possui vídeos repense utilizá-lo para mobile.

Todas as vezes que um recurso dá erro ao exibir uma página o mesmo é reportado ao Google, gerando penalização.

 

Veja também

5 estratégias de Marketing para e-commerce

Sobre o Autor

Helen Paiva é desenvolvedora Front End orgulhosa, especialista em comportamento do consumidor e apaixonada por UX/UI Design.