Questo articolo illustra le migliori pratiche per progettare firme email che vengano visualizzate in modo coerente su diversi client di posta elettronica e dispositivi.
Per garantire i migliori risultati nella creazione di una firma email in Exclaimer, segui le raccomandazioni di design riportate di seguito. Queste linee guida aiutano a evitare problemi comuni di rendering in Outlook, Gmail e client email mobili.
Linee guida per il design
Per assicurarti che le firme vengano visualizzate correttamente su tutti i client di posta, segui queste linee guida:
- Usa larghezze consigliate, sia per il modello della firma che per elementi ampi come i banner.
- Usa tabelle per il layout
- Carica le immagini alla dimensione reale
- Scegli formati di file supportati
- Considera come la firma apparirà sui dispositivi mobili
- Evita di copiare e incollare testo - inserisci il testo direttamente oppure, se è necessario incollare, incolla come testo semplice senza formattazione.
- Applica formattazioni e scelte di stile come font e colori (o altre opzioni dal pannello Proprietà) prima agli strati esterni, poi alle tabelle interne, celle o gruppi. Per maggiori informazioni su come considerare le parti interne ed esterne di un modello, vedi Bordi colorati, raggruppamento e proprietà ereditate nel Signature Designer.
Standard di design consigliati
Questi standard aiutano a garantire che le firme vengano visualizzate in modo coerente su tutte le piattaforme email. La tabella seguente elenca le nostre raccomandazioni per gli aspetti comuni del design:
| Caratteristica del design | Raccomandazione |
|---|---|
| Larghezza della firma | 320–600 px (consigliati 450 px) |
| Metodo di layout | Tabelle |
| Larghezza immagine Banner | Massimo 600 px |
| Dimensionamento immagine | Adatta la dimensione del file immagine alla dimensione di visualizzazione. Usa solo fino a un massimo di 300 dpi per i migliori risultati |
| Formati supportati | JPG, JPEG, PNG, GIF |
| Spaziatura | Usa il padding per distanziare gli elementi e/o aggiungere spazio tra la tua firma e il corpo dell'email. |
Best practice
Layout
Segui queste linee guida di layout per garantire chiarezza, coerenza e leggibilità:
- Usa le tabelle per strutturare il tuo layout.
- Puoi annidare tabelle e celle di tabella per creare griglie più complesse, ma cerca di evitare sovrapposizioni eccessive con foto degli utenti e forme di sfondo, ad esempio.
- Usa il padding per creare spazio tra gli elementi.
- Puoi impostare una larghezza fissa sia sulle tabelle che sui modelli interi per evitare che la tua firma si ridimensioni su schermi di dispositivi più piccoli.
- Puoi allungare alcuni elementi o creare design ampi per adattarli alla larghezza del tuo modello.
Caratteri
Scelte dei caratteri
Alcuni font non sono disponibili su dispositivi o sistemi operativi diversi. Questo è particolarmente vero per i font personalizzati. Considera le tue scelte di font e se dovresti impostare una pila di font di riserva per garantire che il tuo design possa sempre visualizzare il testo con un font appropriato.
Per ulteriori informazioni, consulta Differenza tra font personalizzati e pile di font.
Dimensioni dei font
Usa le seguenti dimensioni dei font per mantenere la leggibilità e un aspetto professionale:
- 11 pt – 12 pt per testi più grandi (ad esempio: nome, titolo professionale)
- 10 pt – 8 pt per dettagli di contatto (ad esempio: telefono, email, sito web)
- 8 pt – 7 pt per disclaimer e testi legali
Per ulteriori informazioni sulle dimensioni dei font, consulta Come usare valori in pixel e punti nella dimensione dei font.
Immagini
Per un aspetto e una performance ottimali delle immagini:
- Evita di ridimensionare le immagini nel Designer della Firma - invece, carica la tua immagine esattamente nella dimensione in cui vuoi che venga visualizzata. Ad esempio, se vuoi che la tua immagine venga visualizzata a 100x100px, crea o ridimensiona il file immagine a quella dimensione.
- Le immagini possono essere incorporate o collegate:
- Immagini incorporate: Caricate direttamente dal tuo dispositivo nel modello di firma.
- Immagini collegate: Ospitate su un server pubblico e referenziate tramite un URL ospitato nel modello di firma.
Per ulteriori raccomandazioni sulle immagini e risoluzione dei problemi, consulta Come risolvere problemi di qualità delle immagini.
Sfondi
Considera se un'immagine di sfondo o un colore di sfondo sia la scelta migliore per il tuo design. Consulta Differenza tra immagine di sfondo e colore di sfondo per confrontare i due metodi e decidere quale sia il più adatto.
Compatibilità mobile
Usa queste pratiche per mantenere un layout pulito, semplice e adatto ai dispositivi mobili:
- Mantieni i design compatti e semplici per evitare lo scorrimento orizzontale.
- Testa sempre le firme su dispositivi mobili quando possibile.
- Considera come la modalità scura possa influenzare le tue scelte di colore e altri aspetti dello stile.
Errori comuni
Evita quanto segue quando progetti le firme:
- Usare firme più larghe di 600 px. Questo può causare problemi di visualizzazione su schermi più piccoli.
- Non dimensionare le immagini alle loro dimensioni effettive di visualizzazione. Questo può far apparire le immagini troppo grandi o distorte.
- Non usare tabelle per il layout. I design non strutturati possono essere visualizzati male nei client di posta elettronica. Vedi Differenza tra tabelle e gruppi.
- Usare formati di immagine non supportati. Usa solo JPG, JPEG, PNG o GIF.
- Usare colori o stili non adatti alla modalità scura sui dispositivi.
- Non essere cauti nell'uso dell'IA per generare contenuti, poiché potrebbe non essere possibile replicarli in una firma.
Questi problemi possono causare la visualizzazione di firme disallineate o formattate in modo errato.
Consigli!
- Usa i Brand Kit per applicare immagini, colori e font a più firme.
- Prova a usare Campagne e Dichiarazioni di non responsabilità per aggiungere più contenuti alle tue email.
- Per aggiungere più campi per i dati degli utenti, considera l’uso del Editor dei dettagli utente, Caricamento dettagli utente o attributi personalizzati.
- Per avere qualche idea di stile per i modelli, consulta il nostro Lookbook delle firme per ispirazione.
Per ulteriore assistenza, consulta le nostre risorse della knowledge base Risoluzione dei problemi per problemi di progettazione delle firme.