Design de assinatura de e-mail: banners de 600×200 leves

Um bom design de assinatura de e-mail é, em grande parte, contenção: seu nome, cargo e uma ou duas formas de contato como texto de verdade e, depois, um banner pequeno de 600×200 pixels que carrega a sua marca. Mantenha o banner leve, ligue-o a uma única página e nunca coloque seu telefone ou e-mail só dentro da imagem, porque muitas caixas de entrada escondem imagens até o leitor dizer o contrário.

O que entra numa assinatura de e-mail

Uma assinatura tem duas funções: dizer quem você é e como falar com você, e lembrar o que você faz. A primeira função é texto. A segunda pode ser um banner. O que passar disso é ruído que as pessoas aprendem a ignorar.

Tamanho e peso do banner de assinatura de e-mail

Crie o banner com 600×200 pixels, uma faixa 3:1. Seiscentos pixels é a largura em torno da qual os templates clássicos de e-mail são feitos, então um banner desse tamanho cabe no app de e-mail do celular e no painel de leitura do computador sem ser redimensionado. Para telas de alta densidade, exporte o mesmo design em dobro, 1200×400, e peça ao e-mail que o mostre com 600 pixels de largura.

O peso importa mais do que parece, porque a imagem viaja em cada resposta de uma conversa longa. Procure manter o arquivo bem abaixo de 100 KB. Um banner em gradiente exporta muito bem como JPEG de alta qualidade; use PNG só quando precisar de transparência ou de letras muito finas. Se você também faz newsletter, o guia de design de cabeçalho de e-mail cobre o formato maior.

Como desenhar o banner

Um banner visto cem vezes por semana deve dizer uma coisa só e dizer com calma. Funciona melhor como uma promoção discreta: seu próximo evento, um serviço novo, um link de agendamento ou simplesmente o visual da sua marca com uma frase curta. Troque as palavras conforme a estação e mantenha o fundo.

O modo escuro é uma armadilha real. Alguns apps de e-mail invertem ou escurecem cores claras, então um logo sobre fundo transparente pode sumir numa caixa de entrada escura. Um banner que carrega seu próprio fundo completo, como um gradiente rico, fica igual nos dois modos. Design para modo escuro e gradientes em e-mail aprofundam como os clientes tratam a cor.

HTML para uma assinatura de e-mail que não quebra

Os clientes de e-mail são antiquados com layout, então as assinaturas são feitas com tabelas simples e estilos em linha. Esta funciona nos clientes mais comuns: cole em um arquivo HTML, abra no navegador, selecione tudo e copie para as configurações de assinatura do seu app de e-mail.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>

Configurando sua assinatura, passo a passo

1. 1

   Escreva o bloco de texto

   Nome, cargo e empresa, um link para agir, seu site. Leia em voz alta e corte o que você não diria.

2. 2

   Crie o banner em 600×200

   Use o fundo da sua marca e uma frase curta. Deixe as palavras no meio, com espaço nas duas pontas.

3. 3

   Exporte em 1200×400

   JPEG de alta qualidade para gradientes e fotos, PNG para transparência. Confira se o arquivo tem menos de 100 KB.

4. 4

   Envie para o seu site

   Coloque numa pasta estável, como /email/, para o endereço nunca mudar e os e-mails antigos manterem o banner.

5. 5

   Monte e cole o HTML

   Adapte o código acima, defina a largura como 600, escreva um texto alternativo de verdade e cole no seu app de e-mail.

6. 6

   Teste direito

   Envie para um endereço do Gmail e outro do Outlook, abra no celular, ative e desative o modo escuro e responda à conversa duas vezes.

Como manter as assinaturas de uma equipe consistentes

As assinaturas se desviam: uma pessoa acrescenta uma citação, outra usa o logo do ano passado. Dê à equipe um template HTML e um banner e troque o banner de forma centralizada quando a mensagem mudar. A mesma disciplina descrita em consistência de marca vale aqui, em menor escala.

O Gradiently tem o tamanho Assinatura de e-mail de 600×200 pronto no Studio, e um tamanho personalizado de 1200×400 cobre a exportação em alta densidade. As exportações gratuitas levam uma pequena marca d’água, então um banner limpo exige o Pro, que também traz o kit de marca: logo, cores e fontes num só lugar. O Mark por trás do banner é o mesmo das suas publicações em redes sociais e dos cartões de visita, então uma resposta na caixa de entrada de alguém tem inconfundivelmente a cara do resto da sua marca.