Dica: Display Block nas imagens do seu e-mail marketing.

21
maio
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 0 Flares ×

Se você for o designer que cria as peças de e-mail marketing, leia esse post! Se não for, envie para o responsável pela criação pois é muito importante para a visualização correta das mensagens.

Quando um HTML de e-mail marketing é composto por imagens “fatiadas”
que dependem da justaposição para formar a mensagem na tela, é imprescindível que não haja espaços em branco entre as “fatias”.

Alguns provedores, como Hotmail e Gmail, acrescentam um espaço de quase 5 pixels ao redor da imagem, o que prejudica a visualização da mensagem; para corrigir este problema, uma das técnicas é especificar como queremos que seja tratada a imagem pelo navegador, fazemos isso através da diretiva CSS display:block; inserida em todas as tags de imagem, da seguinte forma:

[sourcecode]
<img src=”imagem.gif” width=”300″ height=”200″ alt=”Descrição da imagem aqui” border=”0″ style=”display: block;”>
[/sourcecode]

Veja os exemplos e preste atenção como a logo da Akna aparece separada na 1º imagem e da forma correta na 2º:

Imagens sem a Tag display: block

Imagens sem a Tag display: block

Imagens com a Tag display: block

Imagens com a Tag display: block

Repare que a propriedade style=”display:block;” faz com que o elemento seja tratado como um bloco, que por padrão ocupa todo o espaço horizontal disponível.

Quando a intenção é unir elementos na horizontal, como um ícone e um texto a seu lado, você pode usar uma tabela para distribuir espaços diferentes na horizontal, controlando o posicionamento e distância de seu conteúdo. Um elemento tratado como “block”, quando está dentro de uma célula da tabela, ocupa só o espaço horizontal dentro da própria célula, e não interfere nas demais que podem estar posicionadas inclusive a seu lado.

Faça um teste de renderização na ferramenta da Akna e veja como vai ficar sua mensagem no webmail dos provedores de e-mail mais populares e veja se sua mensagem precisa de algum ajuste.

Curta a Akna no facebook

Comentários

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 0 Flares ×