Email-Marketing - Quebra

rafaelangelo_ · 19 de maio de 2015

Bom dia a todos.

Primeiramente quero salientar que fiquei em dúvida em qual grupo postar, se aqui ou no Webdesigner, portanto, peço desculpas aos administradores e moderadores caso tenha me precipitado.

Vamos lá, fatiei uma imagem no Photoshop com inserção de links e textos, até aí tudo bem.

Quando vou envia-la pelo outlook, a mesma se agrupa de forma correta, até porque o recebimento no mesmo também esta correto, sem quebras.

O Problema esta em alguns serviços de Webmail, hotmail e gmail, que quebram a imagem com linha branca horizontal onde justamente houve o corte.

Segue abaixo o código que é gerado pelo Pothoshop:

<html><head><title>Email-Marketing</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!-- Save for Web Slices (index.jpg) --><table id="Tabela_01" width="750" height="750" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="3"><img src="http://www.consultoriacgs.com.br/email_marketing/skill/images/index_01.jpg" width="750" height="63" alt="" style="display:block;" border="0"></td></tr><tr><td rowspan="2"><img src="http://www.consultoriacgs.com.br/email_marketing/skill/images/index_02.jpg" width="95" height="687" alt="" style="display:block;" border="0"></td><td width="561" height="562">Depois de alguns estudos em clientes de emails, conseguimos constatar as principais falhas de cada um, e com isso os erros mais freqüentes ao desenvolver HTML para email marketing. Veja algumas dicas que vão otimizar seu código e a visualização da mensagem em cada cliente de email - See more at: http://www.virtualtarget.com.br/emailmarketing/otimize-seu-codigo-html-para-email-marketing#sthash.qqsYMn8K.dpuf</td><td rowspan="2"><img src="http://www.consultoriacgs.com.br/email_marketing/skill/images/index_04.jpg" width="94" height="687" alt="" style="display:block;" border="0"></td></tr><tr><td><img src="http://www.consultoriacgs.com.br/email_marketing/skill/images/index_05.jpg" width="561" height="125" alt="" style="display:block;" border="0"></td></tr></table><!-- End Save for Web Slices --></body></html>

Alguém sabe me dizer o que acontece ?

Desde já o meu obrigado !

JonathanMMachado · 1 de junho de 2015

Vamos lá, já fiz alguns e-mails html e realmente é um saco. Em um funciona direito em outro não e vice versa. Mas... voltando, os problemas que normalmente resultam nisso, pelo menos comigo, são:

- Deixar todas as tags img assim:

<img style="display: block;" border="0"

(só dar um ctrl+f e substituir todos).

- Segundo, recentemente notei que da esses erros de "cortar a imagem" quando não faço um corte na imagem toda, quando fica colspan e/ou rowspan:

Tipo a imagem ali, então eu tento evitar ao máximo esses tipos de corte. (A solução ali seria corta o center ao meio na horizontal, para ficar igual as outras).

Espero ter ajudado...