Entregando o episódio 5: O que é realmente design de e-mail?

Neste episódio de Delivering, o apresentador Jason Rodriguez tenta responder à pergunta: “O que é design de email realmente?” É conhecer HTML e CSS? Ou vai além do código?

Certifique-se de se inscrever em Delivering on iTunes ou Spotify para ouvir episódios futuros e participar da conversa no Twitter usando a hashtag #DeliveringPodcast.

Transcrição do episódio

À primeira vista, o design do e-mail parece fácil. É apenas escrever um pouco de HTML e CSS e enviá-los aos assinantes, certo? Mas mergulhe um pouco mais fundo e você abrirá um mundo de complexidade que vai muito além do código. Neste episódio de Delivering, tento responder à pergunta: “O que é realmente design de e-mail?”

Bem-vindo ao Delivering, um podcast sobre email marketing, estratégia, a indústria de email e, sim, design e desenvolvimento de email. A entrega é trazida a você por Litmus, a plataforma criativa usada por mais de 600.000 profissionais de email para projetar, testar, analisar e colaborar em melhores campanhas de email para assinantes mais felizes. Saiba mais e experimente Litmus gratuitamente por sete dias em litmus.com.

O design do email é fácil, certo? No final das contas, o e-mail é apenas HTML e CSS, algo como escrever uma página da web. Existe a estrutura geral do documento - o cabeçalho e o corpo em um arquivo HTML - e todo o conteúdo dentro desse documento. Você usa HTML bastante padrão para marcar o conteúdo e, em seguida, CSS para estilizar esse conteúdo. Qualquer pessoa com um pouco de experiência na criação de páginas da web pode, em teoria, codificar um e-mail rápido, carregá-lo em um ESP e enviá-lo aos assinantes.

Pelo menos é o que muita gente pensa.

Na realidade, HTML e CSS são apenas o começo quando se trata de design de e-mail. Claro, designers de e-mail, desenvolvedores e profissionais de marketing precisam conhecer seu HTML e CSS. Sem ele, você é deixado aos caprichos de um editor WYSIWYG e qualquer código espaguete que ele produz. Mas, o que é realmente design de e-mail?

Ao longo de quase uma década projetando e codificando e-mails, resumi o projeto de e-mail em três coisas principais: Mitigar riscos, ultrapassar limites e criar experiências melhores para todos os assinantes.

Como muitas pessoas, primeiro aprendi HTML e CSS para construir meus próprios sites. Eu amadureci com o movimento de padrões da web e segui pessoas como Jeffrey Zeldman e Eric Meyer religiosamente. Sempre que tenho tempo, eu o gasto devorando textos e conversas de pessoas como Rachel Andrew e Jen Simmons.

No entanto, quando recebi a tarefa de criar meu primeiro e-mail, aprendi rapidamente que saber HTML e CSS baseados em padrões não é suficiente. O e-mail é seu próprio animal, graças às dezenas de clientes de e-mail populares que tratam HTML e CSS de maneira diferente. Todos os clientes de e-mail usam seus próprios mecanismos de renderização para interpretar e exibir a marcação subjacente às nossas campanhas de e-mail. Em alguns casos, diferentes versões do mesmo cliente de e-mail usam mecanismos de renderização totalmente diferentes.

O Microsoft Outlook deixou de usar o Internet Explorer, um mecanismo de renderização relativamente bom para e-mail, e passou a usar o Microsoft Word no backend para exibir e-mails. Existem muitos motivos pelos quais a Microsoft fez a troca, mas tem sido um espinho para os profissionais de marketing por e-mail desde então.

Os clientes de e-mail variam de uma renderização incrível, como no Apple Mail, ao pior dos piores. Pense em versões mais antigas do Lotus Notes, que não suportavam muitas marcações.

É por isso que grande parte do design de e-mail visa mitigar riscos. Trata-se de entender cada um desses clientes de e-mail e peculiaridades relacionadas, e codificar e-mails de forma defensiva. Como designers de e-mail, queremos limitar o número de coisas que dão errado em nossas campanhas. Ao fazer isso, desenvolvemos algumas técnicas e hacks incrivelmente criativos para ajudar os e-mails a funcionar bem em clientes de e-mail.

Comentários condicionais e tabelas fantasmas da Microsoft, a codificação híbrida e os métodos Fab Four, até mesmo algo tão básico como usar CSS embutido e limitar o número de elementos HTML e propriedades CSS usados ​​em um e-mail, tem tudo a ver com a redução de riscos.

Muitos designers de e-mail param por aí, no entanto. Eles adotam técnicas de codificação defensivas sem se perguntarem o que mais pode ser feito por e-mail. Felizmente, porém, existem designers de e-mail que não estão satisfeitos com o status quo. Eles são os únicos que trabalham para expandir os limites do design de e-mail.

Para ser justo, muitas dessas técnicas de codificação defensivas são criativas e ultrapassam os limites à sua maneira. Mas eles devem se sentir limitantes da melhor maneira possível. Eles devem inspirar os designers de email a ir além do que é considerado design de email tradicional.

É por isso que a segunda parte do design de e-mail eficaz é ultrapassar esses limites. Entender as limitações do e-mail, mas se inspirar em outras áreas, como web design e desenvolvimento - ou de uma perspectiva de design visual, coisas como design de impressão criativo - é onde está.

O exemplo mais popular desse tipo de design é a construção de e-mails interativos. Mark Robbins e a equipe da Rebelmail criaram experiências de checkout totalmente interativas na caixa de entrada para marcas como a Burberry. No Litmus, obtivemos grandes respostas depois de enviar feeds do Twitter, vídeos de fundo e gincanas em campanhas de e-mail.

Mas não pense que os e-mails precisam ser interativos para ultrapassar os limites e desenvolver o meio. Redação, estratégia e design gráfico e visual também podem mover a agulha. Really Good Emails conquistou um público massivo e dedicado, não por tornar todos os seus e-mails interativos, mas por abraçar sua voz única, seu tipo de humor e alguma personalização incrível.

Um dos meus boletins informativos favoritos de todos os tempos, o agora extinto UX Newsletter do Mailchimp, não fazia nada de especial com o código. Mas seus e-mails direcionados à arte - meu favorito era um e-mail em HTML que parecia ser dos anos 90, arte ASCII em texto simples - inspirou outros designers a trazer direção de arte para suas próprias campanhas de e-mail e expandir o conceito do que os assinantes acham que um boletim informativo por e-mail pode ser.

Embora alguns desses e-mails que definem o gênero sejam campanhas únicas apenas para se divertir, muito desse trabalho gira em torno do último aspecto de um bom design de e-mail: Criar melhores experiências para os assinantes.

Sem o trabalho pioneiro de pessoas como Fabio Carneiro e Nicole Merlin, Stig Morten Myre e Remi Parmentier, não teríamos as técnicas que todos consideramos naturais para oferecer melhores experiências aos assinantes. Fabio, Nicole e Remi contribuíram para a conversa sobre a criação de e-mails responsivos e compatíveis com dispositivos móveis que milhões de assinantes leem todos os dias, em todo o mundo. E a dedicação de Stig em desvendar os segredos do VML, e o mundo dos botões e fundos à prova de balas com ele, permitiu que assinantes em todos os lugares se envolvessem com campanhas de e-mail, apesar de todas as merdas estranhas que os clientes de e-mail fazem com nosso código.

Mais recentemente, vimos um grande impulso para criar campanhas de e-mail mais acessíveis. Pessoas como Mark Robbins e Paul Airy fizeram muitas pesquisas para nos ajudar a entender como fazer campanhas por e-mail que podem ser usadas por qualquer pessoa, independentemente de sua capacidade. E um foco mais forte no uso de tipografia, contraste, texto alternativo para imagens e redação mais clara abriu o marketing por email para mais pessoas do que nunca.

Então, isso nos traz de volta à pergunta: “O que é realmente design de e-mail?”

O design do email é mais do que código. É muito mais.

O design de e-mail envolve a compreensão de um meio único. Um meio que está relacionado, mas se diferencia do design e desenvolvimento da web. Um construído em tecnologias familiares, mas que requer o conhecimento de um especialista para ter um bom desempenho.

É claro que o e-mail trata de mitigar o risco representado por tantos clientes de e-mail e mecanismos de renderização, cada um com seu próprio conjunto de bugs frustrantes. Mas é sobre superar esses riscos e limitações e encontrar maneiras criativas de construir experiências incríveis e acessíveis para todos os nossos assinantes.

Portanto, da próxima vez que alguém perguntar se você é designer de e-mail, não hesite em responder. Não diga: “Sim, mas eu também faço trabalho de front-end da Web”. Diga a verdade: diga a eles que você resolve problemas interessantes e desafiadores e oferece melhores experiências usando o canal de comunicação mais valioso e popular do mundo, o e-mail.

Gostou deste episódio de Delivering? Dê-nos uma crítica no iTunes e compartilhe o podcast com seus amigos. E certifique-se de entrar na conversa usando a hashtag #DeliveringPodcast em sua rede social favorita.