# Design de assinatura de email: banners 600×200 leves

[Canonical HTML page](https://gradiently.design/pt-pt/guide/email-signature-design)

A tua assinatura segue em cada email que envias, o que faz dela o design mais visto que tens. Aqui fica como fazer uma com ar cuidado, que carrega depressa e nunca se transforma num clipe de anexo.

## The short version

- Um bom design de assinatura de email mantém o teu nome, função e contactos como texto e junta, no máximo, um pequeno banner de imagem.
- Um banner de assinatura funciona bem em 600×200 píxeis, uma faixa 3:1 que cabe nos esquemas de email mais estreitos.
- Exportar o banner com o dobro do tamanho, 1200×400, e apresentá-lo com 600 píxeis de largura mantém-no nítido em ecrãs de alta densidade.
- Muitos clientes de email bloqueiam imagens até o leitor permitir, por isso nada de essencial deve existir só dentro do banner.
- Uma imagem alojada com um endereço https completo mantém cada email leve, ao passo que uma imagem colada é muitas vezes enviada como anexo em cada mensagem.

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.

| Elemento | Formato | Notas |
| --- | --- | --- |
| Nome | Texto, a negrito | A única coisa que deve ser maior |
| Função e empresa | Texto | Uma linha, separada por uma vírgula |
| Telefone ou link de marcação | Link de texto | Uma forma principal de agir, não quatro |
| Site | Link de texto | Curto e legível, sem `https://` |
| Banner | Imagem, 600×200 | Opcional; liga a uma só página |
| Ícones sociais | Imagens pequenas | Dois ou três no máximo, ou dispensa-os |

Primeiro o texto, depois a imagem. Se todas as imagens falhassem, a assinatura devia continuar a funcionar.

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

- Banner de assinatura 600×200: 600 × 200
- Cabeçalho de email 1200×600: 1200 × 600
- Cartão de visita 1050×600: 1050 × 600

Um banner de assinatura ao lado de um cabeçalho de newsletter e de um cartão de visita, à escala. O banner é uma faixa fina, não um cartaz.

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](https://gradiently.design/pt-pt/guide/email-header-design) 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.

Um banner fino de assinatura de email para um estúdio de fotografia com o texto Já a marcar casamentos de primavera sobre um gradiente suave

O banner de um fotógrafo: uma linha oportuna e o nome do estúdio.

Um banner de assinatura de email a anunciar um webinar gratuito a 12 de novembro

Uma consultora a promover um evento. Quando acabar, troca a linha.

### Evitar

- Contactos só dentro da imagem
- Um banner de várias centenas de kilobytes
- GIF animados que se repetem para sempre
- Citações, avisos legais e cinco ícones sociais
- Texto pequeno e cinzento que desaparece no modo escuro

### Fazer

- Nome e links como texto
- Um banner leve de 600×200, abaixo de 100 KB
- Uma imagem fixa, ou no máximo um ciclo suave
- Um só apelo à ação
- Um banner com fundo próprio, para se ler nos modos claro e escuro

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](https://gradiently.design/pt-pt/guide/dark-mode-design) e os [gradientes em email](https://gradiently.design/pt-pt/guide/gradients-in-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.

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

Dados como texto, um banner alojado mostrado a 600×200 a partir de um ficheiro de 1200×400, com texto alternativo que continua a fazer sentido se as imagens forem bloqueadas.

> **Aloja a imagem, não a cole** Quando colas ou carregas uma imagem diretamente numa assinatura, algumas aplicações de correio enviam-na como anexo em cada mensagem, o que aparece como um clipe e enche as caixas de entrada. Ligar a uma imagem no teu próprio site com um endereço https completo evita isso.

## Configurar a assinatura, passo a passo

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. **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. **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. **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. **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. **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](https://gradiently.design/pt-pt/guide/brand-consistency) 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](https://gradiently.design/pt-pt/guide/business-card-design), por isso uma resposta na caixa de entrada de alguém parece inconfundivelmente igual ao resto da tua marca.

## FAQ

### Que tamanho deve ter um banner de assinatura de email?

Desenha-o com 600×200 píxeis. Exporta em 1200×400 e define a largura da imagem em 600 para se manter nítido em ecrãs de alta densidade.

### Que peso deve ter o ficheiro de imagem de uma assinatura de email?

Mantém-no bem abaixo de 100 KB. A imagem é enviada ou carregada com cada email e cada resposta, por isso um ficheiro pesado soma depressa.

### Porque é que a imagem da minha assinatura de email aparece como anexo?

Algumas aplicações de correio anexam as imagens coladas ou carregadas a cada mensagem. Aloja a imagem no teu site e liga a ela com um endereço https completo.

### Devo pôr o meu telefone na imagem da assinatura?

Não. Muitos clientes de email bloqueiam imagens por defeito, e o texto dentro de uma imagem não se pode tocar nem copiar. Mantém os contactos como texto.

### Posso usar um GIF animado na assinatura de email?

Podes, mas mantém-no pequeno e subtil. Uma animação em ciclo em cada email de uma conversa longa torna-se depressa uma distração, e alguns clientes mostram só o primeiro fotograma.