Como recortar e-mail marketing

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↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) →. 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.