Sim, desenvolver e-mail marketing é uma tarefa chata! E além disso, envolve recorrer a uma estruturação em <table>, que há 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 os nossos vilões são os browsers e suas as diferenças de renderização, os bugs e versões dos mesmos, no e-mail marketing a dor de cabeça dos desenvolvedores frontend são os clients de e-mail. Os Outlook 2003 e 2007 (mais uma vez a Microsoft complicando a nossa vida, com versões diferentes de um mesmo software, e a incompabilidade/ incosistência entre eles), o Gmail (um dos mais chatos para desenvolver e-mail marketing), o Hotmail, entre outros.

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

Obs.: Para saber mais sobre a compatibilidade, acesse: Guide to CSS support in email.

Veja algumas dessas dicas que podem facilitar sua vida:

Durante o design da peça:

• Não use background-image

Como você pôde ver na tabela do link acima, o background-image não funciona nos clientes de e-mails mais usados atualmente: Hotmail, Outlook e Gmail, portanto, não use. Peça para o designer fazer o layout, pensando que onde tiver texto, o fundo precisa ter cor sólida.

O background-color funciona bem, e vamos usá-lo a moda antiga:

<td bgcolor="#000">  

No início do recorte:

• Use a ferramenta slice do Photoshop e pense em recortes horizontais.

• O atributo rowspan é problemático, por isso eu aconselho a pensar em linhas. Não faça rowspans. É uma perda tempo, já que ele irá quebrar. Use e abuse dos colspans e evite o row.

• Nem pense em margin e padding:

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

Vai funcionar nos teus navegadores enquanto você estiver testando, porém nos dos clientes de e-mail 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 com um espaço sobrando entre eles. Deixe 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 colocar altura, lagura e fazer o alinhamento vertical em todas as células da tabela.

• Declare align=”top”

Faça isso em todas as imagens. Dessa forma, vai evitar um espaçamento entre uma linha e outra em clientes, como o Gmail. Em alguns textos é interessante usar o align=”bottom” e middle em nossas TDs.  Mas é importante lembrar de manter as TDs de imagens com o valor interessante.

• Declare display: block em imagens de uma linha

Em imagens que ocupam a largura toda da tabela, é preciso declarar o display: block. Aquela TR que só tem uma TD dentro dela, com uma única imagem. O CSS inline novamente.

Colocando texto, onde deve ser texto:

• Abuse da tag font

Eu não me lembrava mais dessa tag, mas quando se trata de recorte de e-mail marketing, é melhor garantir que vai funcionar para a maioria dos clientes – e da forma mais perfeita possível.

<font></font>  

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

• CSS inline

Isso! Não temos reaproveitamento de código fazendo e-mail 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 realizei, tentando usar o size da tag <font>, nuncaobtive bons resultados. 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. Então, aqui usamos CSS inline.

• Links! Links!

Afinal, de nada adiantaria nossos e-mails marketing, se estes não tiverem links. Para links em textos, devemos usar livremente a tag de âncora <a>, porém, nos botões e banners não vale a mesma regra. O melhor aqui é usar uma 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 clientes de e-mail mais conhecidos e utilizados. Se ainda assim você estiver com dúvidas e precisar de mais dicas, leia este texto (está em inglês, mas é a minha melhor dica para vocês). 

É trabalhoso?

Realmente é. E no ínicio do recorte, quando 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 e-mail 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.

Resta apenas trocar os slices onde deve ter texto, pelo texto já formatado – segundo as dicas acima.

É isso! Espero que ajude vocês.