Takeaways rápidos

• O Outlook para Windows renderiza os e-mails usando o mecanismo do Word e ignora as imagens de fundo em CSS.
• Os gradientes em e-mails falham completamente em todas as versões do Outlook para Windows.
• Defina sempre uma cor de fundo sólida como alternativa para qualquer imagem de fundo.
• Use VML em comentários condicionais do Outlook para forçar a renderização de planos de fundo.
• Nunca coloque texto que suporte a carga em uma imagem que possa não carregar.
• Teste cada envio em clientes de e-mail reais antes de clicar em enviar.

Você passa horas aperfeiçoando uma seção principal com um gradiente que ocupa toda a largura da página e uma imagem da marca que vai de ponta a ponta. Tudo parece perfeito na sua ferramenta de design. Aí você envia um teste para o Outlook 2016 e ele chega como uma caixa branca em branco com texto flutuando dentro. Bem-vindo ao desenvolvimento de e-mails.

Imagens de fundo e gradientes estão entre as ferramentas de maior impacto visual que um designer possui, e também entre as menos confiáveis ​​depois que um e-mail sai do editor. Uma imagem de fundo em um e-mail é qualquer imagem aplicada atrás do conteúdo, em vez de ser inserida no corpo do e-mail como uma imagem padrão. O problema é que as caixas de entrada discordam, de forma veemente, sobre se esse fundo deve ou não aparecer.

Este é um guia prático de solução de problemas para equipes de operações de marketing B2B que trabalham com Oracle Eloqua e Adobe Marketo Engage. Ele aborda exatamente por que gradientes e imagens de fundo em e-mails são afetados, quais clientes falham e os padrões alternativos que mantêm sua mensagem intacta quando o design não funciona corretamente.

Por que os gradientes e as imagens de fundo se desconfiguram em e-mails?

Os problemas ocorrem porque os clientes de e-mail não compartilham um único mecanismo de renderização da mesma forma que os navegadores da web. Um navegador usa um mecanismo moderno como o Blink ou o WebKit; os clientes de e-mail usam seus próprios mecanismos, e alguns desses mecanismos têm mais de uma década. Essa fragmentação é o motivo pelo qual o mesmo e-mail pode ser renderizado em trinta ou mais combinações diferentes de clientes e dispositivos, e por que o suporte a CSS nos clientes de e-mail é tão desigual.

O Outlook no Windows renderiza e-mails com o Microsoft Word.

O principal culpado é o Outlook para Windows. Todas as versões para desktop, de 2007 a 2021, renderizam e-mails HTML usando o mecanismo de renderização do Microsoft Word, e não um mecanismo web. Portanto, quando alguém pergunta se o Outlook suporta imagens de fundo, a resposta honesta para o aplicativo de desktop do Windows é não: a propriedade é ignorada e o elemento volta a usar a cor sólida definida pelo usuário ou nenhuma cor.

Para uma visão mais ampla do tema abordado neste artigo, consulte o guia prático de design responsivo de e-mail para Eloqua e Marketo , que complementa esta análise detalhada.

A Microsoft documenta o mecanismo de renderização do Word e seu CSS não suportado , nomeando explicitamente background-image, background-position e background-repeat como propriedades que ele ignora.

Gmail, Yahoo e Samsung filtram o CSS de maneiras diferentes.

O Outlook é o pior infrator, mas não é o único. O Gmail isola estilos e pode remover todo o atributo de estilo quando não gosta de um valor dentro dele, o que geralmente é o motivo pelo qual uma imagem de fundo do Gmail não é exibida. O Yahoo Mail aplica sua própria filtragem de CSS e o Samsung Mail, apesar de ser baseado no Chromium, introduz suas próprias peculiaridades em relação ao dimensionamento e posicionamento. O Apple Mail, no WebKit, é a exceção confiável, renderizando fundos de forma muito semelhante a um navegador.

Será que os gradientes funcionam em e-mails? A divisão do suporte ao cliente

Os gradientes em e-mails contam uma história de dois lados. Em clientes de e-mail modernos, eles são exibidos perfeitamente; no Outlook para Windows, eles simplesmente não são exibidos.

A razão pela qual isso é tão importante para remetentes B2B é o alcance. O Outlook para Windows pode representar de 20 a 40% das aberturas em públicos corporativos, portanto, um gradiente de e-mail que simplesmente desaparece nesse ambiente não é apenas cosmético; trata-se de uma grande parcela da sua lista sendo afetada por um design com problemas.

Quais clientes de e-mail suportam imagens de fundo em e-mails?

O suporte é melhor do que para gradientes, mas ainda está longe de ser universal. De acordo com os dados de suporte do Can I Email, a propriedade CSS background-image tem suporte em torno de 90% no geral, um número que esconde os clientes que realmente importam para equipes B2B. Apple Mail, Gmail e Mail do iOS lidam bem com ela; o Outlook para Windows não a suporta de forma alguma; Yahoo e Samsung são parciais e imprevisíveis, especialmente em relação ao background-size.

Para obter uma visão geral da situação atual de cada cliente, o Can I Email publica uma tabela de suporte a imagens de fundo em CSS que vale a pena consultar antes de optar por qualquer técnica de fundo.

Uma peculiaridade prática: o atributo de fundo HTML em uma tabela ou célula de tabela tem um alcance maior do que a propriedade CSS, inclusive em algumas versões antigas do Outlook. É por isso que o padrão confiável combina três elementos: o atributo de fundo HTML, o estilo de imagem de fundo embutido e uma cor de fallback sólida, garantindo que pelo menos um deles seja aplicado em todos os clientes.

Como enviar gradientes e imagens de fundo com segurança?

Não é possível obrigar todos os clientes a renderizar um plano de fundo, portanto, busque uma degradação elegante: o e-mail ainda deve funcionar sem ele.

Defina sempre uma cor de fundo alternativa.

Todo elemento com gradiente ou imagem de fundo precisa de uma cor de fundo sólida de reserva, definida com o atributo `bgcolor` ou um estilo `background-color`. Escolha uma cor extraída da imagem para que o layout se mantenha coeso caso a imagem não carregue. Veja o modo escuro aqui: uma cor de fundo branca de reserva atrás de um elemento principal escuro pode inverter para quase preto no Apple Mail ou Gmail no Android, fazendo com que o texto branco sobreposto desapareça. Portanto, escolha uma cor de fundo escura, em tom médio, para a marca.

Use o padrão em camadas: atributo HTML, CSS embutido e VML para o Outlook.

Quando uma seção realmente precisa da imagem, use a abordagem à prova de falhas. Uma imagem de fundo à prova de falhas é aquela criada para funcionar mesmo em clientes que rejeitam o CSS. Especificamente para o Outlook, isso significa uma imagem de fundo em VML: Vector Markup Language (Linguagem de Marcação Vetorial) encapsulada em comentários condicionais do Outlook, que somente o Outlook lê, enquanto outros clientes usam o CSS padrão.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="width:600px; height:300px;">
  <v:fill type="frame" src="https://yourdomain.com/hero-bg.jpg" color="#1a1a2e" />
  <v:textbox inset="0,0,0,0"><![endif]-->
<td background="https://yourdomain.com/hero-bg.jpg" bgcolor="#1a1a2e"
    style="background-image:url('https://yourdomain.com/hero-bg.jpg');
           background-color:#1a1a2e; background-size:cover; background-position:center;">
  <!-- your content here -->
</td>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

Este é o padrão da indústria para modelos corporativos. Sua única ressalva: o VML exige dimensões fixas, o que o torna inadequado em layouts totalmente fluidos. Portanto, reserve-o para seções de destaque de alto valor, em vez de usá-lo em todos os blocos.

Na dúvida, use uma imagem em primeiro plano e nunca confie em texto de sustentação.

Se uma imagem precisa aparecer em todos os lugares, use uma tag `<img>` em primeiro plano em vez de uma tag `<img>` em segundo plano. Imagens em primeiro plano são renderizadas de forma consistente em todos os principais navegadores, independentemente do bloqueio de imagens. E, seja qual for a sua escolha, nunca coloque um texto legível e importante diretamente sobre uma imagem de fundo: se a imagem for bloqueada ou tiver o texto removido, ele desaparecerá junto e a mensagem ficará comprometida.

Onde isso acontece no Eloqua e no Marketo

Ambas as plataformas permitem inserir HTML personalizado, portanto, as técnicas de VML e comentários condicionais estão totalmente disponíveis, seja em uma Campanha do Eloqua ou em um Programa do Marketo. A armadilha está no próprio editor visual: alguns construtores de arrastar e soltar removem ou ignoram os comentários HTML ao salvar, incluindo os comentários condicionais do Outlook que envolvem seu VML. Crie layouts padrão no Editor de Design do Eloqua ou no novo Designer de E-mail do Marketo , mas para tratamentos de fundo complexos, trabalhe diretamente no código HTML e verifique se os comentários condicionais permanecem após a gravação.

Mantenha também a terminologia da plataforma alinhada. No Eloqua, o esforço é uma Campanha; no Marketo, é um Programa. E a escolha entre modelos de e-mail do Eloqua bloqueados ou desbloqueados e módulos do Marketo define quem pode editar um bloco de fundo com segurança. Se você estiver padronizando seções principais em vários envios, criar modelos de e-mail personalizados e seguros para a marca é a maneira mais eficiente de bloquear o padrão uma única vez e reutilizá-lo.

Quando a estrutura estiver concluída, considere os testes de controle de qualidade da campanha de e-mail como a etapa fundamental e verifique todos os principais clientes antes do envio. Os mesmos serviços de teste entre clientes que a 4Thought Marketing usa para isso, Litmus e Email on Acid, geram essas prévias rapidamente, mas a revisão final ainda é feita por um profissional.

Conclusão

Gradientes e imagens de fundo em e-mails não são impossíveis; exigem apenas uma mentalidade diferente da usada no design web. Considere que o Outlook para Windows ignorará seu CSS, que o Gmail poderá removê-lo e crie cada plano de fundo de forma que a mensagem ainda seja transmitida mesmo que o elemento visual não seja exibido. Defina uma cor alternativa, use VML apenas quando necessário, mantenha o conteúdo principal fora da imagem e deixe o controle de qualidade como a etapa final. Fazendo isso, seus e-mails terão uma aparência profissional em todas as caixas de entrada importantes.

Se você precisa de ajuda para criar modelos de e-mail que sejam exibidos corretamente no Eloqua e no Marketo, entre em contato com a 4Thought Marketing.

Sobre a 4Thought Marketing
Somos uma consultoria de automação de marketing B2B e IA especializada em fazer com que tecnologias complexas funcionem de verdade. Desde 2008, ajudamos centenas de organizações dos setores financeiro, tecnológico, industrial e imobiliário a obterem o máximo do Eloqua, Marketo e suas integrações com CRM. Atendemos nossos clientes em estratégia de automação de marketing, ciclo de leads, IA, compliance, gestão de preferências e muito mais. Explore nossos serviços or entre em contato.

Perguntas frequentes