O Outlook é um dos clientes de email mais usados, mas suas diferentes versões renderizam emails de formas distintas. Versões anteriores, como Outlook 2000–2003, usavam o Internet Explorer como mecanismo de renderização. Com o lançamento do Outlook 2007, o mecanismo de renderização passou a ser o Microsoft Word, que não oferece suporte a muitas propriedades padrão de HTML e CSS e tem seus próprios bugs.

Tanto o Internet Explorer quanto o Microsoft Word têm limitações específicas, que podem fazer com que os emails sejam exibidos incorretamente ou apareçam distorcidos.

Problemas comuns de renderização no Outlook e soluções

Ao criar seus emails, tenha em mente os seguintes problemas comuns:

Imagens de fundo e estilo de botões no Outlook

• ⚠️Problema: Muitas versões do Outlook — especialmente as versões clássicas para desktop que usam o Microsoft Word como mecanismo de renderização — têm suporte limitado a imagens de fundo baseadas em CSS e estilos modernos de botões, como cantos arredondados. Para exibir esses elementos corretamente, o Outlook clássico depende de VML (Vector Markup Language). Sem VML, as imagens de fundo podem não ser renderizadas, e os botões podem aparecer planos ou quebrados.

  Embora versões web recentes do Outlook, como Outlook.com e webmail do Microsoft 365, ofereçam suporte a fundos em CSS, as versões clássicas para desktop ainda exigem alternativas.

• 📉Impacto:
  • As imagens de fundo podem não aparecer.
  • Os botões podem perder o estilo e aparecer como retângulos simples.
  • Os emails podem parecer incompletos ou visualmente inconsistentes entre diferentes versões do Outlook.
• 🛠️Solução:
  • Use uma cor de fundo sólida como alternativa.
  • Para compatibilidade completa, use VML para renderizar botões e imagens de fundo no Outlook clássico para desktop.
  • Como alternativa, use uma imagem de botão estática vinculada a uma URL ou insira elementos visuais de fundo como blocos <img> normais.

• Exemplos de imagens de fundo:

  • ❌ CSS padrão, funciona em clientes modernos, mas não no Outlook clássico para desktop:

  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Esta é uma imagem de fundo (método CSS).
      </td>
    </tr>
  </table>

  • ✅ Alternativa com VML, funciona no Outlook clássico para desktop:

  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
      <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/>
      <v:textbox inset="0,0,0,0">
  <![endif]-->
  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Esta é uma imagem de fundo (VML para Outlook).
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
  <![endif]-->

• Exemplos de botões arredondados:

  • ❌ Botão CSS padrão, não compatível com o Outlook clássico para desktop:

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;">
          Botão arredondado
        </a>
      </td>
    </tr>
  </table>

  • ✅ Botão VML para Outlook clássico para desktop:

  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Botão arredondado
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-- -->
  <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;">
    Botão arredondado
  </a>
  <!--<![endif]-->

Bloqueio de imagens por padrão

• ⚠️Problema: O Outlook pode bloquear imagens, a menos que o remetente seja considerado confiável.
• 📉Impacto: Os emails podem parecer vazios ou quebrados na primeira visualização.
• 🛠️Solução: Sempre adicione texto alternativo descritivo e considere usar cores de fundo ou conteúdo HTML alternativo.

Redimensionamento de imagens no Outlook

• ⚠️Problema: O Outlook clássico pode renderizar imagens em seu tamanho nativo original, ignorando larguras definidas em CSS. Isso é especialmente problemático ao tentar reduzir imagens grandes e de alta resolução usando apenas CSS, uma prática comum para oferecer suporte a telas de alta densidade de pixels.
• 📉Impacto:
  • As imagens podem aparecer grandes demais no Outlook clássico.
  • Os layouts podem quebrar ou ficar inconsistentes entre diferentes clientes de email.
• 🛠️Solução: Para garantir um tamanho de imagem consistente no Outlook, sempre use o width atributo HTML diretamente na tag <img>. O Outlook respeita esse atributo e ajustará a altura automaticamente para manter as proporções.

✅ Correto, redimensiona no Outlook clássico:

<img src="image.jpg" width="300" style="width:300px;">

❌ Incorreto, o Outlook clássico pode ignorar isto:

<img src="image.jpg" style="width:300px;">

Suporte limitado a GIFs animados

• ⚠️Problema: As versões 2007–2016 do Outlook clássico para Windows exibem apenas o primeiro quadro de um GIF.

  A animação GIF é compatível com versões mais recentes do Outlook para Microsoft 365, aplicativos móveis do Outlook e Outlook.com. No Outlook para Microsoft 365, a reprodução também pode depender das configurações de animação do Windows do usuário.
• 📉Impacto: Se informações importantes aparecerem em quadros posteriores, os usuários não as verão.
• 🛠️Solução: Certifique-se de que o primeiro quadro inclua seu CTA ou a mensagem mais importante.

Renderização inconsistente de fontes

• ⚠️Problema: Em muitas versões desktop do Outlook, fontes personalizadas não são suportadas. Quando você coloca uma fonte personalizada em primeiro lugar na sua pilha de fontes, o Outlook pode ignorar toda a pilha e usar Times New Roman por padrão, mesmo que você tenha definido fontes alternativas seguras.
• 📉Impacto: Isso resulta em tipografia inconsistente e pode prejudicar o branding, o layout e a legibilidade do seu email quando visualizado no Outlook.
• 🛠️Soluções:

  • ✅ Use seletores de atributo para substituir fontes personalizadas:
    Escreva sua pilha de fontes como de costume, mas coloque a fonte personalizada por último na lista. Depois, adicione este CSS:

    [style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }

    Esse código garante que clientes de email com suporte a seletores de atributo, como Gmail, Apple Mail e a maioria dos serviços de webmail, usem sua fonte personalizada se ela estiver disponível. O Outlook clássico ignora seletores de atributo como [style*="..."], portanto usará as fontes alternativas que você especificou.

    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
        <style>
          div {font-family: Helvetica, sans-serif, 'Tangerine';}
    
          [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
        </style>
      </head>
      <body>
        <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Exemplo de fonte personalizada</div>
      </body>
    </html>

  • ✅ Aplique CSS condicional somente para Outlook usando comentários MSO:

    Como alternativa, você pode definir sua pilha de fontes personalizada no CSS e usar uma instrução condicional MSO para substituí-la por fontes padrão do sistema especificamente no Outlook.

    <style>
      div { font-family: 'CustomFont', Helvetica, sans-serif; }
    </style>
    
    <!--[if gte mso 9]>
      <style type="text/css">
        div { font-family: Helvetica, Arial, sans-serif !important; }
      </style>
    <![endif]-->

  • ✅ Ou simplesmente use fontes padrão do sistema, como Arial, Calibri, Times New Roman ou Verdana, que são totalmente compatíveis com as versões do Outlook.

Problemas de estilo em listas no Outlook

• ⚠️Problema: Marcadores e números podem não ser exibidos como esperado. O Outlook clássico nem sempre preserva o estilo padrão das listas, especialmente quando as listas estão aninhadas dentro de tabelas ou divs.
• 📉Impacto: As listas podem aparecer como texto simples, sem marcadores ou números.
• 🛠️Solução: Use estilos inline ou conteúdo alternativo. Você também pode adicionar símbolos manualmente, como •, ou usar células <td> para criar um estilo de lista simulado.

❌ HTML problemático, pode não ser exibido corretamente no Outlook clássico:

<table>
  <tr>
    <td>
      <ul>
        <li>Primeiro ponto</li>
        <li>Segundo ponto</li>
      </ul>
    </td>
  </tr>
</table>

✅ HTML melhorado, lista simulada compatível com Outlook:

<table>
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 14px;">
      • Primeiro ponto<br>
      • Segundo ponto
    </td>
  </tr>
</table>

Colunas fantasma: corrigindo o alinhamento de colunas no Outlook

• ⚠️Problema: O Outlook clássico para desktop costuma lidar mal com larguras exatas de colunas em layouts lado a lado. Até mesmo emails responsivos criados com duas colunas, como layouts de duas colunas que somam 600 px, podem aparecer desalinhados ou empilhados incorretamente.
• 📉Impacto:
  • As colunas podem se deslocar, empilhar incorretamente ou exibir lacunas.
  • Layouts que são renderizados corretamente em webmail ou dispositivos móveis podem quebrar no Outlook clássico para desktop.
• 🛠️Solução: Envolva suas tabelas de colunas em uma tabela “fantasma” de largura fixa exclusiva para Outlook usando comentários condicionais MSO. O Outlook vê essa tabela fantasma e renderiza as colunas, enquanto outros clientes de email a ignoram, preservando o comportamento responsivo nos demais clientes.

🎯 Exemplo HTML

<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="main_container">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center"><tr>
          <td width="450">
      <![endif]-->

      <table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Conteúdo da coluna esquerda</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
          </td><td width="150">
      <![endif]-->

      <table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Conteúdo da coluna direita</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
      <![endif]-->

    </td>
  </tr>
</table>

Resumo: Use colunas fantasma envolvidas em comentários MSO para aplicar larguras de coluna no Outlook clássico para desktop sem afetar o layout nos demais clientes. É uma solução leve e específica para Outlook que preserva um design limpo e responsivo em outros clientes.

Linhas brancas em emails do Outlook

• ⚠️Problema: O Outlook clássico para desktop pode ocasionalmente inserir linhas horizontais brancas inesperadas entre blocos de conteúdo devido a erros de arredondamento em conversões de pixels para pontos e ao tratamento inconsistente de alturas de tabela.
• 📉Impacto:
  • Lacunas indesejadas aparecem nos layouts.
  • Interrompe o fluxo visual e a consistência da marca.
  • Difícil de prever — pode aparecer aleatoriamente.
• 🛠️Soluções, tente uma ou mais:

1. Use valores de pixel pares, preferencialmente múltiplos de 4
   Defina font-size, line-height, padding e height com números pares, preferencialmente divisíveis por 4, para reduzir erros de arredondamento.

2. Insira quebras fantasma específicas para Outlook
   Evite lacunas com uma quebra de linha somente para MSO:

   <!--[if gte mso 12]><br /><![endif]-->

3. Use código específico da Microsoft
   Este trecho pode ajudar a reduzir lacunas indesejadas ao recolher explicitamente bordas e espaçamento de tabelas no Outlook:

   <!--[if gte mso 9]>
   <style type="text/css">
     table {
       border-collapse: collapse;
       border-spacing: 0;
     }
   </style>
   <![endif]-->

   Adicione esse código à seção <head> do seu email e teste cuidadosamente. Dependendo do seu layout, ele pode afetar outros elementos, então sempre visualize seu email no Outlook antes de finalizar.

4. Adicione um espaço sem quebra como buffer
   Uma solução alternativa comum é adicionar um espaço sem quebra ( ) logo antes do fechamento da tag <td>:

   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td>
         Sua oferta exclusiva está esperando — clique abaixo para resgatar seu desconto!<br>&nbsp;
       </td>
     </tr>
   </table>

   Isso pode adicionar uma pequena quantidade de espaço extra abaixo do seu conteúdo, portanto visualize e ajuste o layout se necessário.

5. Combine as cores de fundo
   Oculte as linhas configurando o corpo e as linhas problemáticas da tabela com o mesmo fundo:

   <!--[if gte mso 9]>
     <style>body { background-color: #123456 !important; }</style>
   <![endif]-->

🎯 Exemplo combinado

<!--[if (gte mso 9)|(IE)]>
  <style>
    table { border-collapse: collapse !important; border-spacing: 0 !important; }
  </style>
<![endif]-->

<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
  <tr>
    <td style="font-size:16px; line-height:16px; padding:0;">
      Conteúdo acima da linha
      <!--[if gte mso 12]><br /><![endif]-->
      &nbsp;
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Conteúdo abaixo da linha</td></tr>
      </table>
    </td>
  </tr>
</table>

🛠 Guia rápido de soluções