Por falta de conteúdo de referência atualizado ou relevante na internet sobre como compor Emails em HTML, acabei me animando em escrever esta publicação, que visa sanar muitas das dúvidas sobre como andam as limitações nos dias de hoje e quais seriam as melhores práticas.

Compor Emails em HTML com decorações e um belo design sempre foi a meta de qualquer agência de marketing digital que trabalhe com Email Marketing. Também sempre foi uma mídia complicada e bem restritiva de se lidar, por conta das limitações impostas pelos serviços e clientes de Email existentes.

Com o passar do tempo, navegadores e clientes de Email evoluíram, ganharam uma série de novos recursos, celulares e tablets entraram no páreo, mas o que isso muda no lado de quem compõe campanhas de Email Marketing utilizando Emails em HTML?

Qual a dificuldade com Emails em HTML?

No mais abrangente mundo do web design, nós passamos pela guerra dos navegadores onde o Netscape e o Internet Explorer brigavam para ver quem introduzia mais formas de escrever código, o que acabou por gerar um caos. Graças ao projeto “Web Standards” e esforços associados, navegadores agora são muito mais consistentes do que eram a anos atrás.

Infelizmente, enquanto tal guerra era travada, clientes de Email como o Outlook e o Lotus Notes estavam aparentemente se escondendo e ficaram para trás.

Ainda pior que não tentar melhorar a renderização HTML e CSS deles, alguns clientes de Email simplesmente andaram para trás. Em 2007, a Microsoft decidiu que o Outlook 2007 deveria parar de usar o Trident (Renderizador do Internet Explorer) para exibir Emails. Antes que você se empolgue, eles estavam o substituindo pelo Microsoft Word. Sim, aquele Microsoft Word, o processador de texto. Em uma versão, o Outlook deixou de ser decente e entendível para se tornar simplesmente terrível em exibir Emails em HTML de qualquer um que não use o Outlook.

Outlook 2007 foi um cliente de Email imensamente popular, e ainda é até hoje, mas este não é o único problema: compor Emails em HTML agora significa que você está lidando com mais de quatro ou cinco navegadores populares, além de 12 a 15 diferentes clientes de Email, cada um com uma boa parcela de mercado.

Alguns deles são excelentes, como o Apple Mail. Um design que funciona no Safari fica perfeito no Apple Mail. Outros, como o Outlook, são horríveis e irão causar tontura, perda de cabelo e taquicardia. Entre isso e os resultados desejados existe uma miríade de limitações de renderização, peculiaridades e inconsistências.

O maldito Outlook 2007
Então existe um grande desafio para quem se propõe a compor Emails em HTML. Como você pega habilidades de web design de 2017 e aplica elas à clientes de Email com capacidades antiquadas e limitadas? Não se desespere, porque é possível com um pouco de conhecimento e muita perseverança para testar. Você até pode conseguir manter seus cabelos!

Compondo um modelo de Email em HTML eficaz

Se você está construindo sites tempo o suficiente para lembrar dos dias de glória do GeoCities e Angelfire, você provavelmente construiu seus primeiros sites utilizando tabelas para diagramar o layout. Compor Emails em HTML hoje irá fazer você viajar para este tempo, no entanto, com uso bem reduzido do tag <hr>.

Conheça sua audiência

O primeiro passo em compor Emails em HTML de sucesso é saber como ele será lido. Se os assinantes irão ler seus Emails em celulares BlackBerry corporativos, você pode querer usar texto plano, por exemplo. Na maioria dos casos existirá uma variedade de clientes de Email em uso, mas existem algumas maneiras de se descobrir. Alguns sites, como o Campaign Monitor, publicam estatísticas de utilização de clientes de Email para se ter uma noção geral, no entanto, com algumas limitações.

No entanto, não existe garantia de que tal informação irá refletir a sua audiência. Serviços de Email Marketing como BonoMailer, Campaign Monitor, Mailchimp e Mailster irão fornecer um relatório para cada campanha, listando o cliente de Email para cada assinante, quando disponível.

O que você procura nestes relatórios é o seu menor denominador comum. Se existe 30% de usuários utilizando o Lotus Notes 7, por exemplo, você precisa ter certeza de testar em tal cliente antes de enviar. Uma versão particular de um cliente de Email pode ser relevante – O Outlook 2003 irá te causar menos dores de cabeça que o Outlook 2007, e em alguns casos, sua lista pode utilizar apenas uma destas versões.

Se você nunca enviou nada para alguma lista em especial, você pode ter que testar em cada cliente de Email que encontrar, e tentar prever com cautela algo sobre o tipo de audiência que você está lidando. É mais provável que usem celulares para ler Emails, ou servidores corporativos extremamente limitados?

Talvez sejam apenas indivíduos utilizando endereços do Outlook.com e Yahoo, que são pelo menos fáceis de se testar. Seja o que for que você sabe sobre sua audiência, tome nota de quais clientes de Email você quer testar a cada vez que enviar.

Tabelas: Não são apenas para dados

A única e mais importante diretriz para Emails em HTML é que um layout CSS simplesmente não funciona. A maioria dos clientes de Email simplesmente não oferece nenhum suporte, ou o castram em uma miríade de formas frustrantes.

Isto são tabelas!

Utilizar CSS ao invés de tabelas foi o grito de guerra na tão comentada “Guerra dos Navegadores”, mas compor Emails em HTML significa levantar a bandeira branca e desistir. A não ser que você esteja compondo um Email extremamente simples, ou sua audiência inteira esteja utilizando um cliente de Email moderno, temos que voltar para aqueles tags <table> envolvendo todos os elementos.

Gmail, Outlook 2007+, Lotus Notes, e sem sombra de dúvidas muitos outros clientes e serviços de Email tem grandes problemas com elementos flutuantes, e são ainda mais instáveis com margens e espaçamentos. Você vai querer criar algumas tabelas HTML estruturais para ter certeza de que você tem um Email que pelo menos se segura inteiro em boa forma.

Também existem alguns problemas em usar tabelas, como descoberto da forma difícil por muitos designers. Eis aqui algumas dicas para lidar com elas:

Atribua larguras à cada célula ao invés de na tabela

A combinação de larguras na tabela, larguras nas células, margens e espaçamento HTML, e margens e espaçamentos CSS podem ser caóticas. Simplifique seu código, e sua vida, colocando apenas em cada célula:

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="150"></td>
    <td width="350"></td>
  </tr>
</table>

Clientes de Email são muito instáveis quando se trata de deduzir a largura correta de uma célula, então é mais seguro explicitamente atribuir uma. Larguras em Pixeis são as mais confiáveis, já que usando percentuais você pode ter alguns resultados inesperados, especialmente quando usando tabelas agrupadas.

Para atribuir espaçamento à sua célula, atribua ou uma vez na tabela inteira, com o parâmetro cellpadding, ou utilize CSS para atribuir espaçamento em células individuais. Combinar o uso dos dois provavelmente irá causar problemas, sendo melhor evitar.

Agrupe tabelas para espaçamento consistente

Mesmo quando margens e espaçamentos são suportados pela maioria dos clientes de Email, os resultados podem ser inconsistentes. Se o espaçamento é crítico para você, tente agrupar tabelas dentro de sua tabela principal, de forma totalmente Old School!

Atribua uma cor de fundo em uma tabela “Container”

Alguns clientes de Email irão ignorar o atributo background no tag <body>, ou um que esteja atribuído na sua folha de estilos. Ter uma tabela envolvendo todo o seu conteúdo e utilizando uma cor com o atributo bgcolor irá contornar este problema.

Espaços em branco são importantes

Teoricamente, espaços em arquivos HTML devem ser ignorados, mas na prática, podem causar todo tipo de erro de renderização – especialmente se você possui espaços entre células de tabela. Faça de um hábito remover qualquer espaço entre o fechamento de tag de uma célula e abertura de tag da próxima para evitar problemas de layout e espaços indesejáveis.

Utilize CSS Inline

É aqui que o C (de Cascading) do CSS se torna útil. Aplicando um estilo de forma inline dá a ele prioridade quanto aos estilos carregados anteriormente (como os estilos de clientes e serviços de Email), e também dribla os clientes de Email que removem o CSS carregado externamente ou dentro do tag <head>.

Eis aqui uma atualização rápida caso você esteja a tempo sem utilizar CSS inline (ou se você começou a lidar com HTML depois de 2000).

Um estilo aplicado à elementos p em uma folha de estilos separada ou dentro do tag <head> de seu HTML pode parecer-se com isto:

p {
  line-height: 1.5em;
  margin: 0px 0px 10px 0px;
}

Estes estilos irão ser aplicados a todos os parágrafos de sua página, mas se o estilo é removido (como o Gmail faz), os parágrafos serão estilizados de acordo com qualquer padrão que o cliente de Email utiliza, ou a própria folha de estilo do cliente de Webmail.

Aplicar o estilo de forma inline significa estilizar cada elemento p individualmente em todo o seu conteúdo:

<p style='line-height:1.5em;margin:0px 0px 10px 0px;'>Ma oe!</p>

Você irá alcançar resultados mais consistentes se aplicar estilos desta forma para todos os elementos relevantes em seus Emails em HTML.

Quando você começar a fazer isto, você rapidamente irá notar que é um trabalho cansativo repetir vários estilos em muitos elementos (muito como os tags <font> costumavam ser). Sorte nossa, existem algumas maneiras de salvar tempo:

Não torne seus estilos inline até você terminar o código – desenvolva-o inteiramente utilizando o tag <style> em seu <head>, e uma vez que você terminar todas as alterações, você parte para a tarefa de torna-los inline.

Utilize um serviço de Email ou ferramenta que automaticamente irá tornar seu CSS inline. O inliner do Campaign Monitor, por exemplo, irá opcionalmente tirar os estilos do <head> de seu código, ou de um arquivo externo e aplicar automaticamente cada estilo para seus elementos apropriados de forma inline.

Existem várias ferramentas que irão pegar um Email em HTML junto com sua folha de estilos e então processar sua página com todo o CSS já inline. Uma alternativa ao inliner é o Premailer, que também dá dicas sobre CSS não suportado.

Existem alguns estilos que não se desempenham muito bem de forma inline – você não pode especificar estados :hover (para quando passar o mouse) para links, para citar um exemplo. Geralmente é útil manter os estilos no cabeçalho junto com os inline – o tamanho extra de download é facilmente superado pelo benefício de cobrir todas as suas bases.

Evite depender de imagens

Você se lembra do termo de web design “fatiar”? Quando sites costumavam ser construídos desenhando uma imagem do tamanho de uma página e cortando em pequenas seções, que então eram montadas em tabelas e fixadas em uma página?

Isto costumava ser uma técnica muito comum para driblar inconsistências de navegadores. Infelizmente, a mesma técnica vive no conjunto de ferramentas de vários designers de Emails em HTML, e até grandes empresas enviam Emails em HTML que são nada mais que uma coleção de imagens.

Enquanto isso certamente reduz o tempo gasto desenvolvendo o Email, os benefícios acabam por aqui. Diferente de navegadores, clientes de Email normalmente bloqueiam o carregamento de imagens até o leitor clicar em um botão específico.

Pesquisas nos últimos anos mostraram que um percentual significativo (alguma estimativa perto de 40%) dos recipientes de Email nunca habilitam o carregamento das imagens. Adicione a isto todas as pessoas que falham em notar que podem carregar as imagens, e você tem uma grande parcela de recipientes que não irão ver seu logo, sua foto de produto ou caixa de correspondência animada.

As restrições de bloqueio de imagens para vários clientes de Email são exibidas abaixo.

Clientes Desktop

Clientes Desktop costumam oferecer melhor conforto e desempenho para seus usuários, mas estão progressivamente caindo em desuso.

Cliente Bloqueio por padrão Texto ALT Texto ALT estilizado
Apple Mail ✅ * ✅ *
Lotus Notes 8.5
Outlook 2000-2003
Outlook 2007/2010/2013/2016
Outlook 2011/2016 (macOS)
Thunderbird ✅ * ✅ *

* Imagens são habilitadas por padrão, mas foram manualmente desabilitadas para testes.

Clientes Webmail

Serviços de Webmail são variados quando se trata de bloqueio de imagens, assim como suporte para texto ALT estilizado.

Cliente Bloqueio por padrão Texto ALT Texto ALT estilizado
AOL Mail (Chrome)
AOL Mail (Firefox)
AOL Mail (IE)
Gmail (Chrome) ✅ * ✅ *
Gmail (Firefox) ✅ * ✅ *
Gmail (IE) ✅ *
Outlook.com (Chrome) Quando quer
Outlook.com (Firefox) Quando quer
Outlook.com (IE) Quando quer
Yahoo! Mail (Chrome)
Yahoo! Mail (Firefox)
Yahoo! Mail (IE)
GMX (Chrome) ❌ ** ❌ **
Web.de (Chrome) ❌ ** ❌ **
Freenet.de (Chrome) ✅ * ✅ *
Mail.ru (Chrome) ✅ * ✅ *

* Imagens são habilitadas por padrão, mas foram manualmente desabilitadas para testes.

** Imagens são habilitadas por padrão e não podem ser desabilitadas. Porém, tanto no GMX quanto Web.de, todas as mensagens na pasta SPAM possuem suas imagens desabilitadas. E quando é o caso, imagens são agrupadas e texto ALT não é suportado.

Dispositivos móveis

Clientes de Email de dispositivos móveis possuem bom suporte a texto ALT, o que é uma ótima notícia para designers!

Cliente Bloqueio por padrão Texto ALT Texto ALT estilizado
Android 4.x (Cliente nativo)
AOL Alto Mail
AOL Mail (Android browser)
AOL Mail (Safari)
BlackBerry OS7
BlackBerry Z10
Gmail (Android browser) ✅ * ✅ *
Gmail (Safari) ✅ * ✅ *
Gmail (Android) ✅ * ✅ *
Gmail (iOS) ✅ * ✅ *
iOS 10.x (Cliente nativo) ✅ * ✅ *
Mailbox (iOS) ❌ ** ❌ **
Outlook.com (Android browser) Quando quer
Outlook.com (Safari) Quando quer
Windows Mobile 7.5
Windows Phone 8
Yahoo! Mail (Android)
Yahoo! Mail (iOS)
Yahoo! Mail (Android browser) +/- +/-
Yahoo! Mail (Safari) ❌ ** ❌ **

* Imagens são habilitadas por padrão, mas foram manualmente desabilitadas para testes.

** Imagens são habilitadas por padrão e não podem ser desabilitadas.

A menos que você tenha certeza de que sua audiência está lendo seus Emails apenas no Apple Mail, por exemplo, você precisa assumir que um número decente de pessoas não irá ver suas imagens (uma vez que um grande número de clientes populares, incluindo Gmail, Outlook.com, Outlook 2003 e Outlook 2007 irão bloquear imagens por padrão). Portanto, aquele seu lindo newsletter de vendas, que é para ficar de uma forma, pode ficar completamente “despingolado”.

Você pode imaginar o impacto que isto vai ter no sucesso de sua campanha! Então, qual seria a alternativa? Existem algumas formas de driblar o bloqueio de imagens.

Torne-se um remetente conhecido

A maioria dos clientes de Email permitem que seus recipientes exibam automaticamente as imagens quando a mensagem é de um remetente conhecido (Remetentes em listas de confiança, listas de contato ou catálogos de endereço).

Você vai querer encorajar seus assinantes para adicionar o seu Email à suas listas de confiança. Você pode ter uma nota logo no seu formulário de assinatura pedindo-os para fazerem isto, para que o primeiro Email que receberem exiba suas imagens. E se você optar por enviar um, você pode ainda incluir uma nota mais detalhada no Email de confirmação quando a pessoa se junta à sua lista.

Nas suas campanhas de Emails em HTML você pode fazer o mesmo. Para ser mais prestativo, faça uma página em seu site com instruções de como adicionar um Email à lista de confiáveis para diferentes clientes e provedores de Email, e utilize links para tal conteúdo.

Vivendo sem imagens

Sempre existirão pessoas que por escolha ou oportunidade nunca habilitam imagens para suas campanhas, portanto, o design precisa levar isto em consideração. Siga algumas simples diretrizes para melhorar seus resultados:

Não utilize uma imagem como primeiro item de seu Email

Lembre-se que vários clientes de Email possuem uma pequena janela de pré-visualização, e se o primeiro elemento que cabe ali é uma imagem bloqueada, o Email pode muito bem estar em branco. Inicie com algum conteúdo HTML em texto relevante que permita que seus leitores saibam o que estão recebendo. Isto pode até os dar uma razão para se incomodarem em baixar as imagens.

Utilize atributos ALT

Assim como você faz em um site, tenha certeza de ter atributos ALT relevantes para cada imagem. Em alguns casos, eles irão ser exibidos quando a imagem estiver bloqueada, e podem servir como plano B.

Utilize legendas para imagens importantes

Se você tem uma imagem que leva conteúdo realmente importante (ao invés de ser um elemento decorativo), utilize uma legenda de texto para descreve-la. Desta forma, mesmo que a imagem não seja exibida, os leitores irão ter acesso ao conteúdo integral do Email. Isto é mais confiável que atributos ALT, como notamos, renderização de atributos ALT é bem variável entre clientes de Email.

Sempre tenha texto e imagens

Se você tem um bom balanço entre texto HTML e algumas imagens, então o Email é útil mesmo sem imagens. Se o Email consiste inteiramente de imagens que são bloqueadas, o Email é um completo desperdício da constante mais valiosa deste universo: tempo.

Considere se você realmente precisa de imagens

Em alguns casos, imagens são essenciais. Para um grande exemplo, veja o Newsletter do FontShop, que exibe exemplos de novas fontes. Sem as imagens, é bem menos útil, então tais imagens realmente merecem sua inclusão. A audiência do FontShop também é mais propensa a exibir imagens em todas as ocasiões.

Para outros casos, no entanto, imagens são desnecessárias. Considere um Email transacional, como uma confirmação de pedido. Ele precisa ser claro e poder ser digitalizado, mas imagens não irão conter conteúdo vital. Por tanto, você pode optar por gastar tempo na tipografia, formatação e ajuste-fino do conteúdo.

Utilize um logotipo reconhecível para aqueles que poderão vê-lo, mas evite depender de imagens para provar seu ponto. Tenha certeza de que parte de seu processo de envio de campanha é visualizar seu Email sem nenhuma imagem carregada, da forma que muitos de seus recipientes irão vê-lo.

Dissuada clientes que querem Emails puramente de imagens

Web designers muitas vezes comentam comigo que pessoalmente preferem fazer Emails de verdade ao invés de compor dependendo inteiramente de imagens, mas seus clientes querem que tudo tenha aparência perfeita. Aqui está o ponto – É sua função, como designer, mostrar para seus clientes porque esta é uma péssima ideia. Sente com eles e mostre como o Email irá aparentar sem as imagens. Pergunte a eles, “Você clicaria nesta página em branco? “.

Lembre-os que talvez 30% das pessoas irão ver exatamente aquilo, que pode equivaler a centenas ou até milhares de pessoas que podem apertar DELETE sem dó nem piedade e nunca mais se incomodar em carregar aquelas imagens. Este é um caso onde nós precisamos entregar aos clientes o que realmente precisam, ao invés de o que eles acham que precisam.

Mais uma razão para evitar Emails em HTML puramente de imagens

Sim, SPAM! Filtros de SPAM ocasionalmente utilizam proporção de imagens versus texto como denominador para medir se um Email é legítimo. Emails em HTML compostos inteiramente de imagens tem maior tendência de serem marcados como SPAM do que Emails com conteúdo misto.

Suporte à CSS em Clientes de Email

Existem alguns designers que irão dizer que você tem que usar tags <font> porque CSS nunca funciona em clientes de Email. Esta afirmação simplesmente não reflete a realidade, e existe um corpo significativo de testes confirmando isto.

Você pode seguramente abandonar os tags <font> naquela gaveta do fundo junto com seus Tamagotchis e fitas de Super Nintendo, mas existem vários casos onde você não pode utilizar técnicas modernas de CSS.

Não temos como evitar o processo de teste, mas ter em mente que CSS moderno não funciona em 90% dos casos é uma boa prática. Uma vez que você compor alguns modelos, você começará a memorizar as maneiras mais rápidas de alcançar um resultado sólido.

Clientes de Webmail podem ser especiais quando se trata de renderização de Emails em HTML. Por exemplo, o Gmail possui pelo menos duas versões diferentes, e em nossos testes notamos variações em como o mesmo Email aparenta dependendo de que versão você está utilizando. Ele também remove todo o CSS no <head> de seus Emails em HTML (seja dentro de um elemento <style> ou uma folha de estilo carregada externamente), e é a principal razão pela qual recomendo que estilos sejam aplicados de forma inline.

Tecnologia em Email

A internet moderna contém muito mais que HTML, CSS e imagens. JavaScript, Áudio, Flash, Vídeo, Animações e Formas, todas fazendo parte do conjunto de ferramentas de um designer. Quais delas funcionam em clientes de Email? Vamos dar uma olhada nas possibilidades.

Tecnologias que NÃO funcionam

  • Flash (Você realmente quer usar isto?)
  • Java (Você realmente quer sofrer com isto?)
  • JavaScript
  • Vídeo (Teoricamente possível, mas não recomendado)

Tecnologias que FUNCIONAM

Formulários!

Fazer com que Emails em HTML contenham formulários interativos é uma ótima ideia! – Torna fácil para seus leitores preencherem alguns detalhes, ou responder à uma pesquisa. Infelizmente, o suporte à formulários nos Clientes de Email é bem inconsistente. Alguns vão mostrar alertas de segurança que colocam medo quando o usuário tenta utilizar o formulário, enquanto outros simplesmente vão desabilitar o formulário, tornando-o impossível de ser respondido.

Várias pessoas podem conseguir utilizar um formulário, mas o resto irá ver um formulário que não faz nada, que é uma experiência razoavelmente ruim. Novamente, a forma mais apropriada de fazer isto é incluir um link para um formulário em seu site, onde você sabe que ele irá funcionar.

Testando seus Emails

Agora é aquele momento “chute nos eggs”. Se você aprender algo com esta publicação, que seja esta: sempre, sempre, sempre, sempre, sempre teste seu Emails em HTML antes de envia-los.

Não existe sensação pior no mundo que clicar naquele botão de “Enviar” e depois achar um erro de digitação no primeiro cabeçalho. Ok, existem algumas sensações piores. Aliás, esqueça-as, você entendeu o que eu quis dizer.

Certa vez, a Apple Brasil mandou um Email para uma lista de mais de dois milhões de assinantes com uma imagem mostrando “6GB de Espaço Grátis” em uma captura de tela do iTunes, além de outra possível brincadeira de algum estagiário onde mandaram um Email dizendo “Só mudou uma coisa, o preço”, ao invés do slogan correto do iPhone, “Só mudou uma coisa, tudo.”.

Uma vez que um Email saiu, é impossível pegar de volta! Um site pode ser atualizado em um instante, mas Emails vivem suas vidas separadamente em milhões de caixas de entrada diferentes, além do alcance.

Existem vários métodos e elementos a testar. Obviamente, você tem que ter seu texto todo revisado, verificado e conferido novamente por outra pessoa antes de prosseguir.

Quando se trata de design e composição, testes podem consumir muito tempo. Existem muitos clientes de Email e Webmail para verificar, versões destes clientes, e diferenças de plataforma que podem sobrecarregar.

Felizmente, existem alguns serviços que tiram muito desta dor de checar seu Email em múltiplos alvos:

Campaign Monitor oferece uma ótima suite de testes!
Cada serviço irá pegar seus Emails em HTML e retornar uma série de capturas de tela mostrando como seu Email irá renderizar em diferentes clientes. Você pode tipicamente rolar pelo Email completo, vê-lo com imagens bloqueadas ou imagens carregadas, e ter uma boa noção se existem problemas à solucionar.

Tendo mais tempo e acesso a todos os vários clientes de Email já configurados, é melhor fisicamente interagir com cada um, mas na prática, estes serviços de testes são grandes economizadores de tempo.

No caso bem provável de algo não funcionar corretamente (conteúdo sendo cortado ou exibido no lugar errado, ou qualquer outro comportamento estranho), o processo de solução de problemas começa. Se você tiver sorte, o cliente problemático será algum como Gmail ou Outlook, que é de fácil acesso.

Então você pode ajustar e testar algumas vezes para fazê-lo funcionar novamente, e depois rodar outro teste completo de design para ter certeza de não ter quebrado nada durante as correções.

Algumas vezes será um cliente de Email bem mais complicado, como uma versão particular do Lotus Notes. Estes problemas podem ser difíceis de se solucionar, e você pode precisar de ajuda de um leitor ou colega que possa executar alguns testes para você.

Este processo pode ser longo, mas uma vez que você possui um modelo para Emails em HTML robusto, ele será reaproveitado inúmeras vezes para campanhas futuras, e pode muitas vezes ser adaptado para se adequar à vários designs. Portanto, trata-se de um tempo bem investido.

Conclusão

A vida de quem quer compor Emails em HTML nos dias de hoje não anda muito simples, mas acredito que com todas estas dicas e referências, eu esteja ajudando aqueles que querem compor boas campanhas de Email, ou simplesmente ter modelos de Emails em HTML para uso corporativo, como modelo para seu Outlook, Apple Mail ou Thunderbird.

Tal artigo se baseou em poucas referências externas, sendo a maioria do conteúdo resultado de testes e mais testes que fizemos durante o desenvolvimento de nossos próprios modelos, porém referências dos seguintes sites externos foram utilizadas:

  • Campaign Monitor (Informações estatísticas)
  • Mailchimp (Lista de Inliners)
  • Litmus (Parte das tabelas)

Como durante os testes descobrimos vários problemas não listados nestas fontes externas de referências no assunto, me inspirei em escrever este artigo sem economizar detalhes, para ajudar a vida de todos aqueles que sofrem como eu sofri, compondo tais modelos de Emails em HTML com um conjunto tão restrito de possibilidades.

Espero que tal publicação seja de real utilidade, e que ajude você leitor a criar melhores campanhas ou simples modelos de Emails em HTML para uso corporativo, sem passar por todos os apertos que passamos ao descobrir coisas como o “Quando quer” do Outlook.com entre outras peculiaridades.

Claro que não entregamos alguns “segredos de estado” utilizados exclusivamente em nossos Emails em HTML, como por exemplo, a nossa resolução para exibir imagens sem problemas em todas as situações, mas é compreensível, visto que tivemos que desenvolver ferramentas específicas para tal caso, que tiram proveito de tudo aqui citado para entregar as imagens.

Agradeço a quem ler este artigo, e se tiver alguma dúvida ou comentário, não tenha medo de deixar seu comentário abaixo, estou ansioso para saber o que vocês pensam. 😉

Grupo Bonobo

Assine nosso Newsletter!

 

Fique sabendo em primeira mão de nossas novidades, novos produtos, publicações e muito mais! Não se preocupe, não compartilhamos listas ou mandamos spam.

Você assinou com sucesso!