Dicas de criação de e-mail em HTML e fluxo de trabalho
Ontem realizamos um Google Hangout com o nosso designer líder de produtos digitais, Lee Munroe. Neste hangout, Lee se aprofundou na criação de modelos em HTML, começando com uma reflexão sobre o estado atual do e-mail em HTML.
Você sabia? Os modelos de e-mail agora fazem parte da nossa API e UI! Saiba mais.
Ontem, realizamos um Google Hangout com nosso designer líder de produtos digitais, Lee Munroe. Neste hangout, Lee se aprofundou na criação de modelos em HTML, começando com uma reflexão sobre o estado atual do e-mail em HTML e, em seguida, demonstrou como criar, fazer o design e automatizar seus modelos em HTML usando ferramentas como o Litmus e o Grunt. Abaixo está o vídeo com os minutos, incluindo uma sessão de perguntas e respostas. Você também pode salvar a apresentação do Lee para referência aqui. Aproveite.
(2:00) Introdução e pauta
Por que o Lee tem sotaque? Bem, porque ele é de Belfast, na Irlanda do Norte. Há três coisas notáveis que tornam Belfast famosa: 1) é onde o Titanic foi construído, 2) o Europa, supostamente o hotel mais bombardeado da Europa, fica em Belfast, onde muitos políticos se hospedaram, incluindo Bill Clinton nos anos 90, e 3) é onde muitas cenas de Game of Thrones foram gravadas.
Ok, vamos ao verdadeiro motivo de você ter participado deste hangout. O Lee é mais conhecido por seu trabalho com design e experiência do usuário. Recentemente, ele disponibilizou em código aberto uma série de modelos de e-mail e um fluxo de trabalho para facilitar a sua vida; você pode acessá-los aqui.
(4:40) O estado do e-mail em HTML em 2015
Quando o Lee começou na Mailgun, todos os e-mails eram e-mails em texto simples, então um dos seus primeiros projetos foi criar e-mails em HTML. Ele começou a usar o Litmus para testar o e-mail em todos os clientes de e-mail. As regras e a renderização diferem em vários clientes.
(10:50) Soluções para a criação de e-mail em HTML
Com todos os obstáculos e bloqueios na criação de e-mails em HTML para que funcionem em vários clientes, por onde começamos? 1) Use tabelas em HTML. 2) Use CSS inline. 3) Segmente o Outlook com instruções condicionais. 4) Segmente o webkit e dispositivos menores com consultas de mídia. O Lee aborda a chamada “melhoria progressiva”, oferecendo uma base que funciona para todo mundo e uma experiência aprimorada para quem tem suporte a ela.
(17:55) Fluxo de trabalho e um sistema
A maioria das empresas de software não envia apenas um e-mail; elas enviam vários e-mails por meio de diversas plataformas. A programação manual, um por um, não é uma solução escalável. Trate o seu e-mail como um site, com módulos, e não páginas. Geradores de sites estáticos recomendados incluem: Jekyll, Middleman e Assemble. Por fim, teste com o Litmus.
(21:20) Automação (use algo como o Grunt)
Depois de configurar seus e-mails em HTML, você vai querer automatizá-los. Executores de tarefas como o Grunt podem fazer todas essas tarefas por nós. Você pode adicionar vários plugins ao seu arquivo Grunt, por exemplo, para hospedar imagens em uma CDN como Rackspace Cloud Files ou Amazon CloudFront. Não se esqueça de enviar os modelos para a sua base de código.
(24:05) Demonstração
(26:55) Considerações finais – e-mail responsivo, ações do Gmail e texto de pré-cabeçalho
As consultas de mídia não funcionam no Gmail, por exemplo. Nicole Merlin tem um ótimo tutorial sobre e-mail responsivo aqui: j.mp/responsive-email-tut
Você pode colocar o CTA na linha de assunto no Gmail para que o usuário não precise abrir o e-mail para ver do que se trata. Leia mais aqui: developers.google.com/gmail/markup
O texto de pré-cabeçalho, também conhecido como texto de pré-visualização, é uma descrição extra na linha de assunto. Você pode adicionar uma linha de conteúdo oculta que o usuário não verá ao abrir o e-mail.
Se você tiver interesse em usar o Litmus para testar seus e-mails, não se esqueça de usar litmus.com/lp/mailgun para ganhar um mês de teste grátis e usar o serviço deles.
(33:20)
Perguntas e respostas
O Grunt tem suporte ao GetResponse?
Isso depende do que você quer dizer com “suporte”. Você pode se comunicar com a API do GetResponse usando o Grunt.js e o plugin grunt-http.
As consultas de mídia funcionam na versão web do Office 365?
Acredito que não. A renderização do Office 365 está muito alinhada com a do Outlook.com, que não tem suporte a consultas de mídia.
Os pré-cabeçalhos são compatíveis apenas com o Gmail?
O texto de pré-cabeçalho, também conhecido como texto de pré-visualização, é compatível com Gmail, AOL, Yahoo, Apple Mail, Outlook 2013, além de aplicativos nativos do iOS e do Android.
Como o modelo é enviado para a Mailgun?
A API da Mailgun aceita um parâmetro de HTML; assim, você envia o e-mail em HTML completo. A Mailgun não armazena os modelos por conta própria. A forma como você envia o e-mail para a nossa API depende de como você configurou a sua aplicação. Por exemplo, a configuração de uma aplicação Ruby on Rails seria um pouco diferente da configuração de uma aplicação em Python. Se você quisesse usar o fluxo de trabalho completo do Grunt que foi demonstrado, poderia incorporar o Gruntfile na sua base de código e executá-lo como parte do seu sistema de compilação. Ou você pode preferir manter o fluxo de trabalho do Grunt separado e armazenar os modelos em outro lugar. O Sendwithus é um ótimo serviço para armazenar seus modelos de e-mail e ainda usar a API da Mailgun para fazer o envio.
