Desvendando o Mito das Imagens de Fundo em Emails
Existe uma mal-entendido disseminado entre a turma que trabalha com campanhas de e-mail marketing de que imagens de fundo não funcionam em e-mails e que, portanto, não podem ser usadas para ilustrar nossas belas criações.
De fato, se inspecionarmos o HTML e o CSS possíveis de serem utilizados hoje na maioria dos clientes de email, acreditaremos ter pego uma carona com Marty McFly e voltado ao longínquo ano de 2001 no qual websites eram construídos apenas com tabelas e imagens fatiadas.
Não gosto de apontar dedos mas uma certa empresa que se vangloria de impulsionar a web para o futuro ainda mantêm um serviço de email que não suporta media queries em nenhum de seus apps em pleno ano 2015. Sim, ‘tou falando de você mesmo, Gmail.
Contudo, temos a web ao nosso lado e ela nos mostra que para tudo há uma saída, mesmo que não seja das mais elegantes.
Lidando com as limitações
Antes de mais nada, devemos entender que existem algumas ressalvas para utilizar as imagens sem surpresas desagradáveis.
A primeira delas é que a imagem deve ser aplicada numa tabela ou numa célula específica, ou seja, numa <table> ou numa <td>, respectivamente.
Outro detalhe importante é que não é possível mudar o posicionamento da imagem de fundo da mesma forma quando utilizamos a propriedade background-position do CSS. A imagem será exibida sempre a partir do canto superior esquerdo — convivamos com isso.
Por último, a imagem de fundo repetirá na horizontal e na vertical. Por isso, é bom ficar de olho se a célula — ou a tabela — está com as dimensões exatamente iguais às da imagem, caso você não queira que a mesma apareça repetidas vezes.
Dê uma pausa agora, respire fundo e deixe que estes detalhes assentem bem na sua cabeça.
Certo, resolvido isto temos uma última questão a resolver, para quais clientes de email estamos desenvolvendo?
Se a sua resposta for “em todos menos Outlook ou Windows Mail”, então a sua vida acabou de ficar 500% mais simples, parça, porque a maioria dos clientes suportam os atributos padrões do HTML.
Na célula da tabela trabalhada, insira os atributos background e bgcolor com a URL da imagem desejada e uma cor inicial, respectivamente.
Note também no exemplo anterior a presença do atributo style no qual é repetido as mesmas definições, mas utilizando CSS inline. O motivo? Compatibilidade, pura e simples.
Não vou entrar em detalhes mas é suficiente saber que alguns clientes de email suportam a declaração feita via CSS enquanto outros não. Caso você queria aprender mais sobre quais propriedades CSS funcionam ou não em cada cliente de email, o Campaign Monitor publicou um guia definitivo de propriedades CSS para clientes de email que vale a pena conferir.
Agora você vê… agora não vê mais
Você deve estar se perguntando “e para as pessoas que utilizam Outlook, Windows Live Mail ou outro cliente de email desktop da Microsoft, como ofereço a mesma experiência visual?”
A resposta mágica: comentários condicionais e VML.
“ei, se você for o Outlook 2007, ou mais recente, leia esse código que eu coloquei aí, senão pode ignorar, flw vlw.”
Um comentário condicional, como o nome sugere, é um formato de comentário HTML criado pela Microsoft que permite que os desenvolvedores adicionem pedaços de código específicos para os aplicativos da companhia.
Já VML, ou Vector Markup Language, é um formato para criação de gráficos em duas dimensões baseado no padrão XML, também desenvolvimento pela Microsoft.
Ambas são tecnologias obsoletas e não estão mais disponíveis nas versões mais recentes do Internet Explorer, mas que são úteis nessa situação.
Primeiro temos na linha 4 o bloco [if gte mso 9] no qual o if é a palavra-chave “se”. Assim, se a expressão dentro dos colchetes for verdadeira, o código escrito até o bloco [endif] deverá ser executado pelo programa.
E agora, o que diabos significa gte mso 9? Calma, eu explico:
- gte: greater than or equal
- mso: Microsoft Outlook
- 9: número de versão do Outlook 2007
Basicamente estamos dizendo ao programa de email “ei, se você for o Outlook 2007, ou mais recente, leia esse código que eu coloquei aí, senão pode ignorar, flw vlw.”
Por fim, chegamos na parte do código que realmente faz a imagem de fundo aparecer. O importante aqui é alterar os atributos src, color e style com base na URL da imagem, cor de fundo e dimensões requeridas.
Mais uma vez o pessoal da Campaign Monitor quebra o nosso galho com um gerador de de imagens de fundo à prova de balas. Pode confiar, eu garanto.
Resultado final
Depois de mais de quarenta testes e correções, voilá, uma garrafa de espumante em destaque e a vista da Torre Eiffel ao fundo no Outlook 2013.
E você, utiliza alguma das técnicas abordadas aqui para criar emails mais atraentes ou mesmo para exterminar bugs safados no Outlook? Deixe um comentário e compartilhe sua experiência.
Para as curiosas e os curiosos de plantão que quiserem olhar mais de perto o resultado, sugiro mergulhar no código-fonte. Em breve escreverei com mais detalhes sobre os diferentes tipos de comentários condicionais, como criar emails com layout responsivo e as dificuldades encontradas no caminho.
Abraços e até a próxima!
