Gerador de assinatura de e-mail que não quebra no Outlook

Para quem é esta página: quem precisa montar a própria assinatura, ou padronizar a de uma equipe inteira, e não quer descobrir depois que ela desmonta na metade dos destinatários. Se o que você quer é montar os parâmetros de campanha de um link qualquer, e não a assinatura toda, vá direto ao gerador de utm. Se a pergunta é sobre testar assunto de e-mail, e não sobre o rodapé da mensagem, o caminho é a calculadora de amostra para teste A/B de e-mail. As três ferramentas olham para partes diferentes do mesmo envio: uma monta o link medido, uma decide o tamanho do teste, e esta aqui monta o bloco que viaja no fim de toda mensagem.

A assinatura é o único anúncio que você exibe todo dia sem pagar

Uma pessoa que trabalha com e-mail manda algo entre 30 e 40 mensagens por dia útil. Em um time de dez pessoas isso dá perto de 7 mil exibições por mês de um bloco que quase ninguém desenha com intenção, ninguém mede e quase sempre foi copiado de alguém que já tinha copiado de outra pessoa. Não existe outro espaço com esse volume e esse custo zero dentro de uma empresa.

Só que duas coisas costumam estar erradas nesse bloco ao mesmo tempo. A primeira é técnica: ele foi montado com HTML de página web e desmonta no Outlook. A segunda é de medição: os links não têm parâmetro nenhum, então todo clique que sai dali aparece no relatório como tráfego direto, e a conclusão inevitável é que a assinatura não traz visita, quando na verdade ninguém nunca soube.

Esta ferramenta resolve as duas no mesmo passo, e mostra o resultado em números em vez de prometer.

Como usar

1. Preencha nome, cargo e empresa. A prévia é redesenhada a cada tecla e já começa com um exemplo funcionando.
2. Ajuste os contatos. O e-mail vira link de envio, e o telefone com o código do país vira link de discagem no celular, que é a diferença entre a pessoa ligar e a pessoa copiar o número à mão.
3. Aponte o logotipo para um arquivo público em https e escreva o texto alternativo. Cliente de e-mail não carrega imagem local nem imagem insegura, e metade deles bloqueia imagem por padrão.
4. Escolha o modelo e a cor de destaque. O contraste da cor sobre fundo branco é medido ao lado, porque link verde-claro em fundo branco é invisível em tela de celular no sol.
5. Deixe a marcação de utm ligada e clique em copiar a assinatura pronta. Cole no Gmail, no Outlook ou no Apple Mail. Se a sua TI pede o código, use copiar HTML.

Como funciona: as quatro regras da saída

Não há mágica nenhuma aqui. O bloco sai de quatro decisões, todas visíveis no resultado:

A nota é a soma de 12 checagens com peso fixo, de 100 pontos no total: nome (10), cargo e empresa (10), e-mail clicável (10), telefone clicável (8), site em https absoluto (10), imagens seguras (10), peso do bloco (12), tamanho do aviso legal (6), contraste (8), links medidos (6), assinatura enxuta (5) e chamada para ação (5). O peso é a única checagem que dá pontuação parcial: abaixo de 8 KB vale tudo, entre 8 e 25 KB vale metade, acima disso vale zero.

Uma decisão que merece explicação: assinatura sem imagem nenhuma não perde ponto. É a mais leve e a que nunca quebra, e tratá-la como erro seria empurrar todo mundo para o logotipo. O que perde ponto é ter imagem e ela estar em http, larga demais ou sem texto alternativo, porque aí ela quebra de verdade.

Exemplo trabalhado (reproduz o resultado padrão)

O exemplo já carregado é a assinatura de uma pessoa de growth em uma empresa fictícia, com logotipo de 140 pixels, dois links de rede e um botão de agenda. Conferindo o que a ferramenta mostra, número por número:

• Nota: 95, faixa A, com uma ressalva na lista de avisos.
• Peso do bloco: 2,3 kB, bem abaixo dos 8 KB da faixa cheia e a uma distância confortável do corte de 102 KB do Gmail.
• Linhas de texto: 7, contra o limite de 6. É exatamente a ressalva: o endereço é o sétimo bloco.
• Links clicáveis: 6. São e-mail, telefone, site, LinkedIn, Instagram e o botão.
• Contraste: 6,49:1, acima do mínimo de 4,5:1 da WCAG para texto pequeno.

A ressalva no padrão é proposital. A assinatura de exemplo é realista, e uma assinatura realista já nasce passando do ponto: é a checagem que mais gente falha, e ela aparece de cara em vez de ficar escondida atrás de um caso raro. Apague o campo endereço e veja a conta fechar: as linhas caem para 6, o aviso some e a nota vai a 100.

Agora faça mais quatro testes, cada um isolando uma quebra que só aparece depois que a assinatura já está circulando:

• Desligue a marcação de utm. A nota cai de 95 para 89 e o peso cai para 2,0 kB, porque os parâmetros somem dos cinco links. Mais leve e cego: é a troca que quase toda assinatura faz sem perceber.
• Suba a largura do logotipo para 260. A nota cai para 85, com o aviso de que acima de 200 pixels ele empurra o texto para baixo no celular.
• Troque a cor de destaque para #7fd0b0. O contraste despenca de 6,49:1 para 1,82:1, a nota cai para 87 e entra o aviso de legibilidade. A cor continua bonita na tela do computador, e é justamente esse o problema.
• Troque o https do logotipo por http. A nota cai para 85 e a imagem deixa de carregar em cliente de e-mail, que é uma falha silenciosa: no seu navegador ela aparece.

As medidas de referência

Estes são os valores usados pela ferramenta. Alguns são regra publicada, outros são prática de mercado, e a diferença importa na hora de discutir com alguém:

• 102 KB: o ponto em que o Gmail corta a mensagem e esconde o resto atrás do link de ver tudo. É limite de plataforma, não estimativa.
• 4,5:1: contraste mínimo de texto pequeno sobre o fundo, pela WCAG 2.1 nível AA. Também é regra publicada.
• 8 KB e 25 KB: as faixas de peso da assinatura. São critério nosso, calibrado pelo efeito da repetição em uma thread longa, não número oficial de ninguém.
• 200 pixels de logotipo e 120 de foto: prática de mercado, pensada na largura útil de um celular em retrato.
• 300 caracteres de aviso legal e 6 linhas de texto: também critério nosso, e os dois mais discutíveis da lista. Eles existem para você decidir com um número na frente em vez de no olho.

Como interpretar cada número

A nota mede o que está sob o seu controle: a assinatura está completa, é clicável, é leve e sobrevive ao Outlook. Ela não promete que todo cliente de e-mail vai exibir o bloco pixel a pixel, porque isso depende de motores de renderização que ninguém controla, e qualquer ferramenta que prometa isso está vendendo o que não existe.

O peso do bloco é o número mais subestimado da lista. Ele parece irrelevante em 2,3 kB, e é mesmo, em uma mensagem. O problema aparece quando você multiplica por dez respostas na mesma thread e soma a assinatura de quem responde do outro lado. É por isso que a faixa cheia é tão apertada.

As linhas de texto contam blocos, não linhas visuais. Isso é de propósito: a mesma assinatura ocupa três linhas no computador e sete no celular, e contar o que se vê na tela daria um número diferente por dispositivo. Contar blocos dá o mesmo número em qualquer lugar e é o que você realmente decide.

O contraste usa o fundo branco porque é o fundo do corpo de e-mail em praticamente todo cliente. Em tema escuro a conta muda, e aí vale a ressalva: cor de destaque muito clara ou muito escura sofre em um dos dois modos, e o meio do caminho é o que sobrevive nos dois.

Limites conhecidos

O maior limite é que nenhuma ferramenta consegue prever o comportamento de todo cliente de e-mail. Outlook 2016, Outlook para Mac, Outlook na web e o novo Outlook são quatro renderizadores diferentes com o mesmo nome, e isso antes de entrar Gmail em aplicativo e no navegador, Apple Mail, Thunderbird, Superhuman e os clientes corporativos. A tabela com estilo inline é o denominador comum que sobrevive a todos, e é por isso que ela é a única saída oferecida aqui, mas denominador comum não é garantia de pixel.

A ferramenta também não hospeda a sua imagem. Ela recebe o endereço do arquivo e checa se ele é absoluto e seguro, e isso é tudo o que dá para fazer sem servidor no meio do caminho. Se o arquivo estiver atrás de login, em uma pasta privada ou em um domínio que bloqueia acesso externo, a assinatura vai parecer certa no seu navegador e chegar com um quadrado vazio na caixa de quem recebe. Vale testar mandando um e-mail para uma conta sua de outro provedor antes de distribuir para a equipe.

E a nota não é um teste de entregabilidade. Ela olha a estrutura do bloco, não a reputação do seu domínio, a autenticação do seu envio nem o histórico da sua lista. Uma assinatura nota 100 em um domínio sem autenticação continua caindo em spam.

Da assinatura pronta ao clique medido

Depois que o bloco está montado e marcado, a pergunta seguinte é o que acontece com quem clica:

• Para montar parâmetros de campanha de qualquer outro link, e manter o padrão da equipe, use o gerador de utm.
• Se o botão da assinatura leva a uma landing page, passe ela pelo avaliador de landing page antes de brigar por mais cliques para uma página que não converte.
• Para testar assunto de e-mail com a sua lista, veja quantos inscritos por versão o teste exige na calculadora de amostra para teste de e-mail.
• Com um teste no ar, confira o veredito na calculadora de significância estatística em vez de encerrar no primeiro dia bom.

Perguntas frequentes

Por que a minha assinatura fica torta no Outlook?

Porque o Outlook para Windows não renderiza e-mail com um motor de navegador: ele usa o motor de layout do Word. Na prática isso significa que float, flexbox, grid, position e boa parte de margin são ignorados, e o bloco que ficava perfeito no Gmail desmonta ali. A maioria dos geradores gratuitos entrega div com flexbox porque é o que se escreve para a web, e o resultado é uma assinatura que funciona em metade dos destinatários. A saída daqui é tabela com estilo inline, que é o único layout que o Word, o Gmail e o Apple Mail desenham do mesmo jeito. Não existe opção de div nesta ferramenta de propósito: oferecer a opção seria oferecer o erro.

Como coloco essa assinatura no Gmail?

Clique em copiar a assinatura pronta, abra as configurações do Gmail, vá em assinatura e cole no editor com Ctrl+V. O botão copia o bloco como HTML formatado, e não como código, então o que aparece ali é a assinatura montada e não uma parede de tags. Se o seu navegador bloquear a cópia formatada, a ferramenta cai sozinha para a prévia selecionada, que funciona do mesmo jeito. No Outlook do computador o caminho é arquivo, opções, e-mail, assinaturas, e ali também é colar. Em ferramentas que pedem o código, como algumas contas corporativas e assinaturas centralizadas por TI, use o botão copiar HTML e entregue o texto.

Preciso mesmo de utm nos links da assinatura?

Precisa se quiser saber se ela funciona. Sem parâmetro de campanha, todo clique que sai da sua assinatura chega ao relatório como tráfego direto, misturado com quem digitou o endereço na barra. Com utm, a assinatura vira um canal medível, e você descobre uma coisa que quase ninguém mede: quantas visitas por mês vêm de uma equipe que só respondeu e-mail. É a marcação mais barata que existe, porque o volume de envio já está acontecendo de qualquer jeito. Se você quer montar parâmetros para outras campanhas, o gerador de utm cuida do resto.

Logotipo na assinatura atrapalha a entrega?

Uma imagem pequena e hospedada em https não atrapalha. O que atrapalha é o extremo: assinatura que é uma imagem só, sem texto nenhum, aumenta a chance de o filtro tratar a mensagem como promoção, porque não sobra conteúdo para analisar. E imagem pesada atrasa a renderização em conexão ruim. A regra prática é simples: texto de verdade nas linhas de contato, logotipo como complemento, largura abaixo de 200 pixels, arquivo em https e com texto alternativo preenchido, porque metade dos clientes de e-mail bloqueia imagem por padrão e sem alt a pessoa vê um retângulo em branco no lugar da sua marca.

O que é o corte do Gmail e o que a assinatura tem a ver com ele?

O Gmail para de exibir a mensagem quando ela passa de cerca de 102 KB e esconde o resto atrás de um link de ver tudo. Uma assinatura sozinha dificilmente chega perto disso, mas ela não viaja sozinha: em uma thread de dez respostas, a mesma assinatura aparece dez vezes, e é a soma que estoura. É por isso que a ferramenta mostra o peso do bloco em vez de escondê-lo. Abaixo de 8 KB você está seguro em qualquer conversa; acima de 25 KB a assinatura já é a parte mais pesada de uma thread longa.

Devo incluir o aviso legal de confidencialidade?

Depende da sua área e do seu jurídico, e essa parte não é decisão de marketing. O que é decisão de marketing é o tamanho. O aviso se repete em cada resposta da thread, então um texto de três parágrafos vira mais conteúdo do que a conversa inteira depois de algumas trocas. A ferramenta considera até 300 caracteres um tamanho razoável e avisa acima disso. Se o seu jurídico exige um texto longo, uma saída comum é manter uma frase curta na assinatura e apontar para uma página com o texto completo.

Por que a ferramenta reclama quando passo de 6 linhas?

Porque a assinatura compete com a mensagem. Em uma resposta de duas linhas, uma assinatura de nove vira a maior parte da tela, e o efeito é o oposto do pretendido: em vez de reforçar a marca, ela empurra o conteúdo para cima e some do campo de atenção. Seis blocos de texto já cobrem nome, cargo e empresa, contatos, site, redes e chamada. Endereço completo, segundo telefone, prêmios e frases de efeito são o que costuma passar do ponto. A conta é feita por bloco, não por linha visual, então o mesmo número vale em qualquer largura de tela.

A ferramenta guarda ou envia os meus dados?

Não. Tudo roda no seu navegador: os campos não saem desta página, nenhuma URL é visitada, nada é gravado e não existe servidor nosso no meio do caminho. Dá para conferir abrindo a aba de rede do navegador enquanto você digita. Isso importa mais aqui do que na média das ferramentas, porque uma assinatura carrega nome completo, telefone e e-mail corporativo de uma pessoa real, que é exatamente o tipo de dado que não deveria passar pelo servidor de um site gratuito para virar um bloco de HTML.

Continue

Para ir além do rodapé da mensagem, siga pelo guia completo de teste A/B em e-mail marketing, veja como escolher o horário de envio e leia sobre teste A/B de assunto de e-mail.