Skip to content Skip to sidebar Skip to footer

O que é site responsivo? Como configurar o e-commerce no celular?

O principal objetivo de um e-commerce de qualquer segmento é facilitar vendas. Se você está pensando em criar o seu site agora, é importante considerar também a experiência que o seu cliente vai ter. Qualquer aparelho pode acessá-lo e ter uma navegação satisfatória? Esse é um dos conceitos básicos de um site responsivo.

Segundo o SPC Brasil, a maioria dos brasileiros que compram online fazem isso usando um smartphone (66,8%), seguido do notebook (39,5%), o desktop/PC (39,2%) e o tablet (9,3%). Isso quer dizer que o seu site precisa funcionar bem em todos esses dispositivos, principalmente nos aparelhos de celular.

Hoje, vamos falar sobre o que é site responsivo e como criar um. Vamos saber mais?

Na prática, o que é um site responsivo?

Ilustração do conceito de um site responsivo em diferentes plataformas: tablet, smartphone, notebook e computador desktop.

Basicamente, um site responsivo é aquele que funciona bem em qualquer aparelho, com qualquer resolução de tela e velocidade de internet.

Hoje é bem difícil encontrar um site que não dê para ser acessado pelo celular, mas nem por isso eu ouso dizer que essa é a realidade na maioria dos e-commerces. Vou te explicar melhor:

Pense em quando você mesmo vai fazer uma compra pelo celular. A tela do site até fica bem encaixada nas dimensões do seu aparelho. Parece perfeito, mas então você observa que as letras ficam tão pequenas que é preciso utilizar o zoom para ler alguma informação.

As opções estão tão juntas que você acaba clicando em algum lugar que não queria. Esse é um exemplo de site que não é responsivo de verdade.

Baixe o e-book grátis!

Mais que uma importância estética, essa é uma questão de sobrevivência. Se um cliente encontrar dificuldades como essas para navegar pelo seu site, com certeza vai retornar para a página de pesquisa e encontrar um de seus concorrentes.

O próprio Google já informou que sites não-responsivos serão rebaixados em seu rankeamento. Então não vai adiantar nada você fazer um ótimo trabalho de SEO e morrer na praia, certo?

Além de um site responsivo, para ter estar nas primeiras páginas do Google, o uso correto das palavras-chave é fundamental. Saiba como fazer isso seguindo esse guia completo de palavras-chave para e-commerce que eu fiz pra você.

Como fazer um site responsivo?

Se você é o tipo de pessoa que só de pensar em códigos HTML, programação e afins sente um arrepio, saiba que eu não vou entrar nesse mérito – até porque essa não é a sua função. A empresa ou programador responsável por criar o seu site é quem deve cuidar disso para você.

Apesar de não se envolver na área técnica, criar um site responsivo é um trabalho que deve ser feito a quatro mãos e parte da responsabilidade no resultado final é sua. Por isso, é importante entender alguns pontos para solicitar, orientar e validar o serviço contratado. Continue na leitura que temos muito pra conversar ainda.

Ilustração mostrando a criação de um site responsivo, com três pessoas inserindo elementos na tela de um monitor.

1. Comece pela versão Mobile

A maioria dos desenvolvedores começam a criação de um site pela versão desktop e depois vão adaptando para o mobile. O ideal aqui é você pedir que ele inverta esse processo de criação.

Digo isso porque, muitas vezes, são inseridos elementos, ícones e cores muito elaboradas que funcionam muito bem no computador, mas quando vemos na tela pequena de qualquer smartphone acaba ficando meio confuso. Começando por essa segunda versão vai ser bem mais fácil ter um site responsivo de verdade.

2. Design Flexível

Essa é a principal mudança quando se pensa no design de um site responsivo. A cada dia que passa as telas dos aparelhos tendem a ficar mais estreitas.

Você precisa pensar de maneira funcional, considerando a experiência do seu cliente em potencial. Para ter um layout que funcione em um monitor de 50’’ ou em um celular na posição vertical, a solução é utilizar unidades relativas.

O uso dessas unidades implica em deixar de lado as medidas fixas em pixels e pensar em porcentagens dentro da página. Assim, uma imagem que ocupava 80% da tela, por exemplo, vai ocupar essa mesma proporção em qualquer dispositivo, deixando tudo mais fácil.

3. Deixe o seu site mais rápido

Um site lento não é nada atrativo para o seu cliente. Segundo informações do próprio Google, 50% dos usuários esperam que a sua página abra em até 2 segundos e depois disso a taxa de conversão cai em 20% a cada segundo estendido.

Esse é um grande desafio para o seu site, ainda mais que grande parte dos usuários ainda utilizam conexões 3G. Mas, com alguns detalhes, dá sim pra diminuir consideravelmente esse tempo de resposta, veja:

  • Mantenha um layout limpo;
  • Otimize o tamanho das imagens para até 70 Kb cada;
  • Agrupe imagens com uso de código CSS;
  • Evite subir vídeos direto no site. Hospede-os no Youtube;
  • Reduza o número de plugins.

O seu desenvolvedor já deve saber de todos esses cuidados para deixar o site responsivo mais rápido, mas é sempre bom reforçar. E pra saber se ele fez tudo certinho, eu sugiro que você teste a velocidade do site.

Existem várias ferramentas que fazem essa testagem para você. A minha sugestão é o PageSpeed Insights – que é nativo do Google. Apesar de não ter muitas funções extras, cumpre muito bem o seu papel por ser uma plataforma gratuita.

4. Cuidado com os Efeitos

Eles costumam ser muito apreciados quando pensamos no design para desktop, mas na versão mobile e pensando em um site responsivo, além de poluído, pode ser que ele fique muito pesado. O melhor é avaliar onde esse artifício é realmente necessário.

Talvez seja interessante inserir efeitos visuais em um menu dropdown, que só aparece quando selecionado, o que vai deixar o site mais limpo, além de aumentar o interesse em navegar pelos links. Mas como eu disse antes, muito cuidado para esse artifício não ter um efeito contrário.

Ferramentas para fazer Sites Responsivos

Ilustração de tela de um computador. Braços robóticos colocam elementos de um site na tela.

Agora chegou a hora de criar o seu próprio site responsivo. Mas antes de dar as minhas tradicionais sugestões, eu quero te dizer que existem várias ferramentas no mercado (algumas até com pacotes gratuitos) como o Wix que fazem um site de forma fácil e intuitiva.

Eles são ótimos para quem nunca teve um site e quer começar sem muitas pretensões. Mas por serem pouco técnicos e rodarem com um sistema já antigo, com eles dificilmente você será visto no Google, então é um caso a se pensar. Dito isso, vamos prosseguir?

WordPress

Sem sombra de dúvidas o WordPress é a ferramenta mais tradicional na criação de um site totalmente responsivo para qualquer finalidade. Seu destaque fica por conta dos infinitos plugins para instalar qualquer tipo de extensão.

Ele funciona de forma Open Source – isso significa que é um código aberto é gerado e com ele o seu programador consegue criar o site do zero de forma gratuita. Por dar muito trabalho e demorar meses, grande parte dos profissionais nem costumam fazer esse tipo de serviço.

Pra finalizar, uma dica: fique atento às atualizações. O WordPress precisa ser atualizado constantemente ou fica lento e com vários bugs. Então, se a sua ideia é ter um site responsivo e não precisar fazer uma manutenção regular, ele pode não ser muito viável.

Drupal

Vindo na mesma linha de ferramentas Open Source, o Drupal compartilha das mesmas vantagens e limitações nesse aspecto. No entanto, ele é indicado para aqueles que precisam de um site mais complexo, com informações de vários clientes ou colaboradores.

Apesar de exigir um conhecimento ainda maior de programação (por ser mais avançado), ele é proporcionalmente mais poderoso na criação de um site responsivo e versátil. Além disso, ele possui uma gama ainda maior de possibilidades e predefinições específicos para cada segmento como hospitais, ONGs e escolas.

Squarespace

Já no Squarespace você assina pacotes mensais para utilizar o serviço. Isso não é uma grande desvantagem ao pensar que nas plataformas Open Source você tem que pagar pela hospedagem do site e o nome do domínio.

Ainda nessa comparação, mesmo as plataformas Open Source sendo gratuitas, provavelmente você precisará de algumas ferramentas premium para deixar o seu site responsivo e visualmente agradável. E para isso um valor deve ser investido.

Voltando ao Squarescape, ele oferece, basicamente, os mesmos recursos que o WordPress. As diferenças aqui ficam por conta de não ter grandes problemas de atualização, ser mais fácil de programar e ter designs mais “profissionais”, porém com menos opções de customização.

No final das contas, não existe uma ferramenta melhor ou pior para criar um site responsivo. Todas elas têm potenciais e pontos fracos, o que vai ser determinante é a sua necessidade nesse momento.

Agora, se o que você procura é facilidade de verdade, o Amplia Vendas tem uma plataforma que cria sites responsivos naturalmente. Nesse caso, pode esquecer todas essas complicações das ferramentas para criar site e esqueça até o seu programador.

Você mesmo pode resolver tudo. É escolher o plano, o template mais adequado para o perfil da sua empresa, sincronizar com o seu sistema de estoque e pronto. Em alguns cliques o seu site responsivo está liberado para começar a vender muito.

Quer saber como vender online com o Amplia Vendas? Conheça todas as funções e vantagens aqui.

Monte seu site hoje com o Amplia