Email: render em diferentes clientes (Gmail, Outlook, Apple Mail)

Cada cliente de email renderiza HTML de forma diferente. Esta página descreve o comportamento de cada um e como o ShopIA garante consistência.

Os clientes que importam

A grande maioria do seu volume cai em Gmail + Outlook + Apple Mail.

Diferenças importantes

Gmail

• Cuts emails > 102 KB (mostra "Mensagem cortada")
• Aceita CSS inline e em <style> (com restrições)
• Imagens carregam por padrão (em contas verificadas)
• Modo escuro automático ajusta paleta agressivamente
• Suporta web fonts (Google Fonts)

Outlook Desktop (Windows)

• Engine de render é o Word (não Chromium) — comportamento próprio
• Não suporta vários CSS modernos (flex, grid)
• Não suporta web fonts
• Bloqueia imagens externas por padrão
• Largura máxima ~600px (vai estourar acima)

Outlook Web

• Comportamento mais próximo do Gmail
• Suporta CSS moderno
• Imagens carregam por padrão

Apple Mail (iOS/macOS)

• Engine WebKit
• Suporta CSS moderno
• Modo escuro disponível
• Carrega imagens por padrão (com config Privacy Protection na 15+)
• Imagens passam por proxy

Yahoo, BOL, UOL

• Variados — assume comportamento limitado, próximo ao Outlook Desktop

Como o ShopIA escreve HTML compatível

A função renderStoreEmail() do ShopIA segue regras conservadoras:

• CSS inline obrigatório (compatibilidade Outlook)
• Tabelas para layout (não flex/grid)
• Largura fixa 600px (padrão de email)
• Imagens com alt text descritivo
• Web fonts opcionais com fallback
• Botões em tabela (CTAs renderizam mesmo em Outlook)

Atenção: o render é gerado pelo ShopIA — você não escreve HTML manualmente. IA gera o texto, ShopIA gera o HTML. Detalhes em Newsletter DNA-aware.

Bug clássico: Outlook

"Larguras estranhas"

Outlook Word ignora algumas larguras CSS. Solução do ShopIA: tabelas com width em pixel + atributo HTML width.

"Botão sem cor de fundo"

Outlook não aceita background-color em <a>. Solução: botão dentro de <td> com background, link interno transparente.

"Espaços extras estranhos"

Outlook adiciona padding em <table> por padrão. Solução: cellpadding="0" e cellspacing="0" em todas as tabelas.

Bug clássico: Gmail

"Mensagem cortada"

Gmail corta emails > 102 KB. Solução: manter HTML compacto, hospedar imagens externas, evitar inline base64.

"Imagens bloqueadas"

Em alguns casos (sender desconhecido), Gmail bloqueia imagens. Solução: garantir alt text descritivo + DKIM/SPF/DMARC válidos para virar "remetente confiável" rápido.

"Modo escuro estranho"

Gmail Dark Mode inverte cores agressivamente. Solução:

• Não use #FFFFFF puro nem #000000 puro
• Use meta[name="color-scheme"] declarando suporte
• Logos em PNG transparente quebram — use SVG ou versão com fundo arredondado

Bug clássico: Apple Mail

"Privacy Protection"

Apple Mail Privacy Protection (iOS 15+) faz download das imagens em proxy, distorcendo:

• Métricas de "abertura" (tudo conta como aberto, mesmo sem ação real)
• Geolocalização (todos aparecem dos servidores Apple)

Não há solução — basta saber que open rate de iOS 15+ é menos confiável.

Mensagem em modo escuro

Apple Mail respeita prefers-color-scheme. Use:

@media (prefers-color-scheme: dark) {
  /* paleta dark */
}

ShopIA inclui automaticamente.

Testando em cada cliente

Idealmente, mande envio de teste para contas suas em:

• Gmail (web + app)
• Outlook (desktop e web)
• Apple Mail (iPhone)
• Yahoo (se relevante para seu público)

Se não tem conta em todos, use ferramenta tipo Litmus (paga) ou Mailtrap.

Métricas de render

ShopIA não mede render diretamente, mas indicadores indiretos:

• Open rate por client (Gmail vs Outlook)
• Click-through rate
• Reply rate
• Reclamações de spam

Quedas grandes em Outlook após mudança de template = bug provável de render.

Boas práticas universais

• Texto sempre acompanhado de design (não dependa só de imagem)
• Largura máxima 600px
• CSS inline + media queries para mobile
• Imagens com alt text
• CTAs grandes (mínimo 44x44px) para mobile
• Texto pretos sobre fundos claros (e versão dark)
• Evite vídeo embarcado (suporte limitado)

Newsletter DNA-aware do ShopIA

Newsletter gerada por IA com DNA da marca usa template testado em todos os clientes principais. Você confirma a paridade entre preview e envio real ao usar enviar teste.

Detalhes em Newsletter DNA-aware.

Quando o render quebra mesmo assim

• Cliente de email obscuro: aceita degradação graceful (mostra texto sem CSS).
• Modo escuro manual do cliente: cliente força inverter — você não controla.
• Acessibilidade leitor de tela: priorize alt text e ordem semântica.

Veja também

• Email: preview HTML antes de enviar
• Email cabeçalhos técnicos
• Newsletter DNA-aware: IA com sua identidade