fbpx

Blog Openk

Provedora de soluções de vendas e gestão

  1. Home
  2. • blog

20/09/2021
Comentários

Duas mulheres em uma mesa de reuniões. Uma segura um um tablet, mostrando algo à outra, que está com feição de interessada.

Se perguntarmos em uma roda de 10 donos de e-commerce, pode ter certeza que ao menos nove deles vão dizer que “têm um site com design responsivo”. Mas, olhando com mais atenção, vemos que ao menos meia dúzia deles tem,na verdade, uma plataforma bem complicada.

Vamos te explicar melhor: hoje é bem difícil achar um site que não abra em mobile e desktop. Mas o design responsivo não se resume a isso. Você mesmo deve conhecer algum site de vendas que parece ter tudo no lugar, mas a fonte é pequena e sem leitura, as caixas são tão próximas que, ao clicar em uma opção acaba selecionando a do lado, ou então ele demora para carregar. Esses são alguns exemplos de sites nada responsivos.

Se você não quer ser um desses casos, vem com a gente que neste texto vamos te dizer exatamente o que o seu e-commerce precisa para ser responsivo.

Por que ter um site com design responsivo?

Mão apoiando caderno com fluxogramas à mão. A outra mão está em um notebook aparecendo “html” e várias janelas na tela.

De início essa pode até parecer uma questão de estética. É lógico que ter um e-commerce “redondinho” e que encha os olhos é fundamental. Ninguém entra em uma loja física se a vitrine não agrada, e o mesmo acontece com os e-commerces.

Mas vai muito além. O design responsivo influencia em pontos que talvez você nem tenha parado para pensar, mas que pode te trazer grandes resultados:

  • Acesso pulverizado: Normalmente os sites são criados baseado nas dimensões de um monitor. Mas hoje, 72% dos compradores online são usuários mobile. Desses, ainda há uma série de modelos de telas entre celulares e tablets, das mais quadradas às mais estreitas. Sobre isso, a regra é lógica – quanto mais dispositivos abranger, maior será a chance de venda;
  • Sensação de segurança: Só no primeiro trimestre de 2021 as tentativas de fraude no e-commerce cresceram 83%. Com isso, é natural que, se o site demorar para carregar ou tiver as informações fora do lugar, o cliente fique com um pé atrás em relação à segurança da sua marca;

#DicaOpenK: O design responsivo é um ótimo passo para passar a segurança que o seu consumidor espera, mas não o único. No nosso texto “loja confiável: 5 dicas para mostrar aos seus clientes que sua loja é segura” te mostramos outras medidas a serem tomadas.

  • Rankeamento no Google: Seguindo o padrão de compra, a maior parte das vendas hoje começam com uma pesquisa nos mecanismos de busca. E se você tiver um design responsivo, eles vão ser os seus maiores aliados ou, caso contrário, piores inimigos. Veja os dois pontos em que eles influenciam:
    • Na construção de um design responsivo é utilizada uma única URL e a estrutura de HTML é personalizável automaticamente para diversos aparelhos – e não um código para cada formato. Assim o buscador precisa mapear o site apenas uma vez, o que favorece a posição na pesquisa;
    • No mundo contemporâneo, um segundo a mais de espera para abrir um site é muito tempo e o Google entende isso. Tanto é que o próprio John Mueller, porta voz da empresa, já anunciou que “sites que levam mais de 2 segundos para carregar uma URL têm menos URL’s indexadas”. E ainda mais: “após 2 segundos sem resposta, o sistema interrompe a indexação”.

#DicaOpenK: Além de ter um design responsivo, é preciso também ter uma atenção redobrada no conteúdo e imagens do seu site se quiser alcançar as primeiras posições. Sobre isso, veja nosso estudo dirigido sobre “SEO para e-commerce: como otimizar seus resultados no Google?”.

Design responsivo na prática

Duas mulheres em uma mesa de reuniões. Uma segura um um tablet, mostrando algo à outra, que está com feição de interessada.

Agora que você entendeu como é importante ter um site adaptado para qualquer aparelho, já tem o que é necessário para que a gente possa entrar na parte mais técnica do trabalho.

Mas antes disso, precisamos deixar bem claro que o nosso intuito não é que você seja um expert de programação e que tome sozinho todas as medidas para deixar o seu design responsivo. Na verdade, sendo bem diretos, essa não é a sua função, e sim do seu programador ou empresa dedicada.

De qualquer forma, é necessário que você saiba o que precisa ser feito para orientar e acompanhar o trabalho feito pelo seu prestador. Existem muitos profissionais no mercado que entregam um e-commerce que apenas abre em todos os aparelhos, e não, de fato, responsivo.

Veja só o que você deve exigir:

Mobile First

Vamos começar com uma dica exclusiva para quem ainda não tem um e-commerce dar um ótimo pontapé inicial: peça para o seu programador começar pela versão para aparelhos móveis – a grande maioria deles começam pelo desktop.

Essa dica vai facilitar muito a sua vida (além de diminuir os custos). Começando a pensar tudo a partir da tela pequena e internet de dados móveis, o design ficará mais limpo, removendo tudo o que não for necessário. Depois é só adaptar para os computadores com os princípios de um design responsivo.

Quando se faz o contrário, com o foco nos monitores, é muito comum que elementos em excesso sejam inseridos. Então, quando se passa para a versão de celulares, as refações são inúmeras até que se consiga encaixar tudo.

Agora, se você já tem um e-commerce e deseja apenas melhorá-lo, vamos à segunda dica.

#DicaOpenK: Além do design, o mobile deveria ser sua primeira opção também nas estratégias de vendas – afinal, boa parte do seu público está ali. Descubra por que o e-commerce mobile é (ou deveria ser) sua próxima aposta.

Design responsivo e Design adaptativo

Lembra quando falamos que muitos sites de e-commerces até abrem em todos os aparelhos, mas funcionam de forma personalizada em apenas alguns deles? Esse problema acontece, principalmente, pelo modo como o seu profissional contratado trabalha.

Vamos supor que você tem uma imagem criada para todo o fundo do seu site, com 768 px de tamanho (smartphones em versões maiores e tablets de tamanho pequeno). No design adaptativo ao adaptar para 1024 px (telas de alta resolução), a imagem será “esticada” para o tamanho dessa tela. O problema é que isso pode deixar a imagem pixelada ou sem proporção.

Já no design responsivo não há este problema porque as medidas serão sempre em proporção. Em um novo exemplo, considerando que o seu e-commerce precisa de uma imagem para pop-up que vai ocupar 50% da tela. Seja qual for o aparelho, essa foto vai utilizar 50% da tela – seja em um aparelho com 6’’ ou 60’’.

#DicaOpenK: Dimensões são importantes, mas nunca podemos deixar de lado a parte estética. Descubra “como alinhar design a usabilidade de loja virtual”.

Preste atenção na velocidade do site

Já focamos bastante na velocidade do site, mas ainda não te contamos como deixá-lo mais leve.

Sobre isso, a nossa instrução é saber qual a sua situação atual: se dirija agora mesmo até o seu domínio (ou teste a primeira prova do seu desenvolvedor caso ainda esteja construindo) e faça o teste no PageSpeed Insights do próprio Google. Ele é grátis e, além de te mostrar a velocidade, ainda fornece alguns insights.

Captura de tela do site “PageSpeed” com análise da velocidade de outros sites de acordo com seus critérios.

À primeira vista ele parece ser bem complicado, principalmente para quem não entende inglês. Mas não tenha receio porque vamos te contar o que significa cada um desses termos:

  • Classificação geral da velocidade: Ela não é dada em segundos, mas em um esquema de pontuação baseado em diversas métricas e com classificação por esquema de cores.
  • Dados de campo: Se trata de índices de desempenho colhidos a partir do Relatório de Experiência de usuários selecionados do Google Chrome. São eles:
    • FCP: Primeira exibição de conteúdo. É o tempo levado para qualquer elemento do seu site carregue: imagens, textos ou renderização da tela;
    • FID: Latência de entrada. Primeira exibição de conteúdo. É aquele tempo entre o momento que você clica no anúncio ou digita o link da página e a página começar a carregar.
    • LCP: Maior pintura do conteúdo. É o tempo necessário para que o maior elemento da tela seja aberto. No caso dos e-commerces, geralmente é um banner de apresentação no topo da home. Mas pode ser texto também.
    • CLS: Deslocamento de layout cumulativo. Sabe quando você vai clicar em um botão no site mas a página ainda está carregando e no exato momento aquele botão vai para cima? Então, isso pode prejudicar bastante o seu ranqueamento, principalmente se fizer o usuário clicar onde não desejava, e isso aumenta a taxa de rejeição.

#DicaOpenK: Quando for fazer o teste de velocidade é importante sempre levar em conta uma margem a mais para que ele suporte ocasiões de grande fluxo, como o da Balck Friday. Essa verificação de velocidade, inclusive, é uma das dicas do nosso texto “não é muito cedo para começar a falar sobre a Black Friday 2021” que aborda os preparativos a serem feitos.

Meu site está lento, o que fazer?

Fazer o teste e interpretá-lo é a parte mais fácil. Agora, supondo que o seu site está levando mais que os dois segundos para abrir, diríamos que acima de 3,5 segundos. A partir disso já é, de fato, preocupante. Mas o que fazer?

Muita gente se pergunta isso e fica até meio perdido no primeiro momento. Mas como já falamos, essa não é a sua responsabilidade, e sim de quem está com o projeto do site com design responsivo.

Se você constatar que a velocidade não é satisfatória, pode certificar para que ele tome alguns cuidados:

  • Mantenha um layout “clean”: Além da questão estética, onde o minimalista tem sido mais utilizado, efeitos de transição ou elementos em movimento deixam o site bem mais pesado e poluído;
  • Otimize o tamanho das imagens: O que mais pesa do design responsivo para e-commerces é o grande número de imagens. Para que isso não seja um problema, o ideal é que elas tenham, no máximo, 70 Kb cada;
  • Agrupe imagens: Se uma página de produto tem 5 imagens, o servidor precisa fazer o acesso várias vezes. Agrupando todas com uso de código CSS esse processo é feito uma única vez;
  • Evite subir vídeos direto no site: Vídeos são arquivos que envolvem áudio e imagens em movimento – por isso são absurdamente pesados. Quando você sobe ele no youtube e faz apenas o link no seu site, ele não pesa no seu design responsivo, mas sim no servidor da própria plataforma;
  • Reduza o número de plugins: Eles são extensões para desempenhar funções específicas de temas do design responsivo ou qualquer outra atividade (pagamento, simulação de frete…). Muitos deles já estão obsoletos e o site nem usa mais – só servem para pesar o site. Então o melhor é eliminá-los.

💡 Há, inclusive, um plugin para wordpress que serve para analisar plugins que não estão funcionando bem. É o Query Monitor. Vale a pena recomendá-lo ao seu profissional.

Como ter um design responsivo?

Escritório de empresa de tecnologia com várias pessoas trabalhando em computadores.

Agora chegamos à parte mais estritamente conectada entre o seu papel como gestor e o design responsivo. E se você chegou até aqui, já está na frente de muitos que apenas “pedem um site” e esperam que tudo dê certo quando finalmente fica pronto. O caminho não é esse.

Você cuida dos fornecedores com quem se relaciona, dá uma olhada do que estão falando da sua marca nas mídias sociais e toma as medidas para que os produtos cheguem a tempo, certo? Então por que entregar o seu site, que é o cartão de visita da marca, para qualquer um?

Não estamos falando que somos a melhor opção. Essa é uma decisão que só cabe à você. Mas te garantimos que temos ótimos precedentes, com e-commerces produzidos para grandes operações em todo o Brasil.

Mais que isso, nós entendemos de toda a parte técnica de se criar um design responsivo, mas mais que isso: a nossa principal forma é aliar a tecnologia e design à experiência do seu cliente. Afinal, de que adianta ter um design bonito sem uma usabilidade fluida?

Se quiser entender melhor sobre essa conexão entre a experiência do cliente em suas diversas frentes – design, serviço e atendimento – leia o texto “atendimento ao cliente e Customer Experience: qual a relação?

E para conhecer melhor o nosso trabalho, é só clicar neste link aqui em baixo:

Banner de divulgação da empresa OpenK. Ao fundo, caixas com símbolo de carrinho e o botão: Fale com nosso especialista.


Comentários

Deixa seu Comentário