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

  • Pingback: Convertendo seus prospects em contatos opt-in espontâneo |

  • Louise
    14 de fevereiro de 2014

    Muito obrigada, ajudou muito!!!
    Parabéns pelo post!

    • 14 de fevereiro de 2014

      Nós que agradecemos sua participação!

  • 24 de outubro de 2014

    Parbéns pelo post, resolveu meu problema de um dia inteiro…

    • Akna
      20 de abril de 2015

      Agradecemos Hélder!

  • 10 de julho de 2015

    O meu código tem display:block e ainda assim quebra os espaços das imagens no Hotmail e Gmail.

    • Akna
      13 de julho de 2015

      Olá Breno
      Confira um exemplo abaixo de aplicação deste display:

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

      PS. Verifique se foi aplicado o border=0.

  • 15 de dezembro de 2015

    Já fiz vários emails marketings na vida, fazia tempo que não fazia, e sempre tenho essa dúvida ao realizar, obrigado!

  • 14 de janeiro de 2016

    Olá. Como faço (se é que é possível) para que todos os destinatários consigam visualizar meu email marketing enviado.

    Disparei uma peça para apenas 80 destinatários e alguns tiveram que clicar e fazer download pra visualizar, outros tiveram que liberar a imagem no navegador e outros não conseguiram visualizar de modo algum.

    Para o envio eu utilizei a ferramenta de “Inserir imagem” do meu webmail, colando a url da imagem hospedada num campo de composição da mensagem.

    Obrigado.

    • 18 de janeiro de 2016

      Bom dia,

      Agradecemos o seu interesse!
      Por gentileza, nos informe um número de telefone e um e-mail para contato, pois assim retornaremos para auxilia-lo da melhor forma.

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