O crescimento do uso dos dispositivos móveis aumenta a cada ano, de acordo com dados da 27ª Pesquisa Anual de Administração e Uso de Tecnologia da Informação nas Empresas, realizada pela Fundação Getúlio Vargas de São Paulo, o número de smartphones em uso no Brasil chega a 168 milhões.

E se seu site for acessado de um dispositivo móvel? Qual será a experiência do usuário? Eficiente ou não? E as compras, é possível realizar uma compra de forma rápida e sem grandes dificuldades?

A solução é adaptar seu site a qualquer tipo de dispositivo ou tela, tornando uma experiência memorável e consequentemente aumentar a taxa de conversão da sua loja virtual.

O layout responsivo afeta as suas vendas! Mas não se preocupe, vou esclarecer todas suas dúvidas e te mostrar as melhores dicas para aumentar a taxa de conversão do seu e-Commerce. Mas antes disso, recomendo você ler o artigo O que é um Layout Responsivo?.

Vamos lá, leia o conteúdo para:

  • Entender o que é um site responsivo;
  • O que é Mobilegeddon;
  • Ver exemplos de sites responsivos;
  • Como afeta a experiência do usuário;
  • Dicas para você criar um site responsivo;
  • Testar seu site;
  • E por fim, analisar seu site com Analytics.

Você já tentou acessar seu site em algum dispositivo móvel? Como foi a experiência?

Se seu site não está adaptado aos dispositivos móveis, as respostas geralmente serão essas:

  • Site quebrado;
  • Site com uma péssima experiência de navegação;
  • Site lento;
  • Site com imagens desproporcionais;
  • Site fica pequeno para leitura.

E por aí vai… Está aí uma das importâncias do uso de um layout responsivo, melhorar e facilitar a navegação do usuário.

O que é um site responsivo?

O design web responsivo (RWD) é uma abordagem ao web design que tem como objetivo permitir que as páginas sejam exibidas em qualquer tamanho de tela, navegador ou dispositivo.

Um site projetado com layout RWD se adapta aos dispositivos usando grades “grids”, imagens flexíveis e CSS.

  • O conceito de grade exige que o dimensionamento dos elementos da página estejam em unidades relativas, como porcentagens, ao invés de unidades absolutas como pixels ou pontos.
  • As imagens flexíveis também são dimensionadas em unidades relativas, de modo a evitar que elas sejam exibidas fora do elemento que está inserida.
  • As medias queries permitem que a página use diferentes regras de CSS com base nas características do dispositivo no qual o site está sendo exibido, geralmente a largura do navegador. Exemplo, se a largura do navegador do usuário for 300 pixels um botão “Download” é fixado na tela.

O Magento até possui recursos para criar versões mobile da loja virtual, utilizando o user agent do navegador. Porém essa técnica já está ultrapassada e o diferencial de um layout responsivo é que não há necessidade de criar arquivos diferentes para cada dispositivo.

O site responsivo se tornou importante com o aumento dos tráfegos realizados por dispositivos móveis. Dependendo o seu segmento, seu público-alvo, o tráfego por smartphones ou tablets pode representar mais da metade dos acessos.

Também, em 21 de abril de 2015, o Google anunciou o Mobilegeddon, uma atualização no seu algoritmo, fazendo com que sites que não possuem versões responsivas sejam prejudicados no posicionamento dos resultados das buscas.

O que é Mobilegeddon?

O Mobilegeddon é o nome dado a uma atualização do Google de 2015, que prometeu beneficiar sites responsivos nos posicionamentos dos resultados de pesquisa do Google.

A regra entrou em funcionamento em 21 de abril de 2015, tornando-se temida por empresários e proprietários de sites. Porém nada foi publicado ou informando de maneira concreta, como o funcionamento e os reais efeitos da atualização.

Sites responsivos e não responsivos

Até que uma empresa de consultoria Stone Temple, divulgou uma pesquisa sobre as mudanças do Google (EUA) após a atualização.
Na imagem podemos observar que a atualização fez com que sites não responsivos tiveram mais quedas do que aumentos no posicionamento. Já para sites responsivos tiveram maior ganho de posições do que perda.

Cerca de 15 mil URLs foram analisadas nas primeiras posições, e cerca de 70% delas possuíam um layout responsivo.

Portanto, fica claro que o RWD faz diferença no posicionamento do Google. Estar nas primeiras páginas do Google é crucial para quem procura acessos para seu site.

Exemplos de sites responsivos

Veja alguns exemplos de sites responsivos que utilizam a plataforma Magento.

https://www.saraiva.com.br

Saraiva

Porta dos Fundos

Porta dos fundos

Leitura recomendada

Como afeta a experiência do usuário?

Já está claro que um site responsivo é extremamente relevante para a experiência do usuário.

No site responsivo o visitante precisa interagir de forma leve, rápida, e com o menor consumo de dados possível.

Ter um site rápido é muito importante para que os usuários permaneçam na página (segundo a Neil Patel, 25% dos visitantes abandonam um site se ele demorar mais de 4 segundos para carregar).

Com isso, seus usuários conseguem focar no conteúdo, gerando valor e interação na experiência podendo aumentar o índice de conversões.

Melhores temas responsivos para Magento

Separei aqui alguns dos melhores temas responsivos disponíveis no ThemeForest e TemplateMonster para Magento.

Milano – Fashion Responsive Magento 1 & 2 Theme

Milano

Visualizar ao vivo

Delveti – Plumbing Supplies Magento Theme

Delveti

Visualizar ao vivo

Magetique – The Most Comprehensive Multipurpose

Magetique

Visualizar ao vivo

Glassonic Magento Theme

Glassonic

Visualizar ao vivo

Testando seu site

Ter uma loja virtual compatível com dispositivos móveis é crucial para sua  presença on-line.

A ferramenta de teste de compatibilidade com dispositivos móveis do Search Console é um jeito mais fácil de testar se uma página no seu site é otimizada para qualquer tipo de dispositivo. Basta digitar a URL do seu site que você deseja testar.

A ferramenta inclui uma captura da tela do seu site, mostrando como o Google vê seu site no dispositivo móvel, seguido de uma lista de todos os problemas de usabilidade.

Outro método para verificar é pelo próprio navegador, um exemplo, o Chrome. Primeiro acesse o seu site, e em seguida aperte a tecla “F12” e em seguida “Ctrl + Shift + M”.

Outra ferramenta que podem ajudar é a Screenfly.

E você, utiliza outra ferramenta para testar o design responsivo do seu site? Então compartilhe com a gente deixando nos comentários.

Analisando com Analytics

Os relatórios do Analytics são cruciais para você entender o comportamento do seu público e até aumentar suas vendas. Imagine você com uma loja virtual, que não está otimizada para dispositivos móveis,  você precisa saber quais dispositivos que são acessados e melhorar a navegação com base nos relatórios.

Vamos lá, primeiro vamos analisar os dispositivos móveis que acessam seu site.

Com o período já definido, vá em Público >> Dispositivos Móveis >> Dispositivos. O resultado deve ser semelhante a esse:

Analytics

Outro relatório importante que podemos analisar é a tecnologia usada pelos usuários (navegador e sistema), vá em Público >> Tecnologia >> Navegador e Sistema.

Com esses relatórios você consegue entender como seus usuários utilizam seu site. Procure melhorar sua loja virtual com base nisso.

Conclusão

Recomendo a utilização do layout responsivo agora mesmo! Caso ainda não tenha, não perca tempo!

Essa técnica proporciona uma experiência de navegação incrível para seus usuários, consequentemente aumenta seu tráfego e sua taxa de conversão.