Renderização de e-mail do Outlook: como aprendi a parar de me preocupar e amar o Outlook

Publicados: 2021-07-02

Todos nós já passamos por isso. Você cria um lindo e-mail com GIFs interessantes, botões acessíveis e imagens atraentes. Então você testa e parece ótimo ... exceto no Outlook, onde está completamente quebrado. As pessoas não conseguem interagir da maneira que você deseja com um e-mail corrompido.

O Outlook tem sido uma praga para os profissionais de marketing por e-mail há muito tempo, mas precisa ser? Como podemos trabalhar com isso? Continue lendo para descobrir como passei a amar o Outlook, apesar de seus muitos defeitos. Vou cobrir:

Versões do Outlook
Dicas para peculiaridades do Outlook
O código para fazer as correções

As muitas versões do Microsoft Outlook

O nome “Outlook” abrange vários clientes de e-mail diferentes com alguns mecanismos de renderização diferentes e pelo menos duas configurações de visualização diferentes. Tudo isso pode ser uma grande dor de cabeça, se você permitir. Vamos mergulhar e ver se podemos endireitar um pouco.

Outlook 2007-2019

Estas são as versões do Outlook para desktop do Windows. Eles usam o Word como mecanismo de renderização, o que fazia sentido em uma época em que e-mail era como escrever cartas. Ah, tempos mais simples. Mas, para os profissionais de marketing por e-mail, isso não serve para renderizar e-mails em HTML.

120 DPI (pontos por polegada) aumenta a complexidade. Os usuários do Windows podem escolher 120 DPI para aumentar a resolução da tela. Se o fizerem, os clientes de e-mail de desktop respeitarão isso e atualizarão as imagens e o texto para que fiquem maiores. O que pode causar estragos em seu e-mail.

Outlook para Mac

Esta é a versão desktop do Mac do Outlook. Ele usa o Webkit como mecanismo de renderização. O que significa que geralmente está no mesmo nível do Apple Mail e iOS no que diz respeito à renderização de e-mail. Se tiver uma boa aparência no seu navegador, há uma boa chance de que fique bem aqui.

Outlook.com e os aplicativos móveis do Outlook

Esses clientes usam motores de renderização baseados em Webkit ou Webkit, portanto, fornecem boa renderização de HTML e geralmente não interrompem seus e-mails.

Outlook Office 365

Existem duas versões diferentes do Outlook Office 365, o cliente de e-mail de desktop e o cliente de e-mail baseado na web. A versão desktop é semelhante ao Outlook 2007-2019 e usa o Word como um mecanismo de renderização (difícil para e-mail). O cliente de e-mail baseado na web usa Webkit ou Blink e renderiza e-mails de maneira semelhante ao Outlook.com (muito mais fácil).

Chega de e-mails quebrados

Visualize seus e-mails em mais de 90 clientes de e-mail, aplicativos e dispositivos - incluindo todas as versões do Outlook - para garantir uma experiência do assinante na marca e livre de erros.

Aprenda como →

Um Outlook para governar todos eles

Em janeiro, a Microsoft anunciou sua visão “One Outlook” para substituir os clientes de desktop por um cliente que funcione em qualquer lugar a partir de 2022.

O novo cliente de e-mail será baseado nos atuais aplicativos da Web do Outlook. Portanto, há grandes esperanças de que ele tenha um mecanismo de renderização baseado em Webkit e renderize bem e-mails em HTML. Infelizmente, todos aqueles clientes de desktop antigos não irão simplesmente desaparecer quando isso acontecer, então eles ainda terão que ter suporte até certo ponto.

Fazer ou não fazer, não existe tentar

Sua cabeça já está girando?

Se for, vamos destilar para você: a principal conclusão é que estamos trabalhando com dois mecanismos de renderização diferentes - Word e Webkit. O Webkit é mais fácil de codificar e o Word é mais difícil. Nenhum dos dois é realmente bom ou ruim. Eles apenas exigem abordagens diferentes e têm peculiaridades diferentes que precisam ser levadas em consideração.

Vejamos alguns dos problemas comuns de renderização nos clientes de desktop do Outlook e como resolvê-los.

Inclua atributos de largura e altura em suas imagens

O Outlook não oferece suporte a estilos CSS para larguras e alturas e, se você não incluir os atributos de largura e altura, o Outlook exibirá sua imagem em seu tamanho real. Se você estiver usando imagens de retina (o que deveria ser), isso significa que você obterá imagens gigantes que quebrarão seus e-mails.

panorama — Imagem Retina sem atributo de largura no Outlook, tornando o e-mail mais amplo

Inclua texto ALT

Não deixe a mensagem de segurança do Outlook falar por suas imagens. Certifique-se de incluir o texto ALT. Especialmente porque o Outlook não exibe imagens por padrão, a menos que as pessoas ativem o recurso.

Use tabelas

O e-mail percorreu um longo caminho e você pode usar blocos <div> em muitos clientes de e-mail, mas o Outlook não é um deles. O Outlook irá ignorar a maioria dos estilos que você aplica às suas marcas <div>, incluindo larguras e preenchimentos. Portanto, é importante que você use tags <table> para o seu conteúdo.

Use o código específico do Outlook para resolver problemas de renderização

Isso pode não resolver todos os seus problemas, mas muitas vezes incluir algum CSS específico do Outlook pode ajudá-lo a resolver um problema de renderização que você vê apenas no Outlook. Ou você pode esconder um pequeno bloco que não está trabalhando em Outlook, e usar o código condicional para mostrar uma versão que iria trabalhar para uma versão específica do Outlook. (Mais sobre o código condicional posteriormente.)

Adicione alturas de linha a imagens pequenas ou células de tabela

O Outlook define uma altura mínima nas células e imagens da tabela. Portanto, se você estiver usando uma célula de tabela como espaçador ou se tiver uma imagem pequena, certifique-se de adicionar um atributo de altura de linha ao elemento igual à altura que deseja que apareçam. Por exemplo:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

Corrija para problemas de escala de DPI

Em computadores Windows, há uma configuração global que as pessoas podem alterar (ou, em alguns casos, são definidas como mais altas por padrão) que dimensiona o texto e os elementos gráficos para torná-los maiores e mais fáceis de ler. Isso é ótimo para acessibilidade, mas não tão bom para Outlook, pois apenas alguns elementos são aumentados, enquanto outros não.

Felizmente, há uma solução. Primeiro, você deve adicionar um namespace XML à tag HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Em seguida, adicione algum código para corrigir o dimensionamento da imagem antes da tag </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

E, finalmente, certifique-se de incluir quaisquer larguras definidas como uma propriedade CSS com pixels e não como um atributo em suas tabelas.

✗ Não este com largura = ”600 ″ :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Sim, assim com estilo = ”largura: 600px;” :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Isso resolverá a maioria dos seus problemas para clientes de 120 DPI. Dê uma olhada nesta comparação lado a lado antes e depois dessa correção:

Outlook 2013 a 120 PPP (sem correção)	Outlook 2013 a 120 PPP (com correção)

Que diferença, hein?

Não espere que os efeitos do foco funcionem

O Outlook não oferece suporte à pseudo classe de foco. Você ainda deve incluí-lo para criar interações para aumentar a acessibilidade do seu e-mail em outros clientes de e-mail, mas não se surpreenda quando não funcionar no Outlook.

Não dependa de um GIF animado para transmitir seu ponto de vista

Os clientes da área de trabalho do Outlook não oferecem suporte a GIFs animados. Você pode fazer com que o quadro inicial exiba a imagem que deseja exibir no Outlook ou pode ocultar o GIF animado do Outlook e usar a codificação condicional para exibir a imagem estática que deseja. (Mais uma vez, mais sobre codificação condicional a seguir.)

Não use conteúdo interativo sem um substituto

E-mails interativos são um grande não para o Outlook. Eles dependem da codificação AMP ou do hack da caixa de seleção, ambos os quais não são compatíveis com o Outlook.

No caso de AMP para e-mail, o arquivo HTML será exibido em vez do AMP, portanto, nenhuma codificação extra para isso. Para a interatividade do hack da caixa de seleção, você terá que ocultar o conteúdo interativo e mostrar o fallback do Outlook. Novamente, a codificação condicional é sua amiga aqui.

Não adicione preenchimento ou margens às imagens

O Outlook remove o preenchimento e as margens das imagens. Certifique-se de adicionar preenchimento à célula da tabela ao redor da imagem. Ou se você tiver a imagem na mesma célula da cópia, adicione margem à marca ao redor da cópia (<h1>, <h2>, <p>, etc.).

O medo é o assassino do e-mail: o código de que você precisa para enfrentar seus medos do Outlook

Codificar um ótimo e-mail para clientes de e-mail de desktop do Outlook exige pular para fora do HTML e CSS “normais”. Existem três tipos de código que ajudarão a fazer seus emails brilharem nesses clientes: codificação condicional, propriedades MSO e VML.

Pode ser assustador trabalhar com algo novo, mas prometo que vale a pena. E aquele momento em que você faz com que funcione corretamente? Você sentirá que acabou de fazer a Kessel Run em menos de 12 parsecs.

Codificação condicional

Codificação condicional é aquela que olha qual cliente de e-mail ou navegador seu assinante está usando e só mostra o código se cumprir a condicional dentro do comentário, como:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Você pode até mesmo usar isso para direcionar versões específicas de clientes de desktop do Outlook, adicionando os números de versão:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

O Outlook não é nada simples, portanto, os números da versão não correspondem ao nome do cliente de e-mail:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 e Office 365 desktop = mso 16

E então você pode ficar mais complicado ao direcionar uma gama de clientes com menor que (lt), maior que (gt), menor ou igual a (lte), ou maior ou igual a (gte). Por exemplo:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Portanto, se você está vendo apenas algumas coisas selvagens acontecendo em um cliente específico, pode direcionar esse cliente especificamente e ocultar e mostrar um conteúdo melhor para ele.

Você também pode usar comentários condicionais para ocultar o conteúdo do Outlook, dizendo "if! Mso" que significa "if not mso":

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Algo a ter em mente: o código condicional só funciona em clientes de desktop do Outlook. Como é onde muitos problemas entram em jogo, você provavelmente precisará deles mais do que qualquer correção para clientes de webmail.

Mas também existem maneiras de direcionar os clientes da web, embora nenhuma forma de direcionar um cliente da web do Outlook sobre o outro. Portanto, ao direcionar o Outlook.com, você também direcionará o cliente da Web do Office 365 (mas não o cliente de desktop).

Você pode direcionar os clientes da Web do Outlook explorando o fato de que o Outlook anexa “x_” a todos os nomes de classes, mas não faz isso para o seletor de atributos. Portanto, se você tem uma classe “foo” e deseja tratá-la de maneira diferente para os clientes da Web do Outlook, pode direcioná-la com este código:

[class~="x_foo"] { }

(Agradecimentos a Mark Robbins por esta correção e a Dylan Smith por howtotarget.email.)

Propriedades MSO

Conforme mencionado acima, há CSS específico para o Outlook que você pode adicionar e que afetará apenas os clientes de e-mail da área de trabalho do Outlook. Aqui estão alguns que você descobrirá que são bastante comuns e talvez já tenha ouvido falar deles:

mso-ocultar: todos;

Esta propriedade irá ocultar tudo dos clientes de desktop do Outlook. Ele é eliminado quando o e-mail é encaminhado, portanto, tenha cuidado ao usá-lo sozinho se essa for uma função que você sabe que seus assinantes costumam aproveitar. Você pode emparelhá-lo com o código condicional “if not mso” se for um codificador “por precaução”.

mso-line-height-rule: exatamente;

Esta propriedade garante que o Outlook exiba a altura da linha conforme você designou na propriedade line-height. Sem ele, o Outlook não respeita necessariamente a altura das linhas. Se você está trabalhando em um setor em que a precisão é fundamental, provavelmente está familiarizado com essa propriedade.

mso-padding-alt

Este é um pouco menos comum, mas tenho que usá-lo de vez em quando. Ele permite que você declare o preenchimento específico do Outlook. Portanto, se o preenchimento normal que você tem em uma célula não está renderizando muito bem no Outlook, você pode usar mso-padding-alt para definir os valores que se ajustam ao seu design para o Outlook.

mso-ansi-font-size

Este é outro que uso apenas ocasionalmente. Ele permite que você defina tamanhos de fonte específicos para o Outlook. Portanto, se o Outlook estiver tornando sua fonte um pouco maior do que outros clientes de e-mail e você acabar com uma linha final curta de cópia que não deseja, adicione mso-ansi-font-size e defina um tamanho de fonte que faça com que sua cópia caiba.

Existem muito mais propriedades MSO que você pode usar, então vá em frente e veja se há algo que consertará um problema de renderização para você.

VML

VML significa Vector Markup Language. É a versão do SVG da Microsoft, mas a linguagem foi depreciada e é muito raramente usada (yay email!). A Microsoft tem a documentação para VML arquivada online, então você ainda pode pesquisar como usá-la para criar vetores no Outlook, onde ainda é compatível. Teoricamente, quando a Microsoft fizer a transição para seu modelo “One Outlook”, poderemos deixar o VML para trás.

Certifique-se de incluir a declaração de namespace VML. Eu geralmente o adiciono ao elemento <html> em meu modelo padrão para que possa usar VML sempre que precisar:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Depois de ter isso, você pode adicionar qualquer VML ao seu código dentro das condicionais MSO:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Esse código faria um retângulo azul de 200 px por 50 px. Talvez não seja algo que você possa realmente usar em um e-mail, mas você pode usar VML para adicionar botões com cantos arredondados ao seu código, imagens de plano de fundo e gradientes de plano de fundo. O Campaign Monitor possui duas ferramentas criadas por Stig para ajudá-lo a criar imagens de fundo ou botões com cantos arredondados. Descobri que são uma ótima maneira de adicionar VML quando você está apenas aprendendo.

Você também pode usar o VML para criar um posicionamento absoluto falso, efeitos de sombra ou um fallback para dar suporte à arte CSS no Outlook. Há muito que você pode fazer com o VML assim que começar.

Viva muito e e-mail

O Outlook há muito tempo é a ruína dos profissionais de marketing por e-mail, mas não precisa ser.

Com as ferramentas certas, você pode criar lindos e-mails que são processados corretamente no Outlook. Confira os recursos ao longo deste post para construir seus chops de codificação do Outlook e testá-los em seus e-mails com Litmus Builder e Email Previews. Pense em programar para o Outlook como um quebra-cabeça esperando para ser resolvido, e você poderá adorar o Outlook e todas as suas peculiaridades.

Teste seus e-mails no Outlook com Litmus

Veja como seus e-mails ficarão no Outlook e corrija quaisquer problemas antes de clicar em enviar. Com o Litmus, tenha certeza de que você está criando e-mails perfeitos para seus assinantes.

Comece seu teste grátis →