Entregando o episódio 4: Compreendendo as imagens de fundo no e-mail

Neste episódio de Delivering, daremos uma olhada em uma técnica essencial para designers de e-mail: a humilde - mas poderosa - imagem de fundo. Aprenda por que as imagens de plano de fundo são importantes, como codificá-las usando uma variedade de técnicas e como esses vários métodos se comparam em diferentes clientes de e-mail. Este episódio é um complemento do nosso Guia definitivo para imagens de fundo em e-mail, recentemente atualizado. Confira dicas, truques e códigos.

Certifique-se de se inscrever em Delivering on iTunes ou Spotify para ouvir episódios futuros e participar da conversa no Twitter usando a hashtag #DeliveringPodcast.

Transcrição do episódio

Existem várias maneiras de adicionar recursos visuais interessantes às campanhas de e-mail.

Embora o CSS permita muitas opções de estilo diferentes, às vezes você só precisa de uma boa imagem. Mas qual é a melhor forma de usar imagens em e-mail? Neste episódio de Delivering, daremos uma olhada em uma técnica essencial para designers de e-mail: a humilde - mas poderosa - imagem de fundo.

Eu sou Jason Rodriguez e bem-vindo ao Delivering, um podcast sobre email marketing e seu lugar no mundo. A entrega é oferecida a você pela Litmus, a plataforma líder do setor para profissionais de marketing por e-mail. Junte-se a mais de 600.000 profissionais de email que usam Litmus para criar, revisar, testar e rastrear melhores campanhas de marketing por email. Saiba mais e obtenha um teste gratuito de 7 dias em Litmus.com.

As imagens são um elemento básico das campanhas de marketing por e-mail. Eles são usados ​​para fotos de produtos, ilustrações atraentes, logotipos, ícones e, em alguns casos, para o próprio e-mail inteiro. Especialmente no mundo do varejo, os profissionais de marketing tendem a criar campanhas inteiramente em ferramentas como o Photoshop, dividir essas imagens e despejá-las em HTML antes de enviá-las aos assinantes. Todas as informações - manchetes, textos, frases de chamariz, o que quer que seja - existem nas imagens.

É uma boa maneira de seguir as diretrizes da marca e produzir e-mails rapidamente, mas usar imagens dessa forma tem algumas desvantagens importantes.

A primeira é que muitos clientes de e-mail desabilitam imagens por padrão. As imagens - e todo o conteúdo - em um email são literalmente deixados descarregados pelo cliente de email, resultando em campanhas em branco que parecem quebradas para muitos assinantes.

A segunda é que os assinantes que usam tecnologia assistiva, como um software de leitor de tela, não conseguirão acessar o conteúdo do e-mail.

Em ambos os casos, todas as cópias, negócios e valor que você gastou tempo investindo em sua campanha de e-mail foram essencialmente desperdiçados. Tem que haver uma solução melhor, certo?

Insira imagens de fundo.

As imagens de fundo são simplesmente imagens, como qualquer outra em um e-mail. Eles são arquivos carregados em um servidor e vinculados a um código. A diferença é que as imagens de fundo não são aplicadas com uma tag de imagem HTML, mas como um atributo ou CSS em outros elementos HTML.

Existem quatro maneiras de codificar imagens de plano de fundo, cada uma com seus prós e contras.

O primeiro método, e mais tradicional, é aplicar o atributo background a uma célula da tabela. O valor do atributo é apenas o URL que aponta para a imagem. Esse método é legal porque é bastante compatível com clientes de email. A principal desvantagem, no entanto, é que ele não é muito flexível. Você não pode controlar o tamanho de sua imagem de fundo e a imagem irá, por padrão, se repetir em seu elemento.

Você também pode carregar imagens de fundo usando CSS. As duas técnicas a seguir usam o mesmo método, mas são aplicadas de maneira diferente.

CSS tem uma série de propriedades de fundo, mais notavelmente: imagem de fundo, repetição de fundo, posição de fundo, tamanho de fundo e cor de fundo. Há também a propriedade de taquigrafia de fundo super útil.

Usando essas propriedades, você pode incluir o URL de uma imagem, controlar como essa imagem é posicionada e se ela se repete ou não, bem como incluir uma cor de reserva para quando as imagens não forem carregadas.

A primeira maneira de usar fundos CSS é incorporar essas propriedades em um bloco de estilo no cabeçalho do seu e-mail. Basta apontar um elemento HTML, como uma célula de tabela ou div, e pronto. Este método é fácil de codificar, ler e manter, mas estilos incorporados não são suportados em todos os clientes de e-mail.

Um método mais robusto é incluir essas propriedades embutidas em seu elemento HTML. Isso pode ficar confuso se você estiver usando imagens de plano de fundo em vários elementos, mas, como somos geeks de e-mail e acostumados a usar imagens embutidas, ainda é perfeitamente gerenciável.

A última maneira de incluir imagens de plano de fundo em um e-mail é usando os chamados “planos de fundo à prova de balas”. Planos de fundo à prova de balas são construídos sobre o método de atributo HTML, incluindo também VML - ou Linguagem de marcação de vetor - no código. VML é uma linguagem proprietária da Microsoft usada em produtos do Office como o Outlook. Aplicando imagens de fundo em VML, elas funcionarão no Microsoft Outlook, o que não é necessariamente verdadeiro para os outros métodos discutidos anteriormente.

A principal desvantagem de usar VML é que ele não é muito acessível ou bem documentado e adiciona uma grande quantidade de código que é, francamente, difícil de entender. Para tornar mais fácil, nossos amigos no Campaign Monitor criaram uma ferramenta incrível para gerar planos de fundo à prova de balas. Você pode encontrá-lo, convenientemente, em backgrounds.cm.

Independentemente do método escolhido, há benefícios surpreendentes em usar imagens de plano de fundo em e-mail em vez de imagens tradicionalmente codificadas.

O principal benefício é a acessibilidade. Ao usar imagens de fundo, você pode contar com texto HTML ao vivo em vez de imagens para todo o seu conteúdo. O texto não sofre bloqueio como as imagens, então, mesmo quando as imagens estão desligadas, sua mensagem ainda poderá ser lida para os assinantes. E, para usuários que precisam de leitores de tela, eles poderão ouvir o conteúdo lido para eles, ao contrário das imagens tradicionais.

Você pode usar CSS para estilizar esse conteúdo HTML de forma que pareça bem projetado como imagens que saem do Photoshop, e você pode até incluir botões de CTA lá também.

As imagens de fundo, então, são usadas para incluir um estilo visual adicional, seja um gradiente simples, algumas fotos sofisticadas de produtos ou um padrão repetido. Eles trabalham em conjunto com o texto HTML para criar e-mails bonitos e úteis.

O que é ainda mais legal é que você pode fazer coisas mais avançadas, como incluir GIFs animados como imagens de fundo, trocar imagens com base no tamanho da tela ou dispositivo, ou até mesmo codificar um fundo de vídeo como fizemos alguns anos atrás para nosso e-mail de anúncio do Litmus Live.

A utilização de imagens de plano de fundo em sua totalidade envolve muita coisa. Recentemente, publicamos uma atualização de nosso Guia definitivo para imagens de fundo em e-mail no blog Litmus que vale a pena conferir. É uma ótima maneira de ver o código que alimenta as imagens de plano de fundo e também obter inspiração para atualizar suas próprias campanhas. Basta acessar as notas do programa de hoje para obter o link.

E certifique-se de se inscrever em Delivering on iTunes ou Spotify para ouvir episódios futuros onde nos aprofundaremos em mais técnicas para construir melhores e-mails em HTML.