Design de assinatura de email: banners 600×200 leves

Um bom design de assinatura de email é sobretudo contenção: o teu nome, função e uma ou duas formas de te contactarem como texto verdadeiro e depois um pequeno banner de 600×200 píxeis que leva a tua marca. Mantém o banner leve, liga-o a uma só página e nunca ponhas o teu telefone ou endereço de email só dentro da imagem, porque muitas caixas de entrada escondem as imagens até o leitor dizer o contrário.

O que pertence a uma assinatura de email

Uma assinatura tem dois trabalhos: dizer às pessoas quem és e como te contactar, e lembrá-las do que fazes. O primeiro trabalho é texto. O segundo pode ser um banner. Tudo o que passe disso é confusão que as pessoas aprendem a saltar.

Tamanho e peso do banner da assinatura de email

Desenha o banner com 600×200 píxeis, uma faixa 3:1. Seiscentos píxeis é a largura em torno da qual se constroem os modelos de email clássicos, por isso um banner desse tamanho cabe na aplicação de correio de um telemóvel e no painel de leitura de um computador sem redimensionar. Para ecrãs de alta densidade, exporta o mesmo design com o dobro do tamanho, 1200×400, e diz ao email para o mostrar com 600 píxeis de largura.

O peso importa mais do que se pensa, porque a imagem viaja com cada resposta numa conversa longa. Aponta para um ficheiro bem abaixo de 100 KB. Um banner de gradiente exporta lindamente como JPEG de alta qualidade; usa PNG só quando precisas de transparência ou de letras muito finas. Se também fazes uma newsletter, o guia de design de cabeçalhos de email trata do formato maior.

Desenhar o banner

Um banner visto cem vezes por semana deve dizer uma só coisa e dizê-la com calma. Funciona melhor como uma promoção discreta: o teu próximo evento, um novo serviço, um link de marcação, ou simplesmente o aspeto da tua marca com uma linha curta. Muda as palavras com a estação; mantém o fundo.

O modo escuro é uma armadilha a sério. Algumas aplicações de correio invertem ou tingem as cores claras, por isso um logótipo sobre fundo transparente pode desaparecer numa caixa de entrada escura. Um banner que leva o seu próprio fundo completo, como um gradiente rico, fica igual nos dois modos. O design em modo escuro e os gradientes em email aprofundam a forma como os clientes tratam a cor.

HTML para uma assinatura de email que aguenta

Os clientes de email são antiquados no esquema, por isso as assinaturas constroem-se com tabelas simples e estilos em linha. Esta funciona nos clientes comuns: cola-a num ficheiro HTML, abre-o num browser, seleciona tudo e copia para as definições de assinatura da tua aplicação de correio.

<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>

Configurar a assinatura, passo a passo

1. 1

   Escreve o bloco de texto

   Nome, função e empresa, um link para agir, o teu site. Lê em voz alta; corta o que não dirias.

2. 2

   Desenha o banner em 600×200

   Usa o fundo da tua marca e uma linha curta. Mantém as palavras ao meio, com espaço nas duas pontas.

3. 3

   Exporta em 1200×400

   Um JPEG de alta qualidade para gradientes e fotografias, PNG para transparência. Confirma que o ficheiro fica abaixo de 100 KB.

4. 4

   Carrega-o para o teu site

   Põe-no numa pasta estável, como /email/, para o endereço nunca mudar e os emails antigos manterem o banner.

5. 5

   Constrói e cola o HTML

   Adapta o código acima, define a largura em 600, escreve um texto alternativo a sério e cola-o na tua aplicação de correio.

6. 6

   Testa como deve ser

   Envia-o para um endereço Gmail e um Outlook, abre-o num telemóvel, liga e desliga o modo escuro e responde duas vezes à conversa.

Manter coerentes as assinaturas de uma equipa

As assinaturas desviam-se: uma pessoa junta uma citação, outra usa o logótipo do ano passado. Dá à equipa um só modelo HTML e um só banner e muda o banner centralmente quando a mensagem mudar. A mesma disciplina descrita na coerência da marca aplica-se aqui, num tamanho mais pequeno.

O Gradiently tem um tamanho de Assinatura de email de 600×200 pronto no Studio, e um tamanho personalizado de 1200×400 serve a exportação de alta densidade. As exportações gratuitas levam uma pequena marca de água, por isso um banner limpo precisa do Pro, que traz também o kit de marca: logótipo, cores e tipos de letra num só sítio. O Mark por trás do banner é o mesmo das tuas publicações sociais e dos teus cartões de visita, por isso uma resposta na caixa de entrada de alguém parece inconfundivelmente igual ao resto da tua marca.