O design responsivo se tornou muito importante para melhorar a experiência de navegação dos consumidores durante a visita a uma loja virtual, já que torna a visualização mais confortável quando adapta o conteúdo para diferentes dispositivos e telas. Por este motivo, é hoje um dos fatores mais relevantes para quem busca aperfeiçoar seu e-commerce. Descubra como o design responsivo pode fazer a diferença para uma loja virtual conquistar seus clientes, através do artigo publicado pela Magento, traduzido na íntegra:

O lugar perfeito para começar com design responsivo

Infelizmente, o conceito de usar um “design responsivo” é frequentemente mal interpretado, significando simplesmente o ato de tornar o seu site ou seu e-mail móvel amigável. Na verdade, o design responsivo é uma abordagem poderosa para a concepção e codificação que pode garantir que seus clientes sejam capazes de ter uma experiência visualmente rica e funcional enquanto navegam e compram tudo ao mesmo tempo, pulando entre os dispositivos. Os membros da sua equipe (incluindo seus superiores) provavelmente já proclamaram “devemos usar o design responsivo para ______!” durante uma reunião como se fosse a bala de prata para melhorar a experiência móvel e impulsionar as vendas móveis adicionais. O problema com esses 1.000 pontos de vista é que a maioria dos detalhes está perdida e pode ser que você fique com a missão de colocar em foco.

Otimização de site para dispositivos móveis

Será que a baixa taxa de execução entre os varejistas on-line significa que o projeto responsivo não vale a pena? Nem um pouco! Embora muitas vezes definido incorretamente ou apenas mal compreendido, o design responsivo é um conjunto de códigos que se expande e contrai com base no tamanho do dispositivo e tela. Pense no design responsivo como um moletom com cós elástico que se ajusta independentemente de quantas vezes você foi ao ginásio. Enquanto se expande ou contrai, vários elementos de conteúdo podem ser incluídos ou retirados do projeto. É evidente que há poder no design responsivo. Mas com grande poder vem grande responsabilidade.

Reserve tempo e avalie sites existentes e conteúdos de e-mail para determinar quais são os elementos essenciais e mais utilizados pelos clientes. A parte mais demorada do processo é a recodificação. Muitos varejistas, especialmente aqueles que têm um site adaptativo, pode não querer investir tempo e recursos em uma revisão de codificação quando esta não é uma opção para os navegadores móveis já existentes. Acho que a maioria desses sites adaptativos ficaria estelar no telefone Motorola Razr, com flip, que eu tinha cerca de uma década atrás; no entanto, em meu smartphone, os dispositivos com uma solução universal me desconectam da experiência rica e imersiva que espero de minhas marcas favoritas.

O salto para um site usando o design responsivo pode ser um grande pulo, que deve exigir alguma prova de conceito antes de ganhar a confiança de sua equipe, como começar a testar a codificação de design responsivo na caixa de entrada. Antes de ler as seguintes maneiras de como começar, é importante notar que os vários clientes de e-mail, provedores de serviços de internet, sistemas operacionais e tipos de dispositivos móveis irão interpretar o design responsivo de maneiras variadas. Por exemplo, a forma como um e-mail é mostrado dentro do aplicativo do Gmail no iPhone será diferente da versão do navegador web padrão visto em gmail.com usando um smartphone Android. A tabela a seguir pode ser usada como um guia para definir as expectativas de seus resultados, embora seja altamente recomendável que você realize testes exaustivos antes de enviar o e-mail de resposta para seus assinantes.

* Variações de resoluções de tela, codificação e-mail, versão do sistema operacional, tipo de navegador e edição aplicativo poderiam levar a resultados diferentes. O teste é sempre recomendável.

Composição

A maioria dos e-mails segue um layout similar: pré-cabeçalho, logo/navegação, imagem herói/promoção primária, os produtos adicionais/ofertas e rodapé. Todo este conteúdo requer várias passagens de dedo para ver em um dispositivo móvel. Determine quais peças poderiam ser mais sucintas ou totalmente cortadas. Seu pré-cabeçalho pode se alongar em várias linhas, empurrando o resto do conteúdo para fora de vista. Produtos destacados em uma grade de 3×4 podem ficar cortados ou triturados em uma tela de celular, enquanto uma grade de 2×3 dos pontos mais quentes se encaixa perfeitamente. Enquanto revemos seções específicas, mantenha a composição de seu e-mail em mente.

Navegação

Em PCs tradicionais, você tem o luxo de incluir muitos elementos de navegação. De ligações padrão, como categorias de produtos, para links sazonais ou ofertas específicas, existe espaço de clique sem desordenar o design. O mesmo e-mail visto em um dispositivo móvel pode resultar em pequenas áreas de clique que não são “amigáveis ao dedo” ou sequer legíveis. Use o design responsivo para preencher os links mais populares e apagar aqueles que podem ser supérfluos.

Imagens

O projeto responsivo pode ser usado para dimensionar as imagens e fazê-las caber no dispositivo móvel, porém isso pode não ser sempre a melhor opção. Detalhes em imagens herói podem ser perdidos quando dimensionados. Substitua a imagem para manter o nível de pormenor necessário na transmissão do produto ou promoção. GIFs animados vão trabalhar em algumas combinações de e-mail do cliente móvel, embora o grande tamanho do arquivo possa resultar em uma visão atrasada nas conexões móveis. Use o design responsivo para substituir estas imagens com imagens estáticas que têm um tamanho de arquivo menor.

Calls-to-Action (funções que incitam o usuário a executar ações)

Comparar assinantes clicando com o mouse com aqueles que usam os dedos é como comparar um feixe de laser com uma pistola de água. Você pode ser capaz de dar aos usuários do PC uma tonelada de oportunidades de clique dentro de uma pequena área, mas a mesma abordagem para usuários de celulares resultará em “dedos gordos” tocando as ligações erradas. Por e-mail móvel, pode-se considerar o uso de menos áreas de clique. Ou, com o design responsivo, você pode dar aos assinantes móveis áreas de clique maiores, claramente definidas e de clique fácil.

O estudo da Bronto Software descobriu que o aplicativo de e-mail padrão para ambos os iDevices e Android constituiu a experiência mais consistente, com as versões de smartphones processamento do código do design responsivo e o iPad escalando o e-mail de forma que ele caiba na tela:

O design responsivo da caixa de entrada continua a exigir que você ajuste os processos de codificação e inclua testes adicionais, embora você leve esta função com você enquanto planeja seu site responsivo. Você vai aprender quais os dispositivos usados pelos seus assinantes, como aperfeiçoar o conteúdo para os dispositivos e quais os elementos que têm o maior impacto com os assinantes “multi-dispositivo”. Você pode considerar isso como uma boa maneira de melhorar a experiência dos seus clientes, mas sei que muitos clientes agora esperam que a experiência móvel seja tão envolvente e rica em recursos como todo o site. Não fique preso no passado. Comece testando o design responsivo agora.

Fonte: Magento.com