O comércio móvel já representa quase 40% das vendas totais de eCommerce e a previsão é que domine com cerca de 54% até 2021 – o que significa que você pode estar perdendo receita séria se seu site não for otimizado para uso móvel!
Além dos dispositivos móveis serem comumente o primeiro ponto de contato entre você e seus clientes, considere a popularidade dos smartphones, a crescente presença de consumidores mais jovens e cada vez mais experientes em dispositivos móveis, e uma cultura acelerada, em movimento e focada em tecnologia que exige mais conveniência e mais eficiência a cada minuto. É fácil ver a necessidade da experiência móvel, mas como isso se traduz especificamente para lojas de produtos digitais?
Neste post, apresentamos algumas de nossas recomendações para otimizar sua loja de produtos digitais para uso móvel, para que você possa acompanhar os tempos – *e* as vendas!
Entendendo a mudança para o minimalismo
Vamos voltar um minuto: são os anos 2000, e o advento dos smartphones está colocando muita pressão sobre os provedores de serviços de internet para se adaptarem ao crescente consumo de largura de banda. Os consumidores estão *finalmente* capazes de usar a internet regularmente enquanto se movem – uma enorme mudança de estilo de vida que instiga uma reformulação completa de como o conteúdo da web é apresentado.
É hora de mudar o roteiro de animações impressionantes e conteúdo pesado em gráficos para páginas da web que podem ser carregadas razoavelmente rápido em redes celulares menos potentes, e os desenvolvedores web agora estão otimizando para velocidade para acompanhar. Adicione a isso os efeitos de plataformas de mídia social como o Facebook, que devem ser adaptadas para velocidades de até 2G para se tornarem mais *globalmente* acessíveis, e você pode imaginar a crescente necessidade de uma abordagem mais "simplificada"!
A otimização móvel tem estado no centro dessa progressão, à medida que a sociedade se tornou ainda *mais* orientada para smartphones ao longo do tempo. Agora estamos em um ponto de inflexão interessante; muitas pessoas estão usando smartphones e tablets como dispositivos primários para todos os tipos de propósitos, desde trabalho e educação até compras e entretenimento.
Smartphones são nossas linhas de vida – lojas completas para nossos horários, contatos, comunicação e interação social, saúde e bem-estar, compras, leitura, música, TV, filmes, jogos, o que você quiser. Desnecessário dizer que otimizar sua loja de produtos digitais para uso móvel não é apenas por diversão; é cada vez mais necessário para *qualquer* site – e você não quer ficar para trás! Então, por onde você começa?
Design responsivo de sites
Com tantos dispositivos diferentes por aí, como você pode ter certeza de que seu site está sendo exibido corretamente? Design responsivo de sites é um método de design de sites que ajusta automaticamente seu conteúdo e layout dependendo do dispositivo em uso. Um componente fundamental da otimização para dispositivos móveis, o design responsivo de sites permite que usuários em dispositivos móveis como smartphones e tablets (bem como laptops e computadores desktop) visualizem corretamente e usem efetivamente seu site de acordo com diferentes padrões de exibição.
Quando otimizado, o conteúdo pode parecer mais minimalista em dispositivos móveis para priorizar a funcionalidade – ou, mais focado visualmente para reduzir a desordem, dependendo do tipo de conteúdo.
Exemplo de smartphone pequeno (AudioTheme)
Exemplo de tablet pequeno (AudioTheme)
Exemplo de desktop grande (AudioTheme)
Além dos benefícios estéticos e de receita, o design responsivo também ajuda a impulsionar seu SEO. Como? Bem, o Google anunciou recentemente que começará a usar a indexação mobile-first, o que significa que o mecanismo de busca se referirá em grande parte às versões móveis dos sites para classificação e indexação devido à predominância de usuários móveis.
Então, o que você precisa fazer para implementar o design responsivo de sites em sua própria loja de produtos digitais? Dependendo do seu nível de especialização, existem algumas opções:
- Instale um tema responsivo. A maioria dos temas contemporâneos é projetada para ser responsiva, então esta é provavelmente a opção mais fácil, especialmente se você gerencia seu próprio site.
- Pague ao seu web designer para modificar seu tema existente ou site personalizado para incluir design responsivo.
- Modifique seu tema existente ou site personalizado você mesmo, se você faz seu próprio desenvolvimento web.
Ferramentas de análise e mapeamento de calor podem mostrar as dimensões médias da tela e os padrões de atividade dos visitantes do seu site, permitindo que você personalize para seu público específico. Você pode até segmentar seus usuários por tipo de dispositivo. Tente usar uma ferramenta como Responsive Design Checker para ver como seu site está sendo exibido atualmente em diferentes dispositivos.
Desempenho
Quer ter certeza de que seu site está tendo um bom desempenho quando acessado em diferentes dispositivos? A velocidade é tudo – na verdade, pode fazer ou quebrar a experiência do usuário!
Se um site carrega lentamente, as pessoas são muito mais propensas a abandoná-lo completamente. Para minimizar as taxas de rejeição, você quer que seu site carregue o mais rápido possível. É importante lembrar que as redes celulares tendem a ser menos estáveis do que as redes de banda larga, com conectividade volátil que depende da localização física, uso compartilhado e outras variáveis. Com isso em mente, quanto mais leve for o seu site, melhor!
“A maioria das pessoas abandonará uma visita a um site móvel se a página demorar mais do que alguns segundos para carregar.” – Google
Aqui estão alguns truques para uma experiência móvel de carregamento rápido:
- Minimize os tamanhos dos arquivos HTML/CSS. Use uma ferramenta como o Gzip para comprimi-los e tente chegar o mais perto possível de 70KB se você quiser velocidades de carregamento ultrarrápidas.
- Reduza as requisições. Cada componente do seu site (seja uma imagem, fonte, folha de estilo, etc.) gera sua própria requisição. Combine elementos sempre que possível para minimizar esse efeito.
- Use um bom host. Uma pilha de servidor otimizada com cache em nível de servidor é ideal.
- Evite plugins desnecessários. Mantenha sua carga o mais leve possível!
- Considere usar uma rede de entrega de conteúdo (CDN) para imagens. Isso é especialmente relevante se o seu site tiver muitas imagens. Certifique-se também de que suas imagens estejam otimizadas para a web!
- Desative qualquer funcionalidade que você não precise absolutamente.
- Use HTML5 em vez de Flash, se você quiser usar algum efeito especial.
- Não use pop-ups. Eles podem ser difíceis de lidar em dispositivos móveis.
- Limite o uso de redirecionamentos e encurtadores de links, a menos que sejam necessários. Eles apenas aumentam o tempo de carregamento!
O Google oferece esta ferramenta que permite comparar o desempenho móvel do seu site com outros sites. Você também pode usá-la para estimar como as melhorias de velocidade podem impactar sua receita.
Conteúdo
Outro aspecto da otimização móvel é como você apresenta seu conteúdo. A regra de longa data desde o início da mídia impressa tem sido que você deseja comunicar o ponto principal do seu conteúdo "acima da dobra". No sentido digital, isso se refere à área imediatamente visível de uma página da web quando ela é carregada pela primeira vez.
No entanto, alguns especialistas dizem que a dobra não é mais importante; que com as tendências modernas no uso da internet, é quase irrelevante. Quando você pensa em sites extremamente populares como o Facebook, que usam rolagem infinita, você pode concordar! Então, o que isso nos deixa?
Bem, mesmo que seja verdade que é menos relevante do que antes, colocar suas informações mais importantes acima da dobra garante que seja a primeira coisa que os visitantes do seu site verão. Vamos comparar alguns exemplos de desktop e mobile:
Barra de pesquisa e menus são facilmente acessíveis, com as últimas promoções em destaque (Producer Loops)
É imediatamente óbvio o que o site oferece, sem ter que rolar (UIdeck)
Um visual limpo e minimalista com o título e os principais produtos, com fácil acesso ao menu e banco de dados de suporte / FAQs (ThemeBeans)
Navegação e interatividade
A navegação é um elemento crucial da otimização móvel, porque dispositivos menores *podem* limitar significativamente a funcionalidade do usuário se deixados sozinhos. As melhores práticas apontam para a consolidação de menus nas opções mais simples e relevantes, como a página inicial da sua loja ou a galeria principal de produtos (e/ou categorias de produtos), a página de suporte e a página de contato. A boa notícia é que a maioria dos temas já vem com uma opção de menu móvel!
Quando se trata de interatividade, leve em consideração as diferenças de clicabilidade ao usar dispositivos diferentes. Botões menores podem ser fáceis de clicar com um mouse, mas podem ser mais difíceis de tocar em um smartphone, por exemplo. Qualquer coisa que você possa fazer para otimizar a interatividade móvel do seu site é ideal!
Muitas lojas e serviços digitais oferecem suporte por chat ao vivo ou acesso rápido e fácil a FAQs, tornando o mais simples possível para os clientes fazerem perguntas ou saberem mais sobre os produtos. Você pode instalar um plugin de suporte por chat, por exemplo, ou criar uma seção de FAQ ou um banco de dados de suporte que seja intuitivamente organizado e pesquisável.
O fator conveniência
É importante lembrar que muitos usuários de celular estão comprando em seus telefones apenas pelo fator conveniência, então processos de checkout simples – especialmente checkouts com um clique – estão se tornando cada vez mais populares. Isso se aplica a outros elementos do seu site, como menus, páginas de produtos e suporte. Pense no que você pode fazer para consolidar informações para que sejam concisas e exijam um mínimo de cliques e navegação!
Conteúdo de áudio e vídeo
Quando possível, é sempre preferível hospedar seus arquivos de áudio e vídeo em plataformas de terceiros que já são especificamente otimizadas para uso móvel. Por exemplo, vídeos do Vimeo e do YouTube podem ser facilmente incorporados em suas postagens ou páginas, reduzindo a necessidade de código personalizado ou de ocupar grandes quantidades de armazenamento em seu próprio servidor.
Quando se trata de áudio, o WordPress é perfeitamente adequado, pois possui um player de áudio responsivo integrado, mas você também pode optar por usar serviços como o SoundCloud para hospedar seus arquivos de áudio. O bônus da maioria das plataformas de áudio e vídeo como essas é que as reproduções do seu site contribuem para sua contagem de reproduções na plataforma.
Não se esqueça de testar tudo!
Algumas empresas têm departamentos inteiros dedicados a testes de dispositivos móveis, mas se você tem uma operação menor, pode usar serviços ou sites de teste de dispositivos (como Responsive Design Checker ou Responsinator) que permitem visualizar seu site em diferentes dispositivos.
Você também pode simplesmente ajustar o tamanho da janela do seu navegador para ver como seu design responde à medida que as dimensões mudam. Lembre-se que você não necessariamente obterá um layout perfeito em *todos* os casos; o design responsivo normalmente foca apenas em 3 ou 4 resoluções diferentes, aderindo aos breakpoints de resolução mais comuns e atualizados (elementos CSS que ditam como os layouts aparecem em diferentes tamanhos de tela).
Os temas/sites de eCommerce mais populares são construídos usando frameworks de desenvolvimento web populares como Bootstrap 4 (usado pelo Twitter) e são construídos para serem "mobile first", usando um sistema de layout em grade que escalará e funcionará em todos os dispositivos prontos para uso. Isso permite que os desenvolvedores criem temas envolventes sem se preocupar com todos os dispositivos sendo suportados prontos para uso. Se você encontrar problemas com certos dispositivos, geralmente pode relatar o problema ao desenvolvedor do tema e ele poderá lançar uma atualização.
Preparar sua loja de produtos digitais para uso móvel não é um processo da noite para o dia, mas esperamos que esta postagem tenha fornecido algumas ideias e diretrizes úteis. A otimização móvel continua a crescer em necessidade; felizmente, isso *também* significa que há um número crescente de ferramentas e recursos disponíveis para ajudá-lo a alcançá-la!
Você tem algum conselho a compartilhar quando se trata de otimizar sua própria loja de produtos digitais para uso em dispositivos móveis? Quais obstáculos você encontrou e como os superou? O que você achou mais útil? Adoraríamos ouvir o que você tem a dizer nos comentários abaixo!
Ilustração por Jessica Johnston.
