Firma email: design di banner 600×200 leggeri

Una buona firma email è soprattutto sobrietà: il tuo nome, il ruolo e uno o due modi per raggiungerti come testo vero, poi un solo piccolo banner di 600×200 pixel che porta il tuo brand. Tieni il banner leggero, collegalo a una sola pagina e non mettere mai il tuo numero di telefono o indirizzo email solo dentro l'immagine, perché molte caselle nascondono le immagini finché chi legge non dice altrimenti.

Cosa va in una firma email

Una firma ha due compiti: dire alle persone chi sei e come raggiungerti, e ricordare loro cosa fai. Il primo compito è testo. Il secondo può essere un banner. Tutto il resto è disordine che la gente impara a saltare.

Dimensione e peso del banner per la firma email

Disegna il banner a 600×200 pixel, una striscia 3:1. Seicento pixel è la larghezza attorno a cui sono costruiti i template email classici, quindi un banner di quella misura sta nell'app di posta di un telefono e nel pannello di lettura di un desktop senza ridimensionarsi. Per gli schermi ad alta densità, esporta lo stesso design al doppio della dimensione, 1200×400, e di' all'email di mostrarlo largo 600 pixel.

Il peso conta più di quanto pensi, perché l'immagine viaggia con ogni risposta in un lungo thread. Punta a tenere il file ben sotto i 100 KB. Un banner a gradiente si esporta splendidamente come JPEG di alta qualità; usa il PNG solo quando serve la trasparenza o un lettering molto fine. Se fai anche una newsletter, la guida sul design dell'intestazione email tratta il formato più grande.

Disegnare il banner

Un banner visto cento volte a settimana dovrebbe dire una cosa sola e dirla con calma. Funziona meglio come promozione discreta: il tuo prossimo evento, un nuovo servizio, un link di prenotazione, o semplicemente l'aspetto del tuo brand con una breve riga. Cambia le parole con la stagione; mantieni lo sfondo.

La modalità scura è una vera trappola. Alcune app di posta invertono o tingono i colori chiari, quindi un logo su sfondo trasparente può sparire in una casella scura. Un banner con un proprio sfondo pieno, come un gradiente ricco, appare uguale in entrambe le modalità. Il design in modalità scura e i gradienti nelle email approfondiscono come i client trattano il colore.

HTML per una firma email che regge

I client email sono all'antica sull'impaginazione, quindi le firme si costruiscono con semplici tabelle e stili inline. Questa funziona nei client più comuni: incollala in un file HTML, aprilo in un browser, seleziona tutto e copialo nelle impostazioni della firma della tua app di posta.

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

Configurare la firma, passo dopo passo

1. 1

   Scrivi il blocco di testo

   Nome, ruolo e azienda, un link su cui agire, il tuo sito. Leggilo ad alta voce; taglia tutto ciò che non diresti.

2. 2

   Disegna il banner a 600×200

   Usa lo sfondo del tuo brand e una breve riga. Tieni le parole al centro con spazio alle due estremità.

3. 3

   Esporta a 1200×400

   Un JPEG di alta qualità per gradienti e foto, PNG per la trasparenza. Controlla che il file sia sotto i 100 KB.

4. 4

   Caricalo sul tuo sito

   Mettilo in una cartella stabile come /email/, così l'indirizzo non cambia mai e le vecchie email mantengono il loro banner.

5. 5

   Costruisci e incolla l'HTML

   Adatta il codice qui sopra, imposta la larghezza a 600, scrivi un vero testo alternativo e incollalo nella tua app di posta.

6. 6

   Provalo davvero

   Invialo a un indirizzo Gmail e a uno Outlook, aprilo su un telefono, attiva e disattiva la modalità scura e rispondi due volte al thread.

Mantenere coerenti le firme di un team

Le firme si disperdono: una persona aggiunge una citazione, un'altra usa il logo dell'anno scorso. Dai al team un solo template HTML e un solo banner, e cambia il banner a livello centrale quando cambia il messaggio. Qui vale la stessa disciplina descritta in coerenza del brand, in scala ridotta.

Gradiently ha già nello Studio la dimensione Firma email da 600×200, e una dimensione personalizzata 1200×400 copre l'esportazione ad alta densità. Le esportazioni gratuite portano una piccola filigrana, quindi un banner pulito richiede Pro, che porta anche il brand kit: logo, colori e font in un unico posto. Il Mark dietro il banner è lo stesso dei tuoi post social e dei tuoi biglietti da visita, così una risposta nella casella di qualcuno sembra inconfondibilmente parte del resto del tuo brand.