Tarefa chata !

Desenvolver Email Marketing envolve recorrer a uma estruturação em <table>, que a tempos deixamos para trás.

Pois é, não adianta seguir padrões web, fazer Tableless, ou querer usar bastante css. Simplemente não vai funcionar.

Se no desenvolvimento de sites, nossos vilões são os browsers do mercado, e as diferenças de renderização, bugs e versões dos mesmos, num Email Marketing, a dor de cabeça dos Desenvolvedores FrontEnd, são os clients de email.

Outlook 2007, Outlook 2003 (mais uma vez a Micro$oft complicando a nossa vida, com versões diferentes de um mesmo software, e a incompabilidade/incosistência deles), gmail(um dos mais chatos para desenvolver emm), hotmail… e por ai vai.

Felizmente, algumas técnicas são conhecidas, mais ou menos como um ‘caminho das pedras’. Seguindo dicas simples, é possível gastarmos menos tempo nisso, e entregar um código HTML bastante satisfatório no quesito cross-client.

Sobre a compatibilidade, veja: Guide to CSS support in email.

Vamos lá, algumas regras:

Durante o design da peça:

Não use background-image

Como vc pode ver na tabela do link acima, background-image, não funciona nos clients de emails mais usados atualmente: hotmail, outlook, gmail.. portanto, não use. Peça para o designer fazer o layout, pensando que onde tiver texto, o fundo precisa ser cor sólida.

background-color funciona bem, e vamos usar a moda antiga:

<td bgcolor="#000">

No início do recorte:

Use a ferramenta slice do Photoshop. Pense em recortes horizontais.

O atributo rowspan é problemático

Por isso que eu disse para pensar em linhas. Não faça rowspans. Nem perca tempo. Irá quebrar.

Use e abuse dos colspans, mas o row nunca!

Nem pense em margin e padding

style="margin: yypx; padding: yypx;"

Vai funcionar nos teus navegadores enqnto vc estiver testando, porém nos clients de email não.

A regra agora, é fazer todo o espaçamento e divisão entre blocos, com fatias de imagem.

Para isso, o ‘Save for web’ do Photoshop, marcando a opção: ‘HTML and images’, é o que temos para agilizar o processo.

Lembre-se de fazer os teus slices o mais folgados possível. Deixando espaço para a direita e para baixo, prevendo uma futura diferença de fontes entre sistemas operacionais.

Começando a mexer no html:

Declare width e height em todas as TDs

Depois de exportar com o photoshop, preciso sair colocando altura, lagura e alinhamento vertical em todas as células da tabela.

Declare align=”top”

Em todas as imagens. Isso vai evitar um espaçamento entre uma linha e outra em clients como o gmail.

Em alguns textos, é interessante usarmos align=”bottom” e middle em nossas TDs. Tudo bem, podemos usar. Mas mantenha as TDs de imagens com o valor top.

Declare display: block em imagens de uma linha

Aquelas imagens que pegam a largura toda da tabela. Aquela nossa TR que só tem uma TD dentro dela, com uma única imagem.

CSS inline novamente. Declare display: block; nessas imagens.

Colocando texto, onde deve ser texto:

Abuse da tag font

Eu nem lembrava mais dessa tag.. mas para recorte de EMM, é melhor garantir que vai funcionar na maioria dos clients, e o mais perfeito possível.

<font></font>

Não vamos cair na tentação de usar um <p>, .. ou tags do tipo. Dificil prevermos quais serão as definições padrão do box model dessas tags. A tag funciona bem. Façamos todos os nossos textos com ela.

CSS inline

Isso! Não temos ‘reaproveitamento’ de código fazendo email marketing. Note que a tag link e style, não funcionam no hotmail e gmail respectivamente. Portanto,

style=""

neles !

A família de propriedades css font funciona bem

Em testes que fiz, tentando usar o size da tag , nunca ficava bom. Vale lembrar que o sistema operacional entra como variavel nesse desenvolvimento também. Uma font 12px Tahoma, no MAC fica de uma forma e no Windows, de uma outra completamente diferente(espaçamento de letras, anti-alising..).

Então, aqui usamos css inline.

Afinal de pouco adiantaria nossos emails marketings, se estes não tiverem links.

Para links em textos, devemos usar livremente a tag de âncora , porém naqueles botõezinhos e banners que o designer fez, não vale a mesma regra. Melhor aqui é usar imagem mapeada!

Isso mesmo. Use #map. Se você tentar usar algo como:

<a href=""><img src="..." /></a>

Você terá problemas com isso.

Será que isso é tudo?

Talvez não, mas posso garatir que ao menos é o suficiente para os clients de email mais conhecidos e utilizados.

Se ainda assim, você estiver com dúvidas, e precisar de mais dicas, este texto: http://www.campaignmonitor.com/design-guidelines/(inglês), é a minha última dica.

É trabalhoso

Realmente é. E o ínicio do recorte, em que temos que colocar largura, altura, valign em todas as TDs, align=”top”, em todas as imagens, display: block; em todas as imagens que estão sozinhas em uma só linha, e colocar o caminho completo em todos os atributos src=”” das nossas imagens, é um tanto quanto repetitivo, e braçal.

Por isso, desenvolvi essa ferramenta para recorte de Email Marketing. Lógico que não faz milagre, mas com umas Expressões Regulares e php, faço essa parte braçal, de entrar com o HTML:

<tr>
      <td><img src="images/img1.jpg" width="40" height="20" alt=""></td>
      <td><img src="images/img2.jpg" width="56" height="13" alt=""></td>
</tr>

E sair:

<tr>
      <td width="40" height="20" valign="top"><img src="http://wbruno.com.br/images/img1.jpg" width="40" height="20" alt="" align="top"></td>
      <td width="56" height="13" valign="top"><img src="http://wbruno.com.br/images/img2.jpg" width="56" height="13" alt="" align="top"></td>
  </tr>

Ou seja, a parte chata resolvida.

Dai resta apenas trocar os slices onde deve ter texto, por texto mesmo formatado segundo as dicas acima.

É isso. Espero que ajude vocês.