Codificação de cartões perfurados: o segredo do email interativo
O e-mail antecede a Web em cerca de 10 anos (dependendo de com quem você fala) e, nesse período, a Web evoluiu para uma entidade dinâmica e interativa. No entanto, a coisa mais excitante que você provavelmente verá em um e-mail nos dias de hoje é um belo gif animado, e nós temos aqueles nos anos 90.
Bem, agora tudo está mudando, esta é a aurora do e-mail interativo. E se você pudesse usar galerias de imagens em e-mail, layouts com guias ou layouts de várias páginas? E se você pudesse jogar um jogo, ler um feed do Twitter ao vivo ou até comprar, selecionar / editar itens e fazer check-out diretamente em seu e-mail?
Os clientes de email começaram a suportar JavaScript? Não. E isso não é uma extensão, download de plug-in ou até mesmo novo aplicativo. Isso é tudo HTML e CSS! E principalmente CSS2!
Codificação de cartões perfurados
Então, como você detecta as interações do usuário e cria funcionalidades complexas sem JavaScript? Eu criei uma técnica que estou chamando de codificação de cartões perfurados. Basicamente, ele usa um grande número de botões de opção e estiliza o CSS com base nos valores : checked desses botões. Um exemplo simples disso é um layout com guias:
HTML
Content for tab 1Content for tab 2Content for tab 3Content for tab 4 CSS
input { display:none; }label {display:block;float:left;width:148px;border:1px solid #ccc;text-align:center;padding:1em 0;}.tab{width:598px;height:1em;padding:2em 0;border:1px solid #ccc;text-align:center;display:none;clear:both;}#tab1:checked ~ .tab1,#tab2:checked ~ .tab2,#tab3:checked ~ .tab3,#tab4:checked ~ .tab4 {display:block;}Veja este exemplo no trabalho: http://codepen.io/anon/pen/WQwagL
Quando o botão de opção # tab1 está marcado, então .tab1 é mostrado. Quando o botão de opção não está marcado, ele volta ao valor padrão. Como esses botões de opção estão todos no mesmo array, apenas um pode ser verificado por vez, isso impede que várias guias sejam exibidas de uma só vez.
Este é um conceito bastante adaptável. Substitua os rótulos das guias por imagens em miniatura e o conteúdo por imagens, e você terá uma galeria de imagens simples. Ou mova as guias para um layout de navegação para criar um layout falso de várias páginas.
Ao consertar alguns bugs em um e-mail que eu estava construindo, eu tinha os botões de rádio configurados para exibir , e notei uma semelhança com uma antiga imagem de cartão de botões / cartões perfurados da IBM. Depois que entendi isso, permitiu-me expandir meu pensamento: é apenas uma série de valores verificados ou padrão.
Você poderia pensar nisso como verdadeiro / falso ou um / zero. O potencial é enorme.
Jogos no email
Meu primeiro experimento foi construir um jogo. A teoria é que o jogador tem que clicar em um rótulo para marcar um ponto. Quando marcada, isso também mostra o rótulo do próximo botão de opção e assim por diante.
Eu também adicionei um rótulo para o botão de opção anterior para que você também pudesse perder pontos. Então, para transformá-lo em um jogo, animou os rótulos a se movimentarem, tornando-os mais difíceis de serem batidos e estilizados em um jogo do tipo "whack-a-mole".
Jogue o jogo aqui: http://codepen.io/M_J_Robbins/full/jpCKH/
Carrinho de compras em um e-mail
O próximo exemplo é um pouco mais complicado. Este usa 117 radio buttons e 2 checkboxes para controlá-lo. Alguns dos recursos incluem galerias de imagens, layout de várias páginas, adição / remoção de itens, validação de formulários, cálculos dinâmicos de preços no total da linha, imposto de subtotal, descontos e o preço total. Tudo isso é construído apenas em HTML e CSS.
O conceito aqui é quando você clica em “BUY NOW”, ele trabalha como um formulário de envio e carrega os detalhes de todos os botões de seleção. Em seguida, o cartão selecionado será cobrado e os produtos selecionados serão enviados para o endereço selecionado, tudo sem visitar o site.
Suporte e limitações
Existem algumas limitações para isso, como você esperaria no e-mail. Em primeiro lugar, há uma limitação no tamanho do arquivo. Se o email exceder 102kb, ele será recortado no Gmail, Yahoo e Outlook.com. Além disso, corre um risco muito maior de ser sinalizado como spam.
Devo observar que o limite é apenas para o HTML e o CSS que você envia. Os recursos transferidos, como imagens e fontes, não estão incluídos nisto. Para ajudar a contornar o problema, nós iludimos e diminuímos nosso código; mas isso, por sua vez, pode levar a alguns erros, por isso tenha cuidado.
Depois, há todos os problemas de renderização variados em diferentes clientes de email, em diferentes dispositivos, diferentes sistemas operacionais e diferentes navegadores. Para simplificar tudo isso, gostamos de dividir todos os clientes de email em 3 grupos, Static, Limited e Interactive.
Clientes estáticos : Outlook (Windows), Outlook.com, aplicativo do Gmail
Esses clientes tiram o CSS funcional, de modo que o email voltará a um layout simples e estático. O usuário final não deve notar nenhuma diferença entre esses e-mails interativos e os e-mails normais que recebem todos os dias.
Clientes limitados: Gmail (webmail), Yahoo, AOL
Esses clientes têm limitações variadas no CSS. Algumas das coisas mais avançadas são removidas ou editadas pelos pré-processadores do cliente de email; mas eles ainda suportam algumas interações.
Clientes interativos: Applemail, iOS, Android, Mailbox
Estes têm os sinos e assobios completos. Eles apoiam tudo acima, e algumas novas idéias muito legais que estou trabalhando também. A boa notícia é, com base em estatísticas de emailclientmarketshare.com Dos 1,05 bilhões de e-mails abertos em agosto, 57% dos e-mails foram abertos em clientes interativos e outros 20% em clientes limitados.
Assim, 77% dos usuários têm a capacidade de ver algum nível de email interativo.
Então o que o futuro reserva?
Como você pode ver, o e-mail tem o potencial de ser muito mais do que texto e imagens estáticos. Já vimos empresas como Nest e B & Q usando galerias em seus e-mails, e a Litmus fez uma série de ótimos experimentos (experimentos como plano de fundo de vídeo, feed do Twitter ao vivo e um sorteio "encontre o bilhete de ouro").
Este é um momento muito empolgante para estar no e-mail, estamos limitados apenas pela profundidade de nossa imaginação ... e do Outlook; O Outlook ainda é uma dor para lidar com ... e tempo; como você pode imaginar, demora muito mais para construir do que um email comum.
Estamos limitados apenas pela profundidade de nossa imaginação, pela remoção de clientes de e-mail mais antigos e pelo tempo que leva para construir os e-mails.
Usos da imagem em destaque imagem de email via Shutterstock.