Gerador de assinatura de e-mail

Pré-visualização

Como adicioná-la ao Gmail ?

Clique em « Copiar a assinatura », depois no Gmail vá em Configurações → Geral → Assinatura. Clique na área da assinatura e cole (Ctrl+V / Cmd+V). O Gmail manterá a formatação.

Como adicioná-la ao Outlook ?

Clique em « Copiar a assinatura », depois no Outlook vá em Configurações → E-mail → Escrever e responder. Clique no editor de assinatura e cole. Para o aplicativo de desktop : Arquivo → Opções → E-mail → Assinaturas → cole no editor.

Por que o e-mail HTML é um lugar tão estranho para projetar

Se você já criou uma assinatura no mundo CSS-e-flexbox de um site e depois a viu desintegrar dentro de um e-mail, encontrou o problema central: não existe um único "motor de renderização de e-mail." Cada cliente de e-mail principal usa código diferente para exibir HTML, e as regras do que funciona estão décadas atrás da web moderna. O Gmail remove a maior parte do CSS que vive fora do atributo style do elemento, o Apple Mail usa WebKit (então é razoavelmente moderno), e o Outlook para Windows renderiza e-mails HTML usando o motor HTML do Microsoft Word desde o Outlook 2007, o que significa que flexbox, grid, seletores modernos, fontes web, e a maioria das animações CSS simplesmente não funcionam. O placar de compatibilidade em caniemail.com rastreia tudo isso e é uma leitura desanimadora.

A consequência prática: as assinaturas de e-mail HTML são projetadas contra o menor denominador comum. O código que este gerador emite usa estilos inline e um layout baseado em tabelas, a única combinação que sobrevive à viagem através do Outlook desktop, Outlook 365 web, Gmail, Apple Mail, Yahoo, iCloud e dos vários clientes móveis sem desabar.

O que pertence a uma assinatura moderna

Não existe uma única assinatura "correta," mas os elementos que consistentemente ganham o seu lugar:

• Nome, ligeiramente maior e em negrito do que o resto. A primeira coisa que o destinatário deve ver.
• Cargo e empresa, linha secundária, cor mais clara. Combine numa linha se ambos forem curtos.
• Telefone, embrulhado num link tel: para que um toque no móvel disque.
• E-mail, embrulhado num link mailto:, principalmente por completude; os destinatários já conhecem o seu endereço.
• Site, clicável, frequentemente na cor de destaque da marca.
• Logotipo ou foto, tipicamente 60 a 100 px quadrado ou um banner de 150×40. Não vá maior; imagens grandes incham cada e-mail enviado.
• Ícones sociais, 24 a 32 px, dois ou três no máximo. LinkedIn, X, GitHub, às vezes Instagram, combine com o que o seu público usa.

Opcional, cada vez mais comum desde 2020: pronomes (ele/dele, ela/dela, elu/delu) na mesma linha que o cargo.

O que deixar de fora

• Citações inspiradoras. Os destinatários consistentemente as consideram pouco profissionais em pesquisas; poucas pessoas querem uma assinatura corporativa seguida de Gandhi.
• Adições automáticas do tipo "Enviado do meu iPhone". Os destinatários entendem que o e-mail móvel existe; a linha não adiciona nada.
• Múltiplas fontes. Atenha-se a uma. Misturar fontes em e-mail HTML é pedir ao Outlook para substituir a errada.
• Logotipos pesados acima de 50 KB. Cada e-mail que você envia carrega o peso; assinaturas grandes incham rapidamente as conversas.
• GIFs animados em posições críticas. O Outlook 2007 a 2019 renderiza GIFs animados apenas como o primeiro quadro, projete de acordo.
• Imagens de fundo. O Outlook desktop tem suporte notoriamente bugado para imagens de fundo. Use preenchimentos de cor sólida em vez disso.
• Listas de habilidades ou serviços. Uma assinatura não é um outdoor. Faça link para uma página de perfil se o público precisar saber mais.

Por que tabelas e estilos inline?

Duas realidades de compatibilidade fazem desta a única escolha segura:

1. O Outlook desktop renderiza HTML usando o Microsoft Word. O motor HTML do Word não entende display: flex, display: grid, posicionamento moderno, a maioria das pseudo-classes, ou fontes web além de um par de fontes do sistema. Tabelas com larguras explícitas e preenchimento inline são o que o Word pode dispor de forma confiável.
2. O Gmail remove agressivamente o CSS que vive em um bloco <style> ou folha de estilo externa, mesmo citado em uma resposta de e-mail, essas regras desaparecem. CSS em atributos style="..." em elementos individuais sobrevive.

A combinação, layout de tabela para a estrutura, estilos inline para as regras visuais, produz uma assinatura que parece a mesma no Outlook, Gmail, Apple Mail e nas várias variantes do Outlook web. A saída desta ferramenta segue esse padrão.

Como colá-la onde vai

• Gmail (web): Clique na engrenagem, Ver todas as configurações, Geral, role até Assinatura, Criar nova, clique no editor e cole. O Gmail preserva os estilos inline. Defina como padrão para novos e-mails / respostas e salve as alterações.
• Outlook 365 / Outlook na Web: Configurações (ícone de engrenagem), E-mail, Compor e responder, Assinatura de e-mail, clique no editor e cole. Salve.
• Outlook desktop (Windows): Arquivo, Opções, E-mail, Assinaturas, Nova, dê um nome, cole no editor, salve. Atribua a uma conta padrão se tiver várias.
• Outlook para Mac: Outlook, Preferências, Assinaturas, clique em +, cole.
• Apple Mail: Mail, Configurações, Assinaturas, arraste a assinatura renderizada (ou cole com Editar, Colar). Se a formatação se perder, desmarque "Sempre corresponder à fonte de mensagem padrão" e cole novamente.
• iOS Mail / Outlook iOS: Clientes móveis são mais complicados, cole em um rascunho no desktop, copie do rascunho renderizado, depois cole nas configurações de assinatura do iOS. Colar HTML direto no móvel raramente preserva a formatação.

Opções de hospedagem de imagem

Duas maneiras de incluir uma imagem em uma assinatura, cada uma com compromissos:

• URL de imagem hospedada, o <img src> aponta para uma URL HTTPS publicamente acessível. O cliente de e-mail do destinatário busca a imagem quando ele abre a mensagem, frequentemente após pedir permissão através do aviso "mostrar imagens." Barato, mas cada destinatário aciona uma solicitação ao servidor, e pixels de rastreamento que viajam em imagens de assinatura são uma das formas originais como a análise de taxa de abertura funciona.
• Imagem Base64 inline, a imagem é embutida diretamente no HTML como um URI data:image/...;base64,.... Sobrevive ao encaminhamento limpamente, sem busca externa, mas incha cada e-mail pelo tamanho codificado da imagem e é removida ou alertada pelo Outlook 2007 a 2019 desktop.

A opção confiável para uma assinatura corporativa: uma imagem HTTPS hospedada em tamanho modesto (menos de 30 KB), com o atributo alt preenchido para que se degrade em texto legível quando as imagens são bloqueadas.

Conformidade e requisitos legais

Várias jurisdições exigem legalmente informações específicas em assinaturas de e-mail empresarial:

• Reino Unido, o Companies Act 2006 exige que as sociedades limitadas incluam o nome da empresa registrada, o endereço da sede registrada, o número de registro e o local de registro na correspondência empresarial, incluindo e-mail. Profissionais liberais estão isentos.
• Alemanha, a Telemediengesetz (TMG) tem requisitos semelhantes de Impressum: nome completo e forma da empresa, endereço registrado, informações de contato, tribunal de registro e número de registro, ID de IVA quando aplicável.
• UE mais amplamente, o RGPD não exige especificamente informações de contato em assinaturas, mas uma forma clara de contatar um controlador de dados é parte da conformidade mais ampla e uma assinatura é um lugar natural para isso.
• Indústrias regulamentadas, serviços financeiros, práticas jurídicas, saúde, e outras frequentemente requerem isenções de responsabilidade específicas (avisos de confidencialidade, divulgações legais tipo FCA, avisos relacionados ao HIPAA). Verifique os requisitos do seu setor.

Erros comuns

1. Projetar em uma ferramenta de site e exportar para o e-mail. O CSS moderno não sobrevive no Outlook desktop. Construa para as restrições de e-mail desde o início.
2. Imagens decorativas pesadas. Cada e-mail que você envia (e cada resposta que alguém faz) carrega o peso. Procure menos de 30 KB de peso total de imagem de assinatura.
3. Pular o texto alt nas imagens. Quando as imagens são bloqueadas (padrão do Outlook desktop para remetentes externos), um alt vazio colapsa o layout. Sempre defina texto alt descritivo.
4. Colocar todas as informações de contato na imagem. Se um destinatário bloquear imagens, ele não vê nada. Informações críticas (nome, cargo, telefone) devem estar em texto HTML.
5. URLs longas exibidas por completo. Envolva-as em um link curto ou use texto âncora ("LinkedIn") em vez de https://www.linkedin.com/in/seunome-12345.
6. Citações, slogans e linhas motivacionais. Os destinatários relatam amplamente considerá-las pouco profissionais.
7. Assinaturas diferentes em dispositivos. Defina a mesma assinatura em cada dispositivo do qual você envia e-mail, os destinatários notam a inconsistência em conversas onde você responde do desktop e do móvel.

Perguntas frequentes

Por que minha assinatura parece diferente no Outlook em comparação com o Gmail?

Motores de renderização diferentes. O Outlook desktop usa o motor HTML do Microsoft Word e renderiza muitas propriedades CSS de forma diferente do Apple Mail baseado em WebKit ou dos motores que o Gmail web e o Outlook 365 web usam. A assinatura que esta ferramenta produz é construída para parecer aceitável em todos eles, nunca idêntica, mas sempre reconhecível como a mesma assinatura.

Posso incluir um GIF animado?

Sim, mas o Outlook 2007 a 2019 desktop renderiza GIFs animados apenas como o primeiro quadro. Projete o primeiro quadro para ser autônomo, se sua animação depende de uma sequência para transmitir significado, você perderá metade do seu público. Gmail, Apple Mail e Outlook 365 web reproduzem GIFs normalmente.

Meus dados são carregados em algum lugar?

Não. A assinatura é construída inteiramente no seu navegador. Seu nome, cargo, informações de contato e URLs sociais vão do formulário para a visualização para a área de transferência, nunca para um servidor, nunca para um endpoint de análise, nunca para uma lista de marketing. Muitos sites construtores de assinatura monetizam coletando exatamente esses dados de contato; este não.

Devo incluir uma foto minha?

Opcional. Fotos fazem assinaturas parecerem mais pessoais e calorosas, mas adicionam peso de imagem e disparam o aviso "mostrar imagens" em muitos ambientes corporativos. Uma pequena foto de rosto (60 a 80 px) tende a se sair bem; uma foto do tamanho de um banner não. Se sua função é em grande parte B2C, vendas, sucesso do cliente, recrutamento, uma foto ajuda; em contextos fortemente B2B, nome + cargo é suficiente.

Qual é o aviso legal que algumas empresas usam?

Comum em indústrias regulamentadas (finanças, direito, saúde): "Este e-mail e quaisquer anexos são confidenciais e destinados unicamente ao destinatário. Se você recebeu este e-mail por engano, por favor notifique o remetente e exclua-o." Se é legalmente exigível é debatido por advogados, mas é prática padrão em muitos setores. Empresas do Reino Unido precisam legalmente incluir seu nome registrado, sede registrada, número de registro e local de registro na correspondência empresarial conforme o Companies Act 2006.

Posso ter assinaturas diferentes para respostas diferentes?

A maioria dos clientes principais (Gmail, Outlook, Apple Mail) permite criar múltiplas assinaturas e escolher qual é usada como padrão para novas mensagens e qual (frequentemente uma versão mais curta) para respostas e encaminhamentos. Construa ambas com esta ferramenta e atribua cada uma ao seu lugar nas configurações do cliente.

Ferramentas relacionadas