Vamos falar seriamente sobre templates de email marketing (compatibilidade)

Eu acho que é hora de falar de forma realista sobre templates de email marketing, e em que medida são diferentes de uma página web.

A verdade é que frequentemente recebemos perguntas sobre isto, com problemas no layout da newsletter.

Às vezes é um aspecto simples, que pode ser facilmente corrigido.

Outras vezes é um erro mais complexo, que pode afetar de forma permanente o funcionamento do template de newsletter.

Você não pode criar templates de email marketing como se fossem páginas web

Infelizmente, não é a mesma coisa, embora ambos utilizem HTML.

Editores como Dreamweaver foram criados para desenvolver sites, não para templates, por isso temos de ser cuidadosos.

É muito provável que você não sabia, mas um dos meus primeiros empregos foi o de web designer .

Foi há muito tempo.

Bem, não tanto assim.

Na verdade, quando eu trabalhava com os primeiros layouts de páginas web nós utilizávamos tabelas, não divs.

Sim, há muito tempo.

Aos poucos eu vivi a transição para o uso de CSS em websites, e, portanto, todos os problemas de compatibilidade entre diferentes navegadores.

Horrível, o que parecia correto em um navegador não funcionava em outro.

Pois cada navegador tinha suas próprias regras sobre como deveria interpretar o código HTML.

O resultado, como você pode imaginar, era horas e horas de diversão até que o website pudesse ser visualizado corretamente nos navegadores mais populares.

Bem, na verdade não era tão engraçado.

Podia ser muito trabalhoso.

O que tudo isso tem a ver com o design de templates de email marketing?

Tem tudo a ver!

Os navegadores evoluiram muito para poder suportar cada vez melhor e mais uniformemente o padrão HTML, porém no caso dos clientes de email, isto não ocorreu.

É como voltar ao passado.

Os clientes de email suportam HTML básico, a utilização de CSS é muito limitada, não suportam JavaScript.

Então, ao trabalhar na criação de templates de email marketing é preciso utilizar  tabelas e estilos inline.

Não é apenas o fato de que os clientes de email não suportam CSS moderno, não suportam a utilização de arquivos externos, estes arquivos não serão carregados, além disso, os estilos que geralmente são utilizados nas tags style dentro do head não serão exibidos, a seção head geralmente será completamente ignorada, e este é um dos problemas mais comuns.

Muitas dessas limitações estão relacionadas com a segurança, porque o carregamento de arquivos externos pode ser utilizado para afetar o cliente de email.

Além disso, os softwares de leitura de email não estão evoluindo  na mesma velocidade dos navegadores, além de ser necessário manter a compatibilidade com versões anteriores.

O fato é que os templates de email marketing não podem ser criados como um website, e eu acho que vai continuar assim por algum tempo.

Para nos ajudar com estes aspectos mais complexos, pedi ajuda a nossa colega Florencia que irá definir alguns pontos fundamentais sobre o tema.

Que estilos CSS são recomendados para uma newsletter?

Quando você envia uma campanha de email com sua conta Mailrelay você pode contar com nossos templates pré-definidos, com uma ampla variedade de opções para atender às suas necessidades, mas se você tiver experiência na criação de HTML, você também pode fazer o upload de seu próprio template de newsletter.

No entanto, quando se trata de criar um template de newsletter, você pode ter bastante dor de cabeça devido a problemas de compatibilidade com os diferentes clientes de email. A principal causa destes problemas ocorre porque alguns clientes não reconhecem certas regras de estilos CSS, por isso é preciso estar sempre bem informado sobre estes problemas.

A seguir você encontrará uma lista de compatibilidade para as regras CSS mais frequentes, nos softwares mais comumente usados. Abaixo você encontrará também alguns esclarecimentos sobre casos específicos:

*width/padding no Outlook: Esta regra não é compatível se usada em etiquetas <p> ou <div>

Outros estilos: Border-color, max-width/min-width, list-style-image/list-style-position: Outlook e outlook.com (ex Hotmail) não são compatíveis com estes estilos.

Responsive: por enquanto só é compatível com iPhones / iPads e apple email, por isso recomenda-se precaução ao criar / usar um template responsive.

CSS3 / HTML5: Apresentam uma taxa muito baixa de compatibilidade, de forma que não são recomendados.

Além disso, tente não usar uma folha de estilo externa, porque a maioria dos softwares não irão encontrá-la, de modo que a sua newsletter será exibida sem estilos.

Finalmente lembre-se de evitar o uso de divs se seu template tem várias colunas, neste caso, as tabelas são a ferramenta mais confiável.

Se você desejar aprender a trabalhar com a criação de templates de newsletters, nosso blog oferece outros artigos sobre o tema

Muitas limitações

Sim, a compatibilidade é um problema que deve ser considerado.

Eu, pessoalmente, gosto muito de um resumo que vi em Litmus, sobre a tirania das tabelas, explicando as diferenças entre o design de websites e de templates de newsletter.

Em lugar de…Utilize…
 div table, tr, td
 p td
 h1, h2, h3 td, span
 link a css externo td com style inline
 margin td com style padding
 floattabelas múltiplas e células alinhadas

Como explicado anteriormente, é como voltar ao passado, mas é preciso considerar estes pontos.

Em suma

O mais importante é lembrar que um email não é um website, e que os clientes de email não suportam todos os recursos que os navegadores aceitam sem problemas.

Você precisa preparar cuidadosamente seus templates de newsletters, caso contrário terá mais problemas do que benefícios.

E esperar que as coisas melhorem no futuro.

Deixe um comentário se você gostou deste artigo.

Deixe um comentário

O seu endereço de e-mail não será publicado.