Hotspots interativos em e-mail: um guia passo a passo

Publicados: 2020-03-30

A interatividade continua a ser uma das tendências mais recentes em design de email - e os pontos de acesso interativos são um dos elementos interativos mais populares em um kit de ferramentas de marketing. Os pontos de acesso permitem que seus assinantes descubram informações adicionais quando passam o mouse ou clicam em um item de seu e-mail - e permite que os profissionais de marketing forneçam uma camada adicional de detalhes a seus e-mails sem fazer com que o design do seu e-mail pareça muito lotado.

Na edição de fevereiro de nosso boletim informativo mensal, usamos o poder dos pontos de acesso interativos para mostrar algumas atualizações interessantes que fizemos na plataforma Litmus:

Depois de enviar a campanha, recebemos muitas perguntas de outros geeks de e-mail sobre como exatamente criamos nossos pontos de acesso - e como os fizemos funcionar no Gmail. É por isso que estamos aqui para compartilhar nosso guia passo a passo.

Leia os detalhes de como projetamos e codificamos nossos pontos de acesso abaixo ou verifique o código do ponto de acesso no Litmus Builder - onde você encontra a localização exata de todos os elementos de código que descrevemos abaixo.

1. Antes de começar: considerações importantes

Passe o mouse ou clique?

Existem muitas maneiras diferentes de codificar pontos de acesso interativos em e-mail. Se eu quisesse pontos de acesso que só ativam com um clique ou toque, consideraria usar o Checkbox Hack , por exemplo. No entanto, optamos por pontos de acesso que são ativados ao pairar por alguns motivos.

Primeiro ,: hover tem melhor suporte em clientes de e-mail do que : verificado —especialmente em um de nossos maiores clientes de e-mail, o Gmail. Em segundo lugar, a interatividade ainda não é muito comum no e-mail, então eu queria tornar o mais fácil possível para os usuários descobrirem que podem interagir com ele. Afinal, pairando sobre um hotspot e vendo uma dica de ferramenta aparecer imediatamente leva menos esforço do que pairando e clicando. Como eu queria encontrar uma maneira de equilibrar a funcionalidade e o suporte para o maior público possível, os hotspots pairados eram o caminho a percorrer.

Suporte ao cliente por e-mail: os pontos de acesso são eficazes para o seu público?

Os pontos de acesso interativos são uma ótima maneira de tornar seu e-mail mais envolvente e eficaz, mas - como muitas técnicas interativas - eles não são suportados em todos os clientes de e-mail.

Antes de incorporar essa técnica em seu repertório, você definitivamente deseja considerar quais clientes de email são mais importantes para você e seus stakeholders. De acordo com a participação de mercado do cliente de email , 79% de todos os clientes de email suportam as versões totalmente interativas dessa técnica de ponto de acesso. Mas o uso do cliente de e-mail do seu público pode parecer completamente diferente da média global. Observe atentamente a participação de mercado de sua própria empresa para obter os dados mais precisos.

No Litmus, usamos nosso rastreamento de Email Analytics para determinar que alguns de nossos principais clientes são Gmail (36,8%), Apple Mail (20,0%) e iPhone (13,2%), que constituem a maioria (70%) de nosso público. Os clientes de e-mail que mostrarão a versão substituta representam apenas 30% do nosso público.

Com esses dados, faz sentido para nós nos concentrarmos na criação de uma ótima experiência interativa para nossos usuários, mas isso pode não ser o caso se o seu público se inclinar mais para o Outlook para Windows. No entanto, você deve estar constantemente rastreando e testando para ter certeza de que possui os dados analíticos mais precisos e atualizados! A participação no mercado do cliente de e-mail muda com o tempo conforme certos clientes e dispositivos se tornam mais populares (muitas empresas mudaram do Outlook para o GSuite, por exemplo), então é melhor não confiar no conhecimento histórico de como as coisas sempre foram feitas.

Verifique abaixo qual nível de funcionalidade seus principais clientes de e-mail suportam.

Totalmente interativo - Desktop
 É aqui que os pontos de acesso são totalmente funcionais nas janelas de exibição da área de trabalho.

  • Apple Mail
  • iPad
  • Gmail
  • Outlook (MacOS)

Totalmente interativo - móvel
 É aqui que os pontos de acesso são totalmente funcionais em janelas de exibição móveis.

  • iPhone Mail
  • Aplicativo Gmail (Android) *
  • Samsung Mail

Fallback - PNG animado
 Esses clientes (exceto aqueles com asteriscos **) suportam PNGs animados e segmentação no Modo escuro, então usamos um PNG animado transparente de fallback personalizado que seria animado em qualquer plano de fundo.

  • Outlook.com
  • App Outlook
  • AOL
  • AOL App
  • Yahoo
  • App Yahoo
  • Outlook (Windows) **
  • Windows Mail **

* O aplicativo Gmail (iOS) mostra pontos de acesso, mas não podem ser tocados.

** Esses clientes mostram apenas o primeiro quadro de PNGs animados e não oferecem suporte para segmentação no Modo escuro. Mesmo que usássemos um GIF animado, o fundo de cor lisa não combinaria com a visualização do Modo escuro. Além disso, você não pode trocar os GIFs do modo Claro / Escuro, pois esses clientes também não suportam a segmentação do Modo Escuro. Para esses clientes, certificamo-nos de que o primeiro quadro do PNG animado ainda parecia bom.

2. Planejamento de design: mapeamento da experiência do assinante para todos os casos de uso

Você determinou que tem um caso de negócios sólido para usar hotspots interativos e que uma grande parte do seu público poderá apreciá-lo? Excelente! Agora podemos começar a projetar as visualizações em potencial para as quais construir.

Por que você precisa de pontos de vista diferentes, você pergunta? O elemento do ponto de acesso não terá a mesma aparência no celular e no desktop. Além disso, você terá que projetar um substituto para todos que não conseguirem ver a versão interativa do elemento. Para nós, identificamos quatro casos de uso principais que abordamos na fase de design:

Interativo: largura da área de trabalho

Ao definir o design para isso, tente não sobrepor muito as dicas de ferramentas aos pontos de acesso.

Optamos por PNGs animados para as imagens de pontos de acesso porque precisávamos alcançar uma transparência de canal alfa suave que apenas PNGs podem fornecer para que pudessem sobrepor a imagem de fundo, e a leve animação - você vê os pontos de acesso pulsando - chama a atenção para o fato que você pode interagir com eles.

Fallback: largura da área de trabalho com redimensionamento fluido para a largura do celular

A versão substituta também usa uma versão PNG animado de toda a seção do herói para emular o efeito dos pontos de acesso acionados.

No Litmus, já usamos um método de fluido híbrido para redimensionamento móvel , então podemos esperar que todas essas imagens substitutas sejam redimensionadas suavemente para qualquer largura de tela, sem a necessidade de uma versão responsiva móvel específica.

Interativo: largura móvel

Como queremos que as dicas de ferramentas ainda sejam legíveis em telas menores, tivemos que reconfigurar o design para que todas as dicas de ferramentas apareçam em um local central sempre que um ponto de acesso foi pairado em vez de ser anexado a cada ponto de acesso individualmente.

Modo escuro

E, claro, você não quer negligenciar a visualização do Modo escuro .

3. Construindo sua estrutura de componentes-chave

Quais são os elementos de que precisamos para fazer este trabalho? Aqui, vou detalhar o que cada uma das classes faz. (Por que uso classes em vez de direcionar os seletores CSS com outros métodos, como especificidade ou encadeamento? Usar seletores mais curtos acelera o desempenho e uma boa nomenclatura de classe torna mais fácil de entender e manter para que você possa usá-lo novamente e novamente!)

.wrapper-primary

  • Wrapper para toda a seção interativa.

.bgimg

  • Base de imagem de plano de fundo na qual você posicionará todos os seus pontos de acesso e dicas de ferramentas.

.wrapper-secondary

  • Wrappers para cada seção, com hack de posicionamento absoluto. (Veja a explicação na seção "Posicionamento" abaixo.)

.hot-tool-wrapper

  • Wrappers que contêm cada seção individual de ponto de acesso / dica de ferramenta, com estilos embutidos que se posicionam dentro do layout da área de trabalho.

.hotspot-01 , .hotspot-02 , .hotspot-03 , etc…

  • As imagens reais dos ícones de ponto de acesso. Eles têm designações de classes individuais porque precisam ser posicionados individualmente. Além disso, você não precisa usar uma imagem - você também pode usar formas codificadas, se preferir.

.tooltip-wrapper

  • Wrapper para a dica de ferramenta e acento circunflexo opcional anexado.

.caret (opcional)

  • Eles são opcionais porque você pode ou não querer um cursor para o seu design. Eles possuem CSS embutido personalizado usando margens para posicioná-lo dentro do invólucro .tooltip .
  • Eles estão ocultos sob a visualização responsiva móvel porque não fazem sentido com o novo layout.
  • Como as imagens de ponto de acesso, também pode ser uma forma CSS codificada, se preferir.

.tooltip-content

  • O conteúdo real da dica de ferramenta que aparece quando um ponto de acesso é ativado.

4. Juntando tudo

Posicionando os pontos de acesso e dicas de ferramentas

Como esses pontos de acesso e seções de dica de ferramenta inevitavelmente se sobrepõem, eu precisava de uma solução para colocá-los que se assemelhasse ao posicionamento absoluto - o que infelizmente não é bem suportado por e-mail. Felizmente, encontrei inspiração com técnicas de Mark Robbins e Justin Khoo (dois dos meus #EmailGeeks favoritos!) Que usam max-height: 0 , max-width: 0 e margins para posicionar elementos no e-mail!

CSS

 .wrapper-secondary { max-height: 0px; max-width: 0px; } .hot-tool-wrapper { position: relative; display: inline-block; max-width: 0px; }

HTML

 <div class="wrapper-secondary"> <div class="hot-tool-wrapper"> [Hotspot & Tooltip content in here] </div> </div>

Configurando a interação de foco

O mecanismo que faz com que as dicas de ferramentas apareçam é bastante simples. As dicas de ferramenta ( .tooltip-wrapper ) são ocultadas por padrão e, quando o ponto de acesso ( .hot-tool-wrapper ) é passado, a dica de ferramenta é revelada. É isso!

Os estilos de opacidade e transição adicionam um leve esmaecimento à interação, tornando-a mais suave.

CSS

 .tooltip-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: 0.3s; } .hot-tool-wrapper:hover .tooltip-wrapper { max-height: none !important; opacity: 1 !important; transition: 0.3s; }

Procurando uma atualização sobre como usar os efeitos de foco no e-mail? Confira esta postagem do blog.

Torne-o responsivo em dispositivos móveis

Para transformar o design da área de trabalho em design móvel, eu precisava:

  1. .wrapper-primary , .bgimg
     Redimensione o invólucro e a imagem de fundo
  2. .hot-tool-wrapper
     Zere o posicionamento original da área de trabalho para tornar mais fácil separar os pontos de acesso e o posicionamento da dica de ferramenta no celular
  3. .hotspot-01
     Reposicione os pontos ativos individuais para caber na imagem de fundo menor
  4. .caret
     Ocultar os circunflexos
  5. .hotspot-01 + .tooltip-wrapper
     Reposicione as dicas de ferramentas para que todas apareçam em uma área na parte inferior

CSS

 @media only screen and (max-width: 480px) { .wrapper-primary, .bgimg { width: 350px !important; height: 235px !important; } .hot-tool-wrapper { margin-top: 0 !important; margin-left: 0 !important; } .caret { display: none !important; } .hotspot-01 { margin-left: 130px !important; margin-top: 0 !important; } .hotspot-01 + .tooltip-wrapper { margin-left: 60px !important; margin-top: 130px !important; } }

Configure o substituto

Por fim, aqui estão todas as peças necessárias para garantir que as versões interativas e substitutas sejam exibidas para os clientes de e-mail corretos. Muitas dessas técnicas podem ser encontradas em Como direcionar clientes de email . Aqui, separei cada técnica de direcionamento por cliente de e-mail para tornar mais fácil ver o que está acontecendo. Consulte o código original para ver como eles foram combinados no produto final.

Segmentando todo o Outlook (exceto MacOS): CSS

 .outlookshow { display: none !important; } body[data-outlook-cycle] .outlookshow { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} body[data-outlook-cycle] .outlookhide { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; } [class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} [class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

Segmentando todo o Outlook (exceto MacOS): HTML

 <!--[if !mso]><! --> <div class="outlookhide"> [Interactive Content Here] </div> <!--<![endif]--> <!--[if !mso]><! --> <div class="outlookshow"> <!--<![endif]--> [Fallback Content Here] <!--[if !mso]><! --> </div> <!--<![endif]-->

Segmentando Yahoo: CSS
Ele deve ser aninhado na tag <body> para direcionar o aplicativo Yahoo também, e você pode usar qualquer caractere Unicode no lugar de, desde que não seja convertido automaticamente pelo ESP. Essa técnica também acontece com o AOL, o que é um efeito colateral infeliz porque o AOL, na verdade, suporta muito bem a interatividade. Mas devido ao fato de que a participação de mercado da AOL não é muito significativa para nosso público, tive que fazer um julgamento para cortá-la.

 <body> <!-- START force fallback on Yahoo --> <style> .& # .yahoohide {display: none !important;} .& # .yahooshow {display: block !important;} </style> <!-- END force fallback on Yahoo --> </body>

Segmentando Yahoo: HTML

 <table><tr><td> <div class="yahoohide"> [Interactive Content Here] </div> <div class="yahooshow"> [Fallback Content Here] </div> </td></tr></table>

O resultado final

Para ver como todos esses elementos se juntam no produto final, verifique o código completo do elemento ou consulte o código completo de nosso boletim informativo de fevereiro para ver tudo no contexto de um e-mail.

Agora, é com você!

Você está planejando usar pontos de acesso em alguma de suas próximas campanhas? Você já usou pontos de acesso no passado, mas os construiu usando uma técnica diferente? Adoraríamos ver como os profissionais de marketing por e-mail criativos, como você, estão usando pontos de acesso para tornar seus e-mails ainda mais especiais. Compartilhe suas idéias e pensamentos nos comentários abaixo ou entre no Twitter @litmusapp.

Mal podemos esperar para ver todos os e-mails lindos e interativos que você criará!