Uma introdução à criação e envio de e-mail HTML para desenvolvedores da Web

Passei os últimos anos construindo ferramentas de desenvolvimento — dois desses anos como líder de design de produto no Mailgun, um serviço de e-mail para desenvolvedores, onde aprendi muito sobre como o e-mail funciona e os problemas que os desenvolvedores enfrentam ao criar e-mails em HTML. Neste post, vou compartilhar um pouco do meu conhecimento sobre o tema.

Email HTML: Duas palavras que, quando combinadas, trazem lágrimas aos olhos de um desenvolvedor. Se você é um desenvolvedor web, é inevitável que codificar um e-mail seja uma tarefa que cai no seu colo em algum momento de sua carreira, goste você ou não. A codificação de e-mail HTML é antiga. Pense em 1999, quando nos chamávamos de “webmasters” e usávamos Frontpage, editores WYSIWYG e tabelas para marcar nossos sites.

Não mudou muito no design de e-mail. Na verdade, piorou. Com a introdução de dispositivos móveis e cada vez mais clientes de e-mail, temos ainda mais ressalvas para lidar com a criação de e-mail em HTML.

Passei os últimos anos construindo ferramentas de desenvolvimento — dois desses anos como líder de design de produto no Mailgun, um serviço de e-mail para desenvolvedores, onde aprendi muito sobre como o e-mail funciona e os problemas que os desenvolvedores enfrentam ao criar e-mails em HTML. Neste post, vou compartilhar um pouco do meu conhecimento sobre o tema.

Leitura adicional no SmashingMag:

• Crie e crie boletins informativos por e-mail sem perder a cabeça
• 18 modelos de e-mail para web designers e desenvolvedores
• Facilitando a codificação de e-mail em HTML responsivo com MJML
• Como melhorar seu fluxo de trabalho de e-mail com design modular
  

Introdução ao envio de e-mail

Como desenvolvedor responsável por uma campanha de e-mail ou por todos os e-mails que sua empresa envia, você precisará saber como o e-mail funciona, os requisitos legais e como realmente entregar o e-mail. As empresas enviam alguns tipos diferentes de e-mail. Vamos dar uma olhada.

E-mail de marketing

Muitos provedores de serviços de e-mail (ESPs) são especializados em e-mails promocionais e de marketing: SendPulse Email, Campaign Monitor, MailChimp, Emma, ​​Constant Contact, para citar apenas alguns. Eles fornecem soluções completas para gerenciar assinantes, trabalhar com modelos de e-mail, executar campanhas de e-mail em massa e relatórios.

E-mail transacional

O email transacional inclui recibos, alertas, emails de boas-vindas, redefinições de senha e assim por diante, e normalmente é implementado com ferramentas de desenvolvimento e APIs, como SendPulse Transactional, Mailgun, SendGrid e Postmark. Essas ferramentas são mais focadas em API, menos baseadas em CMS e WYSIWYG; no entanto, combinados com um serviço como o Sendwithus, eles podem se tornar ainda mais poderosos.

Uma alternativa ao uso de um serviço é lançar seu próprio servidor de e-mail com algo como o Postfix. A desvantagem disso é que cabe a você configurá-lo e entender os detalhes técnicos de envio de e-mail, implementação de rastreamento e cancelamento de assinatura e entrega de e-mail nas caixas de entrada.

E-mail do ciclo de vida

Os serviços de e-mail baseados no ciclo de vida e no comportamento ajudam na integração, no envolvimento e muito mais. Muitos ESPs focados em marketing também oferecem esse serviço, mas costumo agrupar serviços como SendPulse Automation, Intercom, Customer.io, Drip, Vero e ConvertKit nesta categoria.

Práticas recomendadas para lista de e-mail

Não compre listas de e-mail. Talvez haja um punhado de serviços legítimos por aí, mas é melhor ficar longe de comprar listas.

Minha experiência é que qualquer pessoa que compre uma lista de e-mail sofrerá muitas devoluções, dará má reputação ao seu endereço IP (Internet Protocol) e terá seus e-mails bloqueados por provedores de serviços de Internet (ISPs) ou enviados para spam. 85% do e-mail do mundo é considerado spam, de acordo com a SenderBase; não caia neste balde.

Ativação dupla

Um assinante que precisa verificar seu endereço de e-mail adiciona uma etapa extra ao processo, mas faz sentido e impede que outras pessoas abusem de seu endereço de e-mail inscrevendo-as em listas sem sua permissão. Também ajuda a manter sua lista de assinaturas limpa e é a “maneira 100% correta de validar um endereço de e-mail”.

PODE SPAM

Estes são seus requisitos legais para envio de e-mail, impostos pela Lei CAN-SPAM de 2003:

• Não use informações de cabeçalho falsas ou enganosas.
• Não use linhas de assunto enganosas.
• Identifique a mensagem como um anúncio.
• Diga aos destinatários onde você está.
• Diga aos destinatários como optar por não receber e-mails futuros de você.
• Honre os pedidos de desativação prontamente.
• Monitore o que os outros estão fazendo em seu nome.

MailChimp tem uma boa lista de requisitos legais de e-mail por país.

Análise e medição de desempenho

Meça tudo. Você precisa medir para saber se seus e-mails estão melhorando. Os números serão muito diferentes dependendo do que você faz, do seu setor, do tipo de e-mail que você envia e do contexto. No entanto, em geral:

• 20% é uma boa taxa de abertura,
• 3 a 7% é uma boa taxa de cliques,
• 5% é uma taxa de rejeição ruim,
• 0,01% é uma taxa de spam ruim,
• 1% é uma taxa de cancelamento de assinatura ruim.

Além disso, lembre-se de que as taxas de abertura e de cliques podem ser métricas de vaidade (leia “elas realmente não importam”). No final do dia, o que você realmente deseja acompanhar é essa meta final ou conversão. No Airbnb, eles rastreiam uma pontuação de qualidade de e-mail, que é um bom indicador da qualidade do engajamento.

O construtor de URLs do Google pode ajudar no rastreamento se você estiver usando o Google Analytics.

Envio de pontuação e reputação

Seus e-mails têm uma reputação e pontuação associadas a eles . Isso afeta a forma como os ISPs e provedores de caixa de correio lidam com seu e-mail, se o aceitam ou rejeitam e se o enviam para a caixa de entrada do destinatário ou diretamente para o spam.

Alguns fatores contribuintes são:

• sua reputação de IP (verifique a sua com o SenderScore),
• sua assinatura de nome de domínio (consulte DKIM e SPF),
• taxas de rejeição e taxas de reclamação.

Envio de e-mail em massa

Quando você envia muitos e-mails (imagine uma campanha com milhões de e-mails), nem todos são enviados instantaneamente. Eles só podem ser enviados tão rápido quanto os servidores e os endereços IP podem lidar com eles. Lembre-se de que seus destinatários podem não receber os e-mails exatamente ao mesmo tempo.

Portanto, se você estiver enviando milhões de e-mails de uma só vez, provavelmente desejará alguns IPs para lidar com a carga.

Clientes de e-mail

A Litmus acompanha a participação de mercado dos clientes de e-mail, com base em suas próprias estatísticas internas. Tenha em mente que isso provavelmente não é o mesmo para sua base de clientes, mas é um bom indicador para seguir.

Aqui estão as estatísticas em dezembro de 2016:

• iPhone: 33%
• Gmail: 19%
• iPad: 12%
• Android: 8%
• Correio da Apple: 7%

Tenha em mente que nem todos os e-mails podem ser rastreados . O rastreamento de e-mail é feito por rastreamento de pixel, portanto, apenas os clientes com imagens ativadas relatarão.

Modelos HTML

Construir modelos de email HTML pode ser uma tarefa árdua. Como resultado, muitos e-mails mal projetados estão por aí – desajeitados, temáticos, detalhados, sem sentido, distrativos. Se você gosta de um desafio ou quer uma aparência única, construir o seu próprio pode ser divertido e recompensador. Como alternativa, alguns bons modelos de e-mail estão disponíveis:

• Modelos de tornassol
• Modelo de e-mail HTML responsivo realmente simples
• Modelos de e-mail HTML
• Fundação para e-mails 2

Criando modelos de e-mail em HTML

Agora você sabe como configurar e enviar e-mails corretamente. A próxima decisão que você tomará é codificar seu próprio modelo HTML. Isso é um pouco mais complexo do que codificar uma página da web comum. Vamos mergulhar.

Mecanismos de renderização de cliente

O design de e-mail ainda está na idade das trevas. Devido aos inúmeros clientes e dispositivos de e-mail, seu e-mail será renderizado para os usuários de várias maneiras.

Os clientes de email usam mecanismos diferentes para renderizar emails HTML:

• Apple Mail, Outlook para Mac, Android Mail e iOS Mail usam WebKit .
• O Outlook 2000, 2002 e 2003 usam o Internet Explorer .
• O Outlook 2007, 2010 e 2013 usam o Microsoft Word (sim, Word!).
• Os clientes da Web usam o respectivo mecanismo do navegador (por exemplo, o Safari usa o WebKit e o Chrome usa o Blink).

Os clientes também adicionarão seu próprio sabor de estilos em cima do seu. Por exemplo, o Gmail define todas as fontes <td> como font-family: Arial,sans-serif; .

Observe suas próprias estatísticas para saber para o que projetar.

Suporte do Gmail para CSS inline e consultas de mídia

Apenas recentemente o Google anunciou o suporte para CSS incorporado e consultas de mídia no Gmail. Isso é enorme para a indústria de desenvolvimento de e-mail.

Agora, a partir de setembro de 2016, o Gmail oferecerá suporte a várias propriedades CSS, o que facilita muito o desenvolvimento de modelos para o Gmail.

Usando tabelas HTML para layout

Divs têm problemas de posicionamento e modelo de caixa em diferentes clientes — em particular, aqueles que usam o Microsoft Word para renderizar (ou seja, Outlook). Você pode usar divs se quiser, mas é mais seguro codificar como se fosse 1999 e ficar com tabelas . Isso significa:

• <table> em vez de <div> ,
• #FFFFFF em vez de #FFF ,
• padding em vez de margin ,
• CSS2 em vez de CSS3,
• HTML4 em vez de HTML5,
• background-color em vez de background ,
• Atributos HTML em vez de CSS,
• CSS embutido em vez de folhas de estilo ou blocos <style> .

Essas são as melhores práticas. Você certamente poderia ignorar a rota segura e ir além.

Ao usar tabelas, não esqueça border="0" cellpadding="0" cellspacing="0" . Se você estiver usando o Premailer, ele terá declarações CSS especiais para aplicar esses atributos HTML.

CSS embutido

Alguns clientes (principalmente o Gmail até recentemente) removerão qualquer CSS que não esteja embutido . Você tem algumas opções aqui:

• escreva CSS inline à medida que avança,
• use um inliner CSS baseado na web,
• use um inliner CSS programático,
• deixe seu ESP lidar com o inlining para você (se ele suportar).

Escrever em linha à medida que você avança não é exatamente uma solução escalável ou sustentável, então não recomendo isso, mas sei que muitos desenvolvedores de e-mail preferem isso para manter 100% de controle. Se você escrever seu CSS inline manualmente, recomendo usar snippets e/ou uma linguagem de modelagem com parciais e auxiliares. Isso evitará que você tenha que se repetir.

Inliners baseados na Web incluem HTML Email's Responsive CSS Inliner e Foundation for Email's Responsive Email Inliner.

Para um inliner programático, recomendo o módulo Juice do Node.js. A gem Premailer e Roadie são boas alternativas ao Ruby.

Botões

Tentar alcançar o botão perfeito entre clientes é doloroso. Como mencionado, você deve usar tabelas e células de tabela para praticamente tudo, incluindo botões.

Minha preferência é usar a seguinte solução. Aqui está como você normalmente pode estilizar um botão para a web:

 <a href="#" class="btn btn-primary">Click Here</a>

Em vez disso, escreva assim:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Então, quando seu CSS estiver embutido, ficará assim:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

O que está acontecendo aqui? O primeiro <td> é um wrapper para nos ajudar a centralizar o botão. O segundo <td> é o tamanho do botão. Alguns clientes (como o Outlook) não reconhecem o preenchimento na tag <a> , então preenchemos a cor de fundo da célula da tabela. A tag <a> então ocupa espaço disponível no segundo <td> , e toda a área se torna clicável. Confira o código e os testes do cliente no Litmus.

Esta é apenas uma maneira de implementar botões no email. É certo que nem sempre parece idêntico em todos os clientes, mas a web também nem sempre é perfeita em pixels. Eu prefiro isso porque é mais simples e não envolve o uso de ativos de imagem ou VML.

O que é VML? Se você passou algum tempo desenvolvendo e-mails, provavelmente encontrou alguma referência a ele. Vector Markup Language (VML) é compatível com versões antigas do Outlook . Segundo a Microsoft, a partir do Internet Explorer (IE) 10, o VML está obsoleto, o que significa que não é mais suportado em novas versões do IE. No entanto, enquanto o Outlook 2007, 2010 e 2013 estiver disponível, você o verá sendo usado, normalmente para imagens de plano de fundo .

Tipografia

Em geral, manter as fontes padrão do sistema é mais fácil. Isso inclui Helvetica, Arial e assim por diante. No entanto, podemos usar fontes da web , como Google Fonts. Coloque-os atrás de uma consulta de mídia condicional do WebKit , para que o Outlook não os estrague:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Lembre-se de incluir uma família de fontes, tamanho de fonte e cor para cada <td> , ou você corre o risco de o cliente substituir seus estilos de tipo cuidadosamente escolhidos.

Condicionais

Podemos aplicar estilos CSS específicos e mostrar ou ocultar elementos e conteúdo para diferentes versões do Outlook.

O seguinte destina-se a todas as versões do Outlook baseadas no Microsoft Word:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

Este próximo snippet tem como alvo todas as versões do Outlook baseadas no IE:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

Também podemos segmentar números de versão específicos do Outlook:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Podemos segmentar clientes baseados em WebKit com uma consulta de mídia:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Imagens e mídia

Imagens no e-mail

Alguns clientes mostrarão imagens por padrão. Alguns não. Tenha isso em mente ao incluir imagens em seu conteúdo de e-mail. Isso também afeta as métricas de rastreamento, porque as imagens normalmente serão usadas para rastrear aberturas.

• O Outlook bloqueia a renderização de imagens por padrão.
• O Apple Mail não.
• O Gmail não (mais).

Lembre-se de incluir um bom texto alt para todas as suas imagens. O texto pode dizer ao usuário o que a imagem diz ou apenas descrever o que é (por exemplo, “logotipo da empresa”). Você pode ser criativo com texto alt para clientes que desativam imagens, como o Email Monks faz:

Lembre-se de incluir uma redefinição básica para todas as imagens:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

GIFs animados são suportados na maioria dos clientes. As versões do Outlook de 2007 a 2013 não oferecem suporte a GIFs animados, voltando ao primeiro quadro.

Lembre-se de compactar seus ativos de mídia e carregá-los em uma rede de entrega de conteúdo (CDN), como Amazon Web Services, Cloudinary ou imgix. A maioria dos ESPs de marketing lidará com isso para você.

Os gráficos vetoriais escaláveis ​​(SVGs) têm muitas vantagens na web. Como seria de esperar, o suporte por e-mail varia e o SVG requer alguns hacks ou condicionais de fallback. Eu normalmente recomendo ficar longe de SVG por e-mail, mas se você quiser levar isso a sério, então CSS-Tricks tem um guia sobre suporte a SVG por e-mail.

Para imagens prontas para Retina, forneça uma imagem maior (1,5× a 3×) e redimensione-a. Normalmente, salvo uma imagem de baixa qualidade com dimensões 2×, o que funciona bem. (Eu escrevi mais sobre essa técnica.)

Lembre-se de que, para o Outlook, você precisa declarar a largura de uma imagem com o atributo width . Caso contrário, o Outlook pode renderizar a largura real da imagem e quebrar seu email.

Vídeo no e-mail

O vídeo é compatível com iOS, Apple Mail e Outlook.com. Você pode usar consultas de mídia para mostrar ou ocultar um vídeo com base no cliente. Email on Acid tem mais suporte a vídeo por email.

Para se inspirar, confira o tutorial de Kevin Mandeville sobre como codificar vídeo HTML5 como pano de fundo em um e-mail – coisas impressionantes e vale a pena dar uma olhada.

Formulários no e-mail

O suporte para elementos de formulário varia. Tente evitar e vincule a um formulário externo se precisar de um. O Campaign Monitor oferece alguns conselhos sobre formulários.

Obviamente, depende dos seus objetivos. Ficar longe de formulários é mais seguro, mas Rebelmail e Mixmax fizeram coisas interessantes com formulários para pesquisas e e-commerce, com bom suporte de fallback.

Ações do Gmail

O Google disponibiliza ações úteis para o Gmail. Você provavelmente já os viu no GitHub para problemas ou na Amazon para pedidos.

Adicionar o código é simples. Você tem duas opções:

• JSON-LD
• microdados

A inclusão na lista de permissões envolve mais algumas etapas. Você pode testar as ações do Gmail com um endereço @gmail.com .

Texto do pré-cabeçalho

Algo importante, mas muitas vezes esquecido, é o texto do pré-cabeçalho. Alguns clientes mostram o texto de visualização ao lado ou abaixo da linha de assunto . Esses clientes incluem iOS, Apple Mail, Outlook 2013, Gmail e AOL.

Os clientes irão pegar o primeiro pedaço de texto que encontrarem no corpo do seu e-mail e exibi-lo aqui. Aproveite ao máximo e adicione um elemento oculto ao conteúdo do seu corpo que aparece primeiro. Este texto deve fornecer um incentivo extra para o usuário abrir seu e-mail. Esconda o texto assim:

 <span>Preheader text goes here</span>

Use a ferramenta de assunto e pré-cabeçalho de Austin Woodall para visualizar seus assuntos e pré-cabeçalho de e-mail.

E-mail de teste

Acho que nunca enviei um e-mail com sucesso na primeira vez. Sempre há algo para corrigir, sempre um erro de digitação, sempre um problema de renderização no Outlook, sempre algo que esqueci de adicionar.

Você pode testar seu e-mail de algumas maneiras:

• Envie um e-mail para você mesmo e verifique-o em um cliente de desktop (Outlook), um cliente da web (Gmail) e um cliente móvel (iOS Mail).
• Automatize testes usando Litmus ou Email on Acid.
• Revise o conteúdo e verifique as renderizações do layout.
• Teste A/B de vários tipos de conteúdo, comprimentos de conteúdo e linhas de assunto.

Como você envia e-mails HTML para si mesmo? Boa pergunta. É mais difícil do que você pensa. O PutsMail permite que você faça isso com bastante facilidade, e o Thunderbird permite que você componha com seu editor de HTML.

MIME Multi-Parte

Um e-mail de texto simples é apenas isso, texto simples. Um email HTML é apenas HTML. A maioria dos e-mails que você envia ou recebe são e-mails de várias partes MIME (Multipurpose Internet Mail Extensions) (não confundir com o tipo MIME). Esse padrão combina texto simples e HTML, deixando para o destinatário decidir qual renderizar.

Ao enviar um email, seja transacional ou em massa, inclua as versões HTML e de texto simples . Mesmo que, em sua mente, todos usem um cliente que renderize HTML, ainda envie texto simples.

Além disso, observe que alguns clientes renderizam emails de texto simples como HTML; por exemplo, o Gmail adicionará alguns estilos padrão e transformará URLs em links. A maioria dos ESPs construirá o MIME para você, então você realmente não precisa se preocupar com isso. Alguns também criarão uma versão em texto simples, com base em seu HTML.

Dica profissional: no Gmail, selecione "Mostrar original" no menu suspenso para ver o MIME completo.

Uma nova parte MIME surgiu: text/watch-html . Este conteúdo será exibido apenas no Apple Watch (e em quaisquer outros clientes que suportem esse tipo MIME daqui para frente).

Acessibilidade

Na Web, se você seguir padrões e práticas recomendadas e usar marcação semântica e sintaxe HTML válida , tende a obter acessibilidade básica pronta para uso. Infelizmente, com e-mail, devido aos nossos hacks excessivos e ao suporte deficiente para HTML, a acessibilidade é muitas vezes ignorada.

Eu vi pouca discussão sobre acessibilidade de e-mail, mas uma que se destaca é a postagem de Mark Robbins sobre acessibilidade. Ele recomenda o seguinte:

• Adicione role="presentation" a cada tabela para que fique claro que a tabela está sendo usada para layout.
• Forneça texto alt com descrições significativas.
• Se você não precisar ou quiser texto alt , use alt="" para que os leitores de tela saibam que ele deve estar em branco.
• Use tags HTML semânticas, como <p> e <h1> , quando aplicável.
• Use o atributo role para elementos como cabeçalhos e rodapés (por exemplo, role="header" ).

Design de e-mail responsivo

• As aberturas de e-mail em dispositivos móveis estão em 50% e aumentando. A métrica exata depende de qual relatório você verifica e qual público você atende, mas acho que todos podemos concordar que isso é importante.
• O Email Client Market Share, em agosto de 2016, coloca o iPhone em 33%, o iPad em 11% e o Android em 10% (mais de 50%!).
• O MailChimp descobriu que os cliques únicos entre usuários móveis para campanhas responsivas aumentaram de 2,7 para 3,1% – um aumento de quase 15%.

“Responsive web design” é uma frase cunhada por Ethan Marcotte em 2010:

Ao casar layouts fluidos baseados em grade e consultas de mídia CSS3, podemos criar um design que, bem, responde à forma da exibição que o renderiza.

No mundo do e-mail, ainda podemos fazer uso de design fluido, layouts baseados em grade e consultas de mídia . O problema é que nem todos os clientes suportam isso. Portanto, precisamos de alguns hacks ao longo do caminho.

Até recentemente, o Gmail não suportava consultas de mídia. Felizmente, em setembro de 2016, a maioria de seus clientes o faz. No entanto, vários clientes móveis ainda não o fazem, incluindo Yahoo, Windows Phone 8 e Gmail para Android.

Várias técnicas são usadas no mundo do e-mail para contornar a falta de suporte para consultas de mídia. Alguns dos termos que você ouvirá são “fluido”, “adaptativo”, “responsivo”, “híbrido” e “esponjoso”.

Fluido

A solução mais fácil é manter uma única coluna e tornar seus e-mails fluidos. Isso significa que, à medida que a janela de visualização diminui, sua área de conteúdo diminui.

 .container { max-width: 600px; width: 100%; }

Responsivo e Adaptativo

Usando consultas de mídia e pontos de interrupção, podemos fornecer estilos alternativos para viewports de tamanhos diferentes. Também podemos ocultar ou mostrar elementos.

Isso começa a ficar complicado quando você introduz uma grade e colunas. Você pode ter um layout de duas colunas e, em seguida, alternar para um layout empilhado de uma coluna abaixo de uma certa largura da janela de visualização.

Mas , como vimos, as consultas de mídia não são suportadas em todos os lugares, então isso nem sempre é confiável.

Híbrido e Esponjoso

Essa técnica usa um pouco de fluidez, um pouco de resposta e alguns hacks para suporte ao Outlook. Também podemos garantir que as colunas sejam empilhadas sem consultas de mídia.

Essa técnica é descrita pela ActionRocket, e Nicole Merlin escreveu um ótimo tutorial passo a passo sobre ela.

Aqui está um trecho do código que eu uso para construir a maioria dos meus e-mails.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Dê uma olhada no repositório esponjoso de código aberto de Fabio Carneiro no GitHub e leia a opinião de Stig sobre como codificar emails mobile-first. Remi Parmentier também tem outra técnica responsiva que não precisa de media queries e faz uso da função calc() .

Imagens responsivas

Conforme mencionado, use imagens Retina de 1,5× a 3× e defina as dimensões da imagem em linha.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

Não podemos contar com max-width: 100%; porque alguns clientes o ignoram. Você também vai querer incorporar o seguinte CSS:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

Automatizando seu fluxo de trabalho

O processo de montar um e-mail à prova de balas é complexo. Há muitos passos, e há espaço para muitas coisas darem errado.

Como qualquer tarefa monótona com etapas, recomendo automatizar o que puder, para que você construa o sistema uma vez e facilite o trabalho futuro.

Brian Graves tem um bom post sobre como tornar seu e-mail modular. Assim como você tem um sistema de design e uma biblioteca de padrões para um site ou aplicativo, você deve fazer isso para e-mail, tornando os componentes reutilizáveis ​​e os e-mails consistentes em todo o seu produto e empresa.

Kevin Mandeville recomenda o uso de trechos de código reutilizável para otimizar seu fluxo de trabalho, para que você não tenha que reescrever o código constantemente . Em seu post, ele descreve como usar snippets em editores modernos (como Atom e Sublime) e aponta para a biblioteca de snippets de contribuição da comunidade hospedada pelo Litmus.

De minha parte, montei e criei um fluxo de trabalho do Grunt para automatizar compilações de e-mail. Ele executa várias tarefas, como inlining CSS , compactação de imagens, upload de imagens para um CDN, envio de uma visualização e testes com Litmus, tudo com um comando. Se você é novo no Grunt, escrevi um tutorial detalhado sobre como ele funciona. O Foundation for Email também possui ótimas ferramentas de automação para desenvolvedores, assim como o Mailjet com sua estrutura de email responsiva MJML.

Olhando para o futuro

O Google recentemente lançou suporte para consultas de mídia; A Microsoft acaba de fazer uma parceria com a Litmus para “tornar o email melhor”; e o Alto da AOL agora oferece suporte a e-mail responsivo. Assim, o futuro parece muito mais brilhante.

Mais e mais empresas e desenvolvedores estão experimentando o que é possível com a tecnologia de e-mail: animação CSS, áudio, carrinhos de compras em e-mail. Espere que mais instâncias de e-mail interativo e cinético surjam em 2017.

Conclusão

O design e desenvolvimento de e-mail é uma fera. É como construir uma página da web… 10 anos atrás . Os fornecedores de clientes de e-mail não têm sido tão progressivos quanto os fornecedores de navegadores na adoção de novos padrões, e nós, usuários e empresas, não adotamos novos clientes de e-mail como fazemos com os navegadores da web. Acrescente a isso a ascensão do celular, e ficamos nesse estado de ter que suportar uma mistura complicada de clientes e versões .

Minha introdução aqui é uma visão geral de alto nível; você poderia mergulhar fundo em cada um desses pontos. Espero que tenha dado a você uma boa visão do mundo da criação e envio de e-mail, e os trechos de código e recursos adicionaram algumas horas de volta à sua vida.

Recursos recomendados

• Modelo de email HTML responsivo realmente simples, Lee Munroe (meu modelo de email de código aberto gratuito)
• Design de e-mail profissional , Jason Rodriguez
• “Desmascarando e-mails HTML” (curso), Dan Denney, Code School
• “Os melhores designs de e-mail do universo (que entraram na minha caixa de entrada)”, e-mails realmente bons
• “Exemplos e técnicas de e-mail dinâmicos e interativos (cinéticos)”, Justin Khoo

Blogues a seguir

• Monitor de campanha
• MailChimp
• tornassol
• E-mail sobre ácido