COMUNICAÇÃO · 04 · E-MAILQuatro modelos renderizados em 1:1, do tamanho exato que chegam na caixa de entrada. Tudo em <table> com estilo inline, porque é o único contrato que o Outlook, o Gmail e o Apple Mail honram ao mesmo tempo. Nenhuma variável CSS entra no corpo do e-mail: lá dentro só existe hex literal.
4.1 · COMUNICADO PARA CLIENTE
|
|
4.2 · INTERNO E RELATÓRIO
|
|
4.3 · O QUE NÃO FUNCIONA EM CLIENTE DE E-MAIL
O corpo de e-mail é renderizado por engines que vão do WebKit moderno ao Word do Outlook para Windows. A lista abaixo é o que foi deliberadamente abandonado nestes quatro modelos, com a substituição usada.
gap idem.margin:auto não centraliza de forma confiável.No lugar: tabelas aninhadas com
role="presentation", cellpadding="0",
cellspacing="0" e border="0"; colunas com
width em porcentagem no <td>; centralização por
align="center"; todo espaçamento em padding de célula.
var(--celere-teal)) não
resolvem: caem para transparente ou para o padrão do cliente.No lugar: hex literal inline mais o atributo
bgcolor em dobradinha; régua virou <td> de
1px com cor de fundo; a barra de avanço virou duas células com largura
percentual; o raio fica declarado e degrada para canto reto sem prejuízo
de legibilidade.
font-variant-numeric: tabular-nums não são aplicados, então o
wdth 92 da headline e o tabular explícito somem.text-wrap: pretty não têm suporte, e é justamente o que mata palavra
viúva.px.No lugar: pilha
'Spline Sans Mono', Consolas, 'Courier New', monospace, que já é tabular por
natureza monoespaçada, então o número continua alinhando em coluna; headline em Archivo com
fallback Helvetica e letter-spacing negativo declarado à mão; quebra de linha
controlada com prendendo as duas últimas palavras
de cada bloco.
No lugar: duas versões do mesmo modelo, clara e escura, escolhidas na
hora do envio pela ferramenta de disparo; coluna única de 600 px desenhada para
funcionar sem breakpoint, com max-width:600px para o celular
acomodar sozinho.
::before e
::after) é descartado pelo Gmail, junto com boa parte do
<style> em contas não Google.No lugar: o dado vira texto e célula colorida, que é o formato mais robusto que existe: nenhuma imagem externa, nenhum SVG, e o número continua selecionável, pesquisável e legível por leitor de tela.
No lugar: preheader oculto com
display:none mais max-height:0; botão como
<a> de display:inline-block com padding dentro de
<td> colorido, o padrão à prova de bala; descadastro e endereço sempre no
rodapé do que vai para cliente, e ausentes no comunicado interno, que é
transacional e obrigatório.