Como alinhar todos os e-mails ao manual da marca: um sistema em vez de ajustar cores na mão

Manuais de marca costumam ser escritos para o site, apresentações e impressão: o e-mail quase nunca é descrito à parte. O resultado é que algumas regras funcionam como planejado na caixa de entrada, outras precisam de adaptação e outras não funcionam de jeito nenhum. Vamos ver o que passa direto, o que precisa ser substituído e como definir uma vez um sistema de design para e-mails e parar de ajustar cores na mão a cada envio.

Por que não dá para reaproveitar as regras do site

Um cliente de e-mail não é um navegador. Ele limita o conjunto de propriedades suportadas, substitui fontes e, no modo escuro, pode inverter as cores por conta própria. Uma regra do manual como «os títulos usam a tipografia da marca com entreletras de menos dois por cento» vira um desejo dentro do e-mail: para metade dos destinatários a fonte será uma do sistema.

• fontes personalizadas não carregam em todo lugar e são substituídas pelas do sistema
• pesos finos são lidos com dificuldade em telas móveis
• texto cinza-claro sobre branco pode ficar ilegível após a inversão no modo escuro
• os arredondamentos da marca não aparecem no Outlook clássico sem código extra
• imagens de fundo não são suportadas por todos os clientes

O que passa direto

A boa notícia: o núcleo da identidade da marca chega ao e-mail quase intacto. Esse núcleo é o mínimo que torna um envio reconhecível.

O que precisa ser adaptado

Três parâmetros exigem uma decisão específica para e-mail, e é melhor tomá-la uma vez do que discuti-la a cada campanha.

Primeiro, o par tipográfico. A fonte da marca vem primeiro e, logo atrás, obrigatoriamente uma alternativa do sistema com proporções parecidas. Se a marca se apoia em uma grotesca estreita, uma alternativa melhor que Arial é algo mais próximo em largura; caso contrário o e-mail parecerá estranho para parte dos destinatários.

Segundo, o contraste. Tons claros da marca que ficam bem no site correm o risco de sumir no e-mail, porque alguns clientes invertem as cores no modo escuro. Defina de antemão uma variante de contraste maior para o texto e teste sobre fundo escuro.

Terceiro, o comportamento em tela estreita. Os dados da Litmus mostram que a maioria das aberturas acontece no Apple Mail e no Gmail, e são majoritariamente celulares. Fixe explicitamente os tamanhos de título, os espaçamentos e a altura dos botões para o celular em vez de confiar em escala proporcional.

Como montar um sistema de design para e-mails

A ideia é definir um conjunto de valores uma única vez e depois montar os e-mails a partir dele, em vez de pegar cores com o conta-gotas em cada layout novo. O conjunto mínimo é este:

• cores principal, secundária e de destaque
• cor de fundo do e-mail e cor de fundo dos blocos
• cor do texto e cor do texto secundário
• cor do botão, cor do texto do botão, raio de arredondamento
• par tipográfico com alternativas
• tamanhos de título e de texto para desktop e celular
• espaçamento entre blocos
• largura do contêiner
• tratamento de cabeçalho e rodapé

Com o conjunto definido, qualquer e-mail novo é montado com valores prontos. Trocar a cor de destaque no manual recolore todas as campanhas de uma vez, em vez de virar uma passada manual por trinta modelos.

O modo escuro merece uma seção própria

O modo escuro é onde a identidade da marca mais quebra. Os clientes lidam com ele de formas diferentes: uns invertem as cores sozinhos, outros respeitam suas configurações. Uma versão do logotipo para fundo escuro, contraste suficiente no texto e fundo transparente nas imagens do logotipo resolvem a maior parte do problema.

O novo Outlook acrescenta uma peculiaridade: ele executa um pós-processamento depois que o e-mail carrega e reescreve os estilos inline, o que pode fazer parte do visual se perder. Os desenvolvedores recomendam manter o mesmo raio de arredondamento nos quatro lados e evitar imagens de fundo.

Também já vi meus estilos sumirem de repente do DOM e os encontrei reescritos inline.

Como funciona no Mailvex

No Mailvex o manual da marca não é um documento, e sim um conjunto de valores aplicado automaticamente a todos os blocos do e-mail. Você pode enviá-lo em PDF e ter cores, fontes, logotipo e espaçamentos extraídos do arquivo, preencher um questionário curto ou definir tudo à mão.

A partir daí qualquer modelo da biblioteca é recolorido para o seu estilo com uma única ação. Times e agências podem compartilhar manuais de marca: vários clientes, um conjunto de valores para cada um e troca entre eles sem remontar os e-mails.

Perguntas frequentes

E se não houver manual da marca?

Monte um conjunto mínimo com o que já existe: cores do site, logotipo, tipografia. Isso basta para que os envios pareçam coerentes. O manual completo pode ser escrito depois; a falta de coerência nos e-mails é percebida de imediato.

Posso usar a tipografia da marca no e-mail?

Você pode indicá-la, mas não pode contar com ela. Alguns clientes carregam a fonte personalizada, outros substituem por uma do sistema. Por isso a alternativa é obrigatória e o e-mail precisa ficar digno nos dois casos.

Como uma agência com vários clientes lida com isso?

Mantendo um conjunto de valores por cliente e alternando entre eles. Assim o mesmo modelo de campanha é recolorido para qualquer marca em um minuto, sem remontar o e-mail.