← Todos os Artigos
· 14 min de leitura

Compatibilidade com Clientes de Email: O Que Funciona Onde

Saiba quais recursos de CSS e HTML funcionam em quais clientes de email.

A compatibilidade com clientes de email é o principal desafio no desenvolvimento de emails HTML. Diferente dos navegadores web, que convergiram amplamente para padrões, os clientes de email renderizam HTML e CSS de forma inconsistente. Este guia documenta o que funciona onde.

Se você quiser evitar lidar diretamente com compatibilidade, construtores de email como Sequenzy e frameworks como MJML lidam com esses problemas por você. Mas entender o cenário ajuda a tomar decisões informadas.

Os Principais Clientes de Email

Outlook (Windows)

O cliente mais desafiador. Outlook 2007-2019 usa o motor de renderização do Microsoft Word, não um motor de navegador. Isso significa:

  • Sem floats CSS
  • Sem imagens de fundo em divs (células de tabela funcionam)
  • Suporte limitado a margin/padding
  • Sem posicionamento CSS
  • Tabelas são necessárias para layout

Outlook 365 (novo Outlook) é ligeiramente melhor, mas ainda tem limitações significativas.

Gmail

Gmail remove tags style a menos que estejam no head (para alguns clientes). Ele também remove muitas propriedades CSS. Limitações principais:

  • Remove alguns seletores CSS
  • Sem suporte para @media queries embutidas em alguns contextos
  • Requer estilos inline para confiabilidade
  • Bloqueia imagens externas por padrão

Gmail App (mobile) tem melhor suporte a CSS que o Gmail web em algumas áreas.

Apple Mail (macOS/iOS)

O cliente de email mais capaz. Usa WebKit, similar ao Safari. Suporta:

  • Media queries
  • Animação CSS (casos de uso limitados)
  • Imagens de fundo
  • Propriedades CSS modernas

Se seu público for principalmente usuários Apple, você tem mais flexibilidade de design.

Yahoo Mail

Suporte moderado a CSS. Remove alguns estilos, mas menos agressivamente que o Gmail. Suporta imagens de fundo com fallbacks.

Outlook.com (Hotmail)

Diferente do Outlook desktop. Usa um renderizador baseado em navegador. Melhor suporte a CSS que o Outlook desktop, mas ainda tem peculiaridades.

Suporte a Propriedades CSS

Seguro para Usar em Todos os Lugares

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

Suporte Parcial (Teste Necessário)

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

Evitar ou Usar com Cuidado

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

Técnicas de Layout

Tabelas para Estrutura

As tabelas permanecem o método de layout confiável:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Comentários Condicionais do Outlook

Direcione especificamente o Outlook:

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML para Imagens de Fundo do Outlook

Imagens de fundo em seções requerem VML para Outlook:

<!--[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="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Imagens

Código de Imagem Básico

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Atributos principais:

  • width/height: Defina dimensões (Outlook precisa delas)
  • display: block: Remove o espaço abaixo da imagem
  • max-width: 100%: Escala responsiva
  • border: 0: Remove a borda de imagem linkada

Formatos de Imagem

  • JPG: Fotos, imagens complexas
  • PNG: Transparência, gráficos simples
  • GIF: Animação (com cuidado)
  • SVG: Suporte limitado, evite em email
  • WebP: Não suportado no Outlook

Fontes

Pilha de Fontes Web-Safe

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Fontes Personalizadas

Fontes web funcionam em alguns clientes (Apple Mail, iOS, alguns Android). Use com fallbacks:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook e Gmail usarão o fallback. Apple Mail usará a fonte personalizada.

Media Queries

O suporte varia significativamente:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Suporte a media queries:

  • Apple Mail: Suporte completo
  • iOS Mail: Suporte completo
  • Gmail App (iOS): Suporte
  • Gmail App (Android): Suporte
  • Gmail (web): Limitado
  • Outlook: Sem suporte

Usando Construtores de Email para Compatibilidade

Construtores de email abstraem preocupações de compatibilidade. Sequenzy gera HTML que funciona em todos os clientes. Você projeta visualmente, a ferramenta lida com a saída técnica.

Frameworks como MJML compilam marcação semântica para HTML compatível. Você escreve código limpo, o framework gera as tabelas aninhadas e estilos inline.

Ferramentas de teste como Litmus mostram renderização em mais de 90 clientes. Veja problemas antes de enviar.

Estratégia de Teste

  1. Teste no Outlook primeiro. Se funcionar lá, provavelmente funciona em todos os lugares.
  2. Verifique no Gmail. A remoção de CSS pode causar problemas.
  3. Verifique no mobile. Mais de 60% das aberturas são em mobile.
  4. Teste com imagens desativadas. Garanta que a mensagem seja clara sem imagens.

A Conclusão

A compatibilidade com clientes de email é complexa, mas gerenciável. Aja com técnicas comprovadas: tabelas para layout, estilos inline, fontes web-safe com fallbacks. Teste em vários clientes antes de enviar.

Para equipes que querem evitar a complexidade, ferramentas como Sequenzy e MJML lidam com a compatibilidade automaticamente. A saída é testada, e você foca no conteúdo em vez de peculiaridades de renderização.