Entre em contato conosco

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

21
maio

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

  • Marcio Nugas
    27 de novembro de 2018

    Excelente Artigo. Parabéns!

  • 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.

  • 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!

  • 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.

  • 24 de outubro de 2014

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

  • Louise
    14 de fevereiro de 2014

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

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *