# Firma email: design di banner 600×200 leggeri [Canonical HTML page](https://gradiently.design/it/guide/email-signature-design) La tua firma esce con ogni email che invii, il che la rende il design più visto che possiedi. Ecco come farne una curata, veloce da caricare e che non diventi mai una graffetta. ## The short version - Una buona firma email tiene nome, ruolo e recapiti come testo vero e aggiunge al massimo un piccolo banner immagine. - Un banner per firma funziona bene a 600×200 pixel, una striscia 3:1 che sta nei layout email più stretti. - Esportare il banner al doppio della dimensione, 1200×400, e mostrarlo largo 600 pixel lo mantiene nitido sugli schermi ad alta densità. - Molti client email bloccano le immagini finché chi legge non le consente, quindi nulla di essenziale deve esistere solo dentro il banner. - Un'immagine ospitata con un indirizzo https completo mantiene leggera ogni email, mentre un'immagine incollata spesso viene inviata come allegato in ogni messaggio. 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. | Elemento | Formato | Note | | --- | --- | --- | | Nome | Testo, in grassetto | L'unica cosa che deve essere più grande | | Ruolo e azienda | Testo | Una riga, separata da una virgola | | Telefono o link di prenotazione | Link di testo | Un solo modo principale di agire, non quattro | | Sito web | Link di testo | Breve e leggibile, senza `https://` | | Banner | Immagine, 600×200 | Facoltativo; porta a una sola pagina | | Icone social | Piccole immagini | Due o tre al massimo, o lasciale | Prima il testo, poi l'immagine. Se ogni immagine non si caricasse, la firma dovrebbe funzionare lo stesso. ## 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. - Banner firma 600×200: 600 × 200 - Intestazione email 1200×600: 1200 × 600 - Biglietto da visita 1050×600: 1050 × 600 Un banner per firma accanto all'intestazione di una newsletter e a un biglietto da visita, in scala. Il banner è una striscia sottile, non un poster. 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](https://gradiently.design/it/guide/email-header-design) 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. Un sottile banner per firma email di uno studio fotografico con la scritta Prenotazioni aperte per i matrimoni di primavera su un gradiente morbido Il banner di un fotografo: una riga di attualità e il nome dello studio. Un banner per firma email che annuncia un webinar gratuito il 12 novembre Una società di consulenza che promuove un solo evento. Quando è finito, cambia la riga. ### Evita - Recapiti solo dentro l'immagine - Un banner di varie centinaia di kilobyte - GIF animate che si ripetono all'infinito - Citazioni, avvertenze legali e cinque icone social - Piccolo testo grigio che sparisce in modalità scura ### Fai - Nome e link come testo vero - Un banner leggero 600×200, sotto i 100 KB - Un'immagine statica, o al massimo un solo ciclo delicato - Un solo invito all'azione - Un banner con il proprio sfondo, che si legge in modalità chiara e scura 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](https://gradiently.design/it/guide/dark-mode-design) e [i gradienti nelle email](https://gradiently.design/it/guide/gradients-in-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. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Dati come testo vero, un banner ospitato mostrato a 600×200 da un file 1200×400, con un testo alternativo che ha senso anche se le immagini sono bloccate. > **Ospita l'immagine, non incollarla** Quando incolli o carichi un'immagine direttamente in una firma, alcune app di posta la inviano come allegato in ogni messaggio, e compare come una graffetta e riempie le caselle. Collegare un'immagine sul tuo sito con un indirizzo https completo lo evita. ## Configurare la firma, passo dopo passo 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. **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. **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. **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. **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. **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](https://gradiently.design/it/guide/brand-consistency), 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](https://gradiently.design/it/guide/business-card-design), così una risposta nella casella di qualcuno sembra inconfondibilmente parte del resto del tuo brand. ## FAQ ### Che dimensione deve avere un banner per la firma email? Disegnalo a 600×200 pixel. Esporta a 1200×400 e imposta la larghezza dell'immagine a 600 così resta nitido sugli schermi ad alta densità. ### Quanto deve pesare il file di un'immagine per la firma email? Tienilo ben sotto i 100 KB. L'immagine viene inviata o caricata con ogni email e ogni risposta, quindi un file pesante si accumula in fretta. ### Perché l'immagine della mia firma email appare come allegato? Alcune app di posta allegano le immagini incollate o caricate a ogni messaggio. Ospita invece l'immagine sul tuo sito e collegala con un indirizzo https completo. ### Devo mettere il mio numero di telefono nell'immagine della firma? No. Molti client email bloccano le immagini di default, e il testo dentro un'immagine non si può toccare né copiare. Tieni i recapiti come testo vero. ### Posso usare una GIF animata nella firma email? Puoi, ma tienila piccola e discreta. Un'animazione in ciclo su ogni email di un lungo thread diventa presto fastidiosa, e alcuni client mostrano solo il primo fotogramma.