assinatura de e-mail em HTML
Uma assinatura de e-mail em HTML precisa sobreviver a um cliente de e-mail, não a um navegador, e a diferença é grande: sem CSS externo, sem tag `<style>`, e sem layout flexível como flexbox, porque o motor de renderização do Outlook para desktop, herdado do Word, ignora tudo isso.
Espaços e o hífen são removidos, mas o sinal de mais do código do país permanece, porque só dígitos e "+" sobrevivem à limpeza.
Como o texto não começa com "http://", "https://" nem "mailto:", a função de normalização adiciona "https://" antes de montar o link.
A linha de redes sociais só aparece quando existe pelo menos um par de rótulo e URL preenchidos, e cada link é separado por um caractere de ponto médio cinza claro.
Copie o HTML, abra o Gmail em Configurações › Ver todas as configurações › Geral › Assinatura, crie uma nova assinatura e cole. O Gmail aceita colar HTML formatado diretamente; salve as alterações no fim da página.
Porque o Outlook para desktop renderiza o corpo do e-mail com o mesmo motor do Word, que não implementa flexbox, grid nem a maior parte do CSS de layout moderno. Tabelas com células (`<td>`) são o único jeito confiável de posicionar foto e texto lado a lado nesse cliente.
Porque vários webmails, entre eles o Gmail, removem blocos `<style>` do `<head>` antes de exibir a mensagem por motivo de segurança. Um atributo `style` embutido em cada `<div>` ou `<a>` sobrevive a essa limpeza porque viaja junto com o próprio elemento.
A célula ou linha da foto simplesmente não é gerada; o HTML final não tem espaço em branco reservado no lugar dela, então a assinatura se ajusta para mostrar só o bloco de identidade e contato.
Alguns campos de configuração de assinatura em clientes de e-mail cortam ou alteram quebras de linha ao colar HTML com formatação de várias linhas. Remover as quebras e espaços extras antes de colar evita que a estrutura da tabela seja corrompida nesse processo.
Ana Souza Product Designer · Acme Studio |
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;"><tr><td style="vertical-align:top; border-left:3px solid #4f46e5; padding-left:16px;"><div style="font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1a1a1a;">Ana Souza</div><div style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#4f46e5; font-weight:bold; margin-top:2px;">Product Designer · Acme Studio</div><div style="margin-top:8px;"><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">T</span> <a href="tel:+5511999990000" style="color:#555; text-decoration:none;">+55 11 99999-0000</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">E</span> <a href="mailto:[email protected]" style="color:#555; text-decoration:none;">[email protected]</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">W</span> <a href="https://acme.com" style="color:#555; text-decoration:none;">acme.com</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">A</span> São Paulo, BR</div></div><div style="margin-top:8px;"><a href="https://linkedin.com/in/ana" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#4f46e5; text-decoration:none; font-weight:bold;">LinkedIn</a><span style="color:#cccccc;"> · </span><a href="https://instagram.com/ana" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#4f46e5; text-decoration:none; font-weight:bold;">Instagram</a></div></td></tr></table>A assinatura é montada inteiramente no seu navegador. Nenhum dado é enviado a servidores; a foto é referenciada pela URL que você informar.