O guia definitivo para usar snippets no design de e-mail

Entre dezenas de clientes de e-mail, aparentemente incontáveis ​​caprichos de renderização e mudança de suporte para HTML e CSS, a codificação de campanhas de e-mail é complexa. Infelizmente para designers de email, essa complexidade significa que o design do email está se tornando mais demorado, então criamos o guia definitivo para o uso de snippets no design de email.

Na The Email Design Conference, Dan Denney da Code School enquadrou o problema perfeitamente:

O maior desafio na criação de e-mails não é o Gmail ... está na hora.

Quando se trata de design de e-mail, o tempo é essencial e implementar um fluxo de trabalho de desenvolvimento é crucial. Para acompanhar as demandas em constante mudança de design de e-mail, é cada vez mais importante tornar seu fluxo de trabalho o mais eficiente possível.

Então, o que você pode fazer para otimizar seu fluxo de trabalho? Uma palavra: Snippets .

Com a ajuda de snippets, você pode criar e-mails mais facilmente - e mais rapidamente - do que nunca. Gaste menos tempo criando e solucionando problemas de e-mails e mais tempo criando melhores experiências de e-mail para seus assinantes.

O que são fragmentos?

Snippets são módulos de e-mail de código reutilizável que você pode usar em um modelo de e-mail ou sistema de design de e-mail mais amplo. Eles são ideais para elementos que são comumente usados ​​em designs de e-mail, como doctype, botões à prova de balas e links. Em vez de ter que reescrever o código cada vez que um desses elementos for usado, você pode usar um snippet. O uso de snippets automatiza sua codificação e acelera drasticamente o tempo de desenvolvimento.

Como usar snippets

Independentemente de qual editor de e-mail você está usando para construir seus e-mails, você pode usar snippets para otimizar seu fluxo de trabalho. Veja como usá-los nos editores mais comuns.

Dreamweaver

No Dreamweaver, você pode adicionar ou editar snippets visitando: Windows → Snippets → Novo / Editar. Você pode até salvar seus trechos em grupos (ou seja, trechos relacionados à tabela, trechos relacionados à imagem, etc.) para facilitar a pesquisa.

Ao codificar seu e-mail, use trechos clicando duas vezes no título do trecho, clicando em inserir ou usando um atalho de teclado.

Litmus Builder

Dentro de um projeto Builder, clique no ícone Snippets no canto superior direito do editor.

Você pode criar e editar novos trechos nessa interface e acionar trechos em seu código por meio de atalhos de teclado. Você também pode adicionar pontos de edição dentro do snippet usando {colchetes} . Depois de acionar um snippet, você pode pular automaticamente para pontos de edição predefinidos no snippet para personalização rápida e fácil.

Texto Sublime

Para visualizar trechos existentes ou adicionar novos em Texto Sublime, visite: Ferramentas → Trechos / Novo Trecho. Cada snippet é salvo em seu próprio arquivo .sublime-snippet.

Adicione snippets ao seu código por meio de gatilhos de atalho de teclado. Por exemplo, no código abaixo, o snippet é acionado quando “hello” é digitado dentro do código. Você também pode adicionar pontos de edição dentro do snippet usando cifrões em ordem sequencial ( $ 1 , $ 2 , etc.).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

Átomo

Visualize, edite ou adicione trechos no Atom visitando: Atom → Abra seus trechos. Cada snippet é salvo como seu próprio arquivo snippets.cson.

Semelhante ao Sublime Text, os snippets no Atom funcionam por meio de um gatilho de atalho de teclado. Você também pode adicionar pontos de edição dentro do snippet usando cifrões em ordem sequencial ( $ 1 , $ 2 , etc.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

Coda

Os trechos no Coda são chamados de "clipes". Para adicionar ou editar um clipe, visite: Barra Lateral → Clipes. Os clipes podem ser salvos em grupos e funcionam em um gatilho de atalho de teclado. Você também pode adicionar pontos de edição dentro do snippet, definindo pontos de espaço reservado personalizados na IU.

Biblioteca de trechos

Em cada editor, você pode criar uma biblioteca de seus trechos. Tudo na biblioteca deve estar atualizado e pré-testado. Como o mundo do e-mail muda constantemente, teste seus snippets com frequência e adicione novos quando necessário.

Embora existam muitos mais, reunimos uma lista abrangente de alguns de nossos snippets prontos para uso favoritos para usar no desenvolvimento de e-mail. Sinta-se à vontade para adicioná-los à sua biblioteca de trechos!

Doctype

Um doctype diz a um cliente de e-mail para renderizar um e-mail no modo padrões ou peculiares. Existem duas formas recomendadas de doctypes para usar para e-mail. O primeiro é o doctype HTML5:

HTML5

 <!doctype html>

XHTML

O segundo é o doctype XHTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

O Campaign Monitor analisa quais doctypes HTML são bons para usar, e há uma grande discussão sobre ele na Comunidade Litmus também. Se você não especificar um doctype para o seu e-mail, os clientes de e-mail renderizarão o e-mail no “modo quirks”, o que pode resultar em problemas de renderização.

Meta Tag

Se você está codificando seu e-mail para ser responsivo, há várias meta tags importantes que você deve incluir.

UTF-8

A primeira metatag recomendada define a codificação de caracteres para utf-8, que é a codificação típica para um e-mail. Isso pode ser alterado, se necessário.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Janela de exibição

A segunda metatag recomendada define a capacidade de resposta do e-mail.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

telefone do Windows

A terceira meta tag recomendada é especificamente para tornar o e-mail responsivo no Windows Phone.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Mesas

Os emails em HTML usam tabelas para estruturar o conteúdo. As tabelas podem ser entediantes para codificar manualmente, então desenvolvemos trechos básicos para layouts de tabela simples.

Tabela 1 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Tabela 2 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabela 3 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabela 2 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabela 2 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabela 3 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabela 3 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Botões à prova de balas

A criação de botões no e-mail é bastante trabalhosa, graças às peculiaridades de renderização do Outlook. Existem quatro tipos recomendados de botões à prova de balas, que são exibidos independentemente da presença ou não de imagens.

Botão VML

O primeiro método de botão à prova de balas foi desenvolvido por Stig Morten Myre do Campaign Monitor e é uma abordagem de botão baseada em VML:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

O Campaign Monitor também criou o buttons.cm, uma ferramenta simples para gerar o código do botão VML acima.

Botão baseado em padding

O segundo método é uma abordagem de texto ao vivo com um botão baseado em preenchimento:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

A principal desvantagem desse botão é que ele não é 100% clicável.

Botão baseado em borda

O terceiro método de botão à prova de balas envolve a criação de uma borda ao redor do link para criar uma grande área clicável:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

A principal desvantagem desse método é que o Outlook 2007-2013 não respeita as larguras das bordas nas tags de link, portanto, causa alguma redução no preenchimento artificial do botão.

Botão Padding + Border-Based

O método final envolve uma combinação dos botões de preenchimento e borda:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Esse hack é usado para evitar problemas de processamento de preenchimento no Outlook.

Imagens

Existem vários fatores importantes a serem considerados ao usar imagens em e-mail. Por exemplo, você deve definir a altura e a largura nos atributos HTML para que as imagens sejam renderizadas corretamente no Outlook. E o uso de texto ALT é extremamente importante não apenas para fins de acessibilidade, mas já que 43% dos usuários visualizam e-mail sem imagens. Finalmente, para evitar preenchimento extra e lacunas em torno das imagens, você deve configurá-las para exibir: bloquear ;.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Links

Link Básico

Ao usar um link em um e-mail, você precisará definir estilos embutidos nele, como tamanho da fonte, família da fonte e decoração do texto. Aqui está um snippet simples que já possui esses estilos embutidos:

 <a href="#">{style}</a>

Remover links azuis no iOS

Existem várias estratégias para remover links azuis no iOS, mas aqui está um snippet simples que usa uma única declaração CSS para fazer isso:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Texto de pré-cabeçalho / visualização oculto

O texto do pré-cabeçalho ou de visualização é uma cópia retirada do corpo do seu e-mail, que normalmente é exibido abaixo do nome de e da linha de assunto na caixa de entrada do assinante. Usar texto de pré-cabeçalho oculto é uma maneira de definir a cópia usada e evitar que ela afete o design real do e-mail.

Aqui está o snippet:

 <div> {preheader text} </div>

Consultas de mídia

As consultas de mídia são um componente das folhas de estilo em cascata (CSS), a linguagem usada para estilizar sites e campanhas de e-mail. Com as consultas de mídia, você pode ajustar os designs de e-mail para que sejam mais utilizáveis ​​em caixas de entrada de celular, desktop e webmail.

Aqui está uma lista de todas as consultas de mídia importantes de que você precisará ao criar e-mails:

Consulta de mídia base

 @media screen and ({declaration}) { {content} }

Consulta de mídia de largura máxima

 @media screen and (max-width: {width}) { {content} }

Consulta de mídia de largura mínima

 @media screen and (min-width: {width}) { {content} }

iPad 1 e 2 + iPad Mini Consulta de mídia

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

Consulta de mídia iPad 3 e 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Consulta de mídia para iPhone 2G / 3G / 3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4 / 4S / 5 / iPhone 6 (visualização com zoom) Consulta de mídia

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

HTC ONE + SAMSUNG GALAXY S4 / S5 Media Query

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (visualização padrão) + iPhone 6 Plus (visualização com zoom) Consulta de mídia

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (visualização padrão) Consulta de mídia

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Comentários condicionais do Outlook

Com a abundância de problemas de renderização decorrentes do suporte ao Outlook, às vezes é útil direcionar o Outlook a estilos específicos. O Outlook pode ser direcionado usando comentários mso condicionais para conteúdo HTML ou CSS.

Renderização do Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Outlook 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Mais comentários condicionais do Outlook:

• Outlook 2000
• Outlook 2000-2002
• Outlook 2000-2003
• Outlook 2000-2007
• Outlook 2000-2010
• Outlook 2002
• Outlook 2002-2013
• Outlook 2003
• Outlook 2003-2013
• Outlook 2007-2013
• Outlook 2010
• Outlook 2010-2013
• Outlook 2013

WebKit

Uma das melhores maneiras de aprimorar progressivamente seu e-mail é direcionando os motores de renderização WebKit. Aproximadamente 47% das aberturas de e-mail ocorrem em caixas de entrada com tecnologia WebKit.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

O Gmail não oferece suporte a classes ou ids no <head> de e-mails, e é por isso que CSS deve ser incluído no e-mail. No entanto, Justin Khoo, do FreshInbox, descobriu um novo hack no qual o Gmail lê CSS nos e-mails.

Se você usar o atributo lang ou title como um seletor de atributo cujo valor está em uma lista de valores separados por espaços em branco, um dos quais é uma correspondência exata, o Gmail lerá esse CSS. Isso é complicado, então aqui está um snippet para ajudá-lo:

 * [lang~="{name}"] { {style} }

Yahoo

O Yahoo Mail introduziu recentemente sua própria consulta de mídia exclusiva, permitindo-nos direcionar facilmente determinados estilos para o webmail.

 @media yahoo { {style} }

Android

James White postou recentemente na Comunidade Litmus um hack para centralizar e-mails no Android 4.4.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

Snippets na comunidade

Quer ainda mais trechos? Tem alguns favoritos que gostaria de compartilhar? Com a ajuda de geeks de e-mail em todos os lugares, já temos dezenas de trechos úteis, como o código para remover links azuis em dispositivos iOS, na Comunidade Litmus.

Classifique os trechos existentes de acordo com o cliente de e-mail para o qual foi criado ou o tipo de trecho (isto é, hack, imagem, link, etc.). Você pode adicionar o seu próprio e criar uma biblioteca de trechos de seus favoritos. E você pode economizar ainda mais tempo importando snippets da Comunidade diretamente para o Builder. Juntamente com as pré-visualizações instantâneas do Builder, a codificação com snippets pode ser a maneira mais rápida de fazer campanhas de e-mail incríveis.

Confira os trechos em Comunidade →