Blog de Email Marketing

Templates

Quando usar display:block nas imagens do email marketing?

Juliana Padron Por Juliana Padron em 13.02.2012

Para quem não sabe, o recurso style="display:block;" é utilizado nas imagens dos templates de email marketing para evitar que programas de email como o Gmail e o Hotmail acrescentem um espaço de quase 5 pixels ao redor delas. Isso prejudica a renderização de templates que dependem da justaposição exata das imagens para serem exibidos corretamente. Como neste exemplo:

Neste template, você pode identificar pelo menos três imagens que o compõem por causa dos espaços em branco entre elas. Isso acontece porque, na tag de cada imagem, está faltando colocar a propriedade do CSS display: block;, que é o tema desse post.

Quando o seu template segue a estrutura desse exemplo anterior, ou seja, quando ele depende que a justaposição das imagens seja exata para “montar” a mensagem na tela, é imprescindível que todas as tags dessas imagens contenham o display:block;, desta forma:

Essa propriedade faz com que o elemento seja tratado como um bloco, assim como parágrafos. Um elemento de bloco não permite que nenhum outro elemento apareça ao lado dele (exceto quando este for declarado com a propriedade float, mas que não funciona para email marketing), apenas abaixo ou acima.

Com essa explicação, já fica claro que o display:block; não deve ser usado quando você tem a intenção de posicionar outro elemento ao lado da imagem, como nos casos em que se usa uma imagem de ícone e um texto ao lado dela, por exemplo. Nesta situação, o display:block; não deve ser usado para que o texto não seja “quebrado” para a próxima linha.

Apenas esteja ciente que, sem o display:block;, aquele espaçamento extra ao redor da imagem será aplicado pelo Gmail e pelo Hotmail. Se isso não prejudicar o layout de seu template (faça envios de testes para saber), ótimo! Do contrário, você precisará usar uma tabela para controlar o posicionamento e as distâncias entre o ícone e o texto.

É importante destacar que, para construir templates compostos apenas por imagens, que precisam estar exatamente justapostas umas às outras, o uso de tabelas é obrigatório para que a renderização seja perfeita. Insira cada imagem dentro de uma célula da tabela e, na tag de cada imagem, declare o display:block;.

Neste exemplo, os espaços em branco representam as células vazias de uma tabela onde os próximos pedaços da imagem que compõem o template seriam inseridos, cada uma com o seu respectivo display:block;

Assine Nossa Newsletter



Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações