Best practice di design email: la guida completa alle email ad alta conversione
Padroneggia il design delle email con best practice collaudate su layout, tipografia, immagini, ottimizzazione mobile e accessibilità. Con esempi visivi e template per migliorare i risultati dell'email marketing.
Il design delle email incide direttamente sull’apertura, sulla lettura e sull’azione dei tuoi iscritti. Un design scadente porta a email cancellate, disiscrizioni e fatturato perso. Un ottimo design genera engagement, conversioni e fedeltà al brand.
In questa guida completa copriamo tutto ciò che devi sapere sulle best practice di design email, dai fondamentali di layout alle considerazioni avanzate di accessibilità. Che tu stia progettando campagne promozionali, email transazionali o sequence automatizzate, questi principi ti aiuteranno a creare email che performano.
Perché il design email è importante
Prima di entrare nelle best practice, capiamo perché il design delle email merita la tua attenzione.
L’impatto del design sulle performance
| Elemento di design | Impatto sulle metriche |
|---|---|
| Ottimizzazione mobile | +15% di click rate |
| Layout a colonna singola | +22% di leggibilità |
| CTA chiare | +28% di conversioni |
| Design accessibile | +30% di copertura |
| Branding coerente | +33% di riconoscimento |
Il costo di un design scadente
- Il 42% dei destinatari cancella subito le email mal formattate
- Il 69% segnala come spam un’email solo in base all’aspetto
- Il 75% giudica la credibilità del brand dalla qualità del design email
- Chi usa mobile cancella in 3 secondi le email che non si renderizzano correttamente
Parte 1: best practice di layout email
Il fondamento di un design email efficace parte dal layout. Il tuo layout determina come fluisce l’informazione e guida chi legge verso l’azione desiderata.
Layout a colonna singola vs a più colonne
I layout a colonna singola sono lo standard per il design email moderno:
┌─────────────────────────────────┐│ HEADER │├─────────────────────────────────┤│ ││ IMMAGINE HERO ││ │├─────────────────────────────────┤│ ││ COPY PRINCIPALE ││ │├─────────────────────────────────┤│ ││ BOTTONE CTA PRIMARIO ││ │├─────────────────────────────────┤│ ││ CONTENUTO DI SUPPORTO ││ │├─────────────────────────────────┤│ FOOTER │└─────────────────────────────────┘Vantaggi del layout a colonna singola:
- Rendering coerente su tutti i client email
- Flusso di lettura naturale dall’alto al basso
- Responsive automatico su mobile
- Tempi di caricamento più rapidi
- Coerenza del brand più facile da mantenere
Quando usare layout a più colonne:
- Showcase prodotti con più articoli
- Contenuti in stile newsletter con temi vari
- Confronti di feature
- Pubblico B2B prevalentemente desktop
La struttura a piramide rovesciata
La piramide rovesciata guida chi legge verso la CTA in modo naturale:
┌─────────────────────────────────┐│ AMPIO: ATTENZIONE ││ Headline coinvolgente ││ Immagine/copy hero │├───────────────────────────────┬─┤│ MEDIO: INTERESSE │ ││ Informazioni di supporto │ ││ Benefici/feature │ │├─────────────────────────────┬─┼─┤│ STRETTO: AZIONE │ │ ││ Bottone CTA focalizzato │ │ │└─────────────────────────────┴─┴─┘Questa struttura incanala l’attenzione verso la tua call-to-action.
Larghezza ottimale dell’email
Larghezza consigliata: 600-640 pixel
| Larghezza | Caso d’uso | Compatibilità |
|---|---|---|
| 600px | Email standard | Universale |
| 640px | Email con molto contenuto | La maggior parte dei client |
| 480px | Design mobile-first | Priorità mobile |
Email più larghe di 640 pixel possono attivare lo scroll orizzontale su alcuni client, creando una user experience scadente.
White space e respiro
Il white space non è spazio vuoto, è un elemento di design che:
- Migliora la leggibilità del 20%
- Aumenta la comprensione del 25%
- Fa percepire il contenuto come premium
- Guida l’occhio in modo naturale
Linee guida sullo spacing:
- Minimo 20px di padding attorno ai bordi del contenuto
- 30-40px tra sezioni principali
- 15-20px tra i paragrafi
- 10px tra gli elementi di una lista
Best practice di design dell’header
L’header imposta il tono e costruisce il riconoscimento del brand istantaneamente.
Elementi essenziali dell’header:
- Logo - larghezza massima 200px, linkato al sito
- Navigazione (opzionale) - massimo 2-4 link chiave
- Preheader text - estende il subject line, 40-100 caratteri
Template di header:
┌─────────────────────────────────┐│ [LOGO] | Shop | Account │├─────────────────────────────────┤│ Preheader: estendi qui ││ il subject line... │└─────────────────────────────────┘Essenziali del design del footer
I footer gestiscono i requisiti legali e offrono navigazione aggiuntiva:
Elementi obbligatori del footer:
- Indirizzo fisico (requisito CAN-SPAM)
- Link di disiscrizione (chiaramente visibile)
- Link alle preferenze email
- Link alla privacy policy
Elementi opzionali del footer:
- Icone social media
- Link di download dell’app
- Contatti del customer service
- Navigazione secondaria
- Dettagli di registrazione aziendale
Parte 2: tipografia nel design email
La tipografia determina la leggibilità e imposta il tono visivo del brand. La tipografia email richiede considerazioni speciali per le differenze di rendering tra client.
Font stack sicuri per le email
Non tutti i font si renderizzano allo stesso modo sui vari client. Usa font stack con fallback:
Stack sans-serif (moderno, pulito):
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;Stack serif (tradizionale, autorevole):
font-family: Georgia, 'Times New Roman', Times, serif;Web font con fallback:
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;Web font nelle email
I web font migliorano la coerenza del brand ma richiedono pianificazione dei fallback.
Supporto dei web font sui client email:
| Client | Supporto web font |
|---|---|
| Apple Mail | Pieno supporto |
| iOS Mail | Pieno supporto |
| Outlook (Mac) | Pieno supporto |
| Gmail | Nessun supporto |
| Outlook (Windows) | Nessun supporto |
| Yahoo Mail | Parziale |
Approccio di implementazione:
- Definisci il web font come primario
- Includi un font di sistema simile come fallback
- Testa il rendering sui client principali
- Accetta un graceful degradation
Linee guida sulle dimensioni dei font
Dimensioni consigliate:
| Elemento | Desktop | Mobile |
|---|---|---|
| Titoli | 28-36px | 24-28px |
| Sottotitoli | 20-24px | 18-22px |
| Corpo testo | 16-18px | 16px (minimo) |
| Testo secondario | 14-16px | 14px (minimo) |
| Testi legali/footer | 12-14px | 12px |
Non scendere mai sotto i 12px per nessun testo: diventa illeggibile su mobile e crea problemi di accessibilità.
Line height e spaziatura
Una line height corretta migliora significativamente la leggibilità:
Linee guida sulla line height:
- Titoli: 1,1-1,3x la dimensione del font
- Corpo testo: 1,4-1,6x la dimensione del font
- Testo piccolo: 1,5-1,7x la dimensione del font
Esempio:
Corpo testo 16px × line height 1,5 = 24px di interlineaGerarchia del testo
Crea una gerarchia visiva che guidi chi legge attraverso il contenuto:
TITOLO (28px, Bold)Il messaggio più importante
Sottotitolo (20px, Semibold)Contesto di supporto
Corpo testo (16px, Regular)Lorem ipsum dolor sit amet, consectetur adipiscingelit. Qui vanno le informazioni dettagliate.
Testo secondario (14px, Regular, Gray)Dettagli aggiuntivi, timestamp, ecc.Best practice di allineamento
- Titoli: centrati o allineati a sinistra
- Corpo testo: allineato a sinistra (mai giustificato)
- CTA: centrate
- Liste: allineate a sinistra
Evita il testo giustificato nelle email: una spaziatura disomogenea tra le parole rende la lettura difficile.
Parte 3: immagini nel design email
Le immagini catturano l’attenzione e veicolano informazioni velocemente. Ma creano anche potenziali problemi di rendering che richiedono una gestione attenta.
Checklist di ottimizzazione immagini
Prima di aggiungere qualsiasi immagine:
- Comprimi sotto 1MB (idealmente sotto 200KB)
- Imposta attributi espliciti di larghezza e altezza
- Aggiungi un alt text descrittivo
- Usa il formato file appropriato
- Testa con le immagini disabilitate
Formati file immagine
| Formato | Ideale per | Dimensione massima |
|---|---|---|
| JPEG | Foto, gradienti | 200KB |
| PNG | Grafiche, trasparenza | 150KB |
| GIF | Animazioni, grafiche semplici | 500KB |
| SVG | Icone (supporto limitato) | 20KB |
Best practice per l’alt text
L’alt text viene mostrato quando le immagini non si caricano ed è letto dagli screen reader.
Esempi di alt text efficaci:
| Tipo di immagine | Alt text scadente | Alt text buono |
|---|---|---|
| Foto prodotto | ”IMG_001" | "T-shirt in cotone blu, vista frontale” |
| Banner hero | ”Banner" | "Saldi estivi: -30% su tutta la beachwear” |
| Bottone CTA | ”Button" | "Bottone acquista ora” |
| Decorativo | ”Divider" | "" (vuoto per decorativi) |
Linee guida per l’alt text:
- Mantienilo sotto i 125 caratteri
- Descrivi la funzione, non l’aspetto
- Includi il testo chiave presente nell’immagine
- Lascia vuoto per immagini puramente decorative
Immagini responsive
Assicurati che le immagini scalino correttamente tra i device:
<img src="image.jpg" width="600" height="400" alt="Descrizione" style="max-width: 100%; height: auto;">Best practice per l’immagine hero
L’immagine hero imposta il tono visivo dell’intera email:
Specifiche:
- Larghezza: 600px (scala su mobile)
- Altezza: 200-400px
- Dimensione file: sotto 200KB
- Testo in overlay: evita testi critici dentro le immagini
Template di immagine hero:
┌─────────────────────────────────┐│ ││ IMMAGINE HERO ││ (Scatto lifestyle/prodotto) ││ ││ Testo in overlay in HTML, ││ non incorporato nell'immagine ││ │└─────────────────────────────────┘Immagini di background
Le immagini di background aggiungono interesse visivo ma hanno supporto limitato:
Matrice di supporto:
| Client | Supporto immagini di background |
|---|---|
| Apple Mail | Pieno |
| iOS Mail | Pieno |
| Gmail | Pieno |
| Outlook (Windows) | Nessuno |
| Yahoo Mail | Pieno |
Includi sempre un fallback a colore pieno per chi usa Outlook.
Linee guida per le immagini prodotto
Per email e-commerce che presentano prodotti:
- Dimensioni coerenti su tutti i prodotti
- Sfondi bianchi o neutri
- Angolazioni multiple quando possibile
- Larghezza minima 300px per le immagini prodotto
- Link diretti alle schede prodotto
Parte 4: design email per mobile
Con oltre il 60% delle email aperte da mobile, il design mobile-first è essenziale.
Principi di design mobile
L’approccio mobile-first:
- Progetta prima per lo schermo più piccolo
- Impila il contenuto verticalmente
- Ingrandisci i tap target
- Semplifica la navigazione
- Testa su device reali
Tecniche di design responsive
Media query per mobile:
@media screen and (max-width: 600px) { .content { width: 100% !important; padding: 10px !important; } .hide-mobile { display: none !important; }}Design touch-friendly
Dimensioni minime dei tap target:
| Elemento | Dimensione minima |
|---|---|
| Bottoni | 44 x 44 pixel |
| Link | altezza 44px |
| Spaziatura tra link | 10px tra uno e l’altro |
Template del bottone CTA:
┌──────────────────────────────┐│ ││ ACQUISTA ORA ││ │└──────────────────────────────┘ altezza minima 44pxTipografia su mobile
Aggiustamenti dei font su mobile:
- Corpo testo: minimo 16px (evita lo zoom su iOS)
- Titoli: 24-28px
- Line height: +10% su mobile
- Spaziatura tra paragrafi: aumenta per lo scroll con il pollice
Considerazioni sulle immagini mobile
- Usa larghezze fluide (max-width: 100%)
- Riduci il numero di immagini su mobile
- Valuta di nascondere le immagini decorative
- Carica versioni più piccole quando possibile
Checklist di test mobile
- Testa su iOS Mail
- Testa sull’app Gmail (iOS e Android)
- Testa sull’app Outlook
- Verifica che le immagini si carichino su rete cellulare
- Controlla tempo di caricamento sotto i 3 secondi
- Verifica che i tap target siano abbastanza grandi
- Testa il rendering in dark mode
Parte 5: colore nel design email
Il colore comunica emozione, guida l’attenzione e rinforza l’identità di brand. Un uso strategico del colore migliora le performance delle email.
Psicologia del colore nelle email
| Colore | Associazione | Migliore per |
|---|---|---|
| Blu | Fiducia, calma | B2B, finance, tech |
| Verde | Crescita, salute | Eco, wellness, successo |
| Rosso | Urgenza, energia | Saldi, CTA, alert |
| Arancione | Amichevole, azione | CTA, evidenziazioni |
| Viola | Premium, creativo | Lusso, beauty |
| Giallo | Ottimismo, attenzione | Avvisi, evidenziazioni |
Requisiti di contrasto del colore
Standard WCAG 2.1 AA:
- Testo normale: rapporto di contrasto minimo 4,5:1
- Testo grande (18px+): rapporto di contrasto minimo 3:1
- Componenti UI: rapporto di contrasto minimo 3:1
Usa i contrast checker per verificare l’accessibilità:
| Combinazione | Rapporto di contrasto | Pass/Fail |
|---|---|---|
| Nero su bianco | 21:1 | Pass |
| Bianco su blu (#0066CC) | 4,8:1 | Pass |
| Grigio (#777) su bianco | 4,48:1 | Al limite |
| Grigio chiaro (#AAA) su bianco | 2,32:1 | Fail |
Considerazioni sul dark mode
Oltre l’80% degli utenti ha il dark mode attivo. Progetta per entrambe le modalità:
Strategie per il dark mode:
- Immagini trasparenti: usa PNG con sfondo trasparente
- Inversione colori: testa come i colori appaiono invertiti
- Versioni del logo: fornisci varianti chiaro e scuro
- Definizione dei bordi: aggiungi bordi sottili per evitare che gli elementi si fondano
Meta tag per il dark mode:
<meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark">Colori dei bottoni CTA
Le CTA devono spiccare rispetto al contenuto circostante:
Colori di CTA ad alta conversione:
- Colore primario del brand (costruisce riconoscimento)
- Colore accent in contrasto (cattura l’attenzione)
- Arancione/rosso (crea urgenza)
- Verde (associazione ad azione positiva)
Specifiche di design del bottone:
┌──────────────────────────────┐│ ││ TESTO DEL BOTTONE (MAIUSCOLO) │ Sfondo: colore del brand│ │ Testo: bianco o scuro in contrasto└──────────────────────────────┘ Padding: 15px 30px Border radius: 4-8pxParte 6: accessibilità nel design email
Un design email accessibile garantisce che tutti possano interagire con il contenuto, a prescindere dalla loro capacità. È etico e pratico: le email accessibili performano meglio per tutti.
Fondamentali di accessibilità
Principi chiave (WCAG 2.1):
- Percepibile - il contenuto può essere percepito da tutti
- Utilizzabile - l’interfaccia è navigabile e usabile
- Comprensibile - contenuto e funzionamento sono chiari
- Robusto - il contenuto funziona con tecnologie assistive
Compatibilità con gli screen reader
Gli screen reader interpretano le email per chi ha disabilità visive:
Best practice:
- Usa HTML semantico (h1, h2, p, ul)
- Aggiungi role=“presentation” alle tabelle di layout
- Includi l’attributo lang nel tag HTML
- Fornisci testo di link significativo (non “clicca qui”)
- Usa aria-label per elementi complessi
Esempio:
<html lang="it"> <table role="presentation"> <tr> <td> <h1>Saldi estivi</h1> <p>Scopri gli sconti più forti della stagione.</p> <a href="/sale" aria-label="Acquista articoli dei saldi estivi"> Vai ai saldi </a> </td> </tr> </table></html>Navigazione da tastiera
Alcuni utenti navigano le email senza mouse:
- Assicurati che tutti i link siano focusabili
- Mantieni un ordine di tab logico
- Fornisci stati di focus visibili
- Evita keyboard trap
Accessibilità visiva
Per utenti con disabilità visive:
| Requisito | Implementazione |
|---|---|
| Contrasto colore | rapporto minimo 4,5:1 |
| Non affidarsi al solo colore | aggiungi testo/icone |
| Testo ridimensionabile | usa unità relative |
| Indicatori di focus chiari | outline visibili |
| Alt text | descrittivi, concisi |
Accessibilità cognitiva
Per utenti con disabilità cognitive:
- Usa un linguaggio chiaro e semplice
- Spezza il contenuto in sezioni brevi
- Fornisci navigazione coerente
- Evita contenuti lampeggianti
- Dai il controllo all’utente sull’autoplay
Strumenti di test dell’accessibilità
Strumenti consigliati:
- Litmus Accessibility Checker
- Email on Acid
- WAVE Web Accessibility Evaluation
- Test con screen reader (NVDA, VoiceOver)
Parte 7: template email ed esempi
Applica queste best practice con framework di template per i tipi di email più comuni.
Template di email promozionale
Scopo: generare vendite o conversioni immediate
┌─────────────────────────────────┐│ LOGO Shop | Account │├─────────────────────────────────┤│ ││ [HERO IMAGE/BANNER] ││ Saldi estivi: -30% ││ │├─────────────────────────────────┤│ ││ HEADLINE (convincente) ││ Copy di supporto (breve) ││ ││ ┌─────────────────────┐ ││ │ ACQUISTA ORA │ ││ └─────────────────────┘ ││ │├─────────────────────────────────┤│ Prodotto 1 │ Prodotto 2 ││ [Immagine] │ [Immagine] ││ 49 $ │ 79 $ ││ [Compra] │ [Compra] │├─────────────────────────────────┤│ Footer: Social | Unsubscribe ││ Indirizzo | Privacy │└─────────────────────────────────┘Template di newsletter
Scopo: fornire valore e mantenere engagement
┌─────────────────────────────────┐│ LOGO Numero #42 │├─────────────────────────────────┤│ ││ ARTICOLO IN PRIMO PIANO ││ [Immagine grande] ││ Titolo ed estratto ││ [Leggi di più] ││ │├─────────────────────────────────┤│ ALTRE STORIE ││ ││ [Thumb] Titolo storia 2 ││ Breve estratto... ││ ││ [Thumb] Titolo storia 3 ││ Breve estratto... ││ │├─────────────────────────────────┤│ QUICK LINKS ││ Link 1 | Link 2 | Link 3 │├─────────────────────────────────┤│ Footer │└─────────────────────────────────┘Template di email transazionale
Scopo: confermare azioni e fornire informazioni essenziali
┌─────────────────────────────────┐│ LOGO │├─────────────────────────────────┤│ ││ Ordine confermato ││ Grazie, [Nome]! ││ │├─────────────────────────────────┤│ DETTAGLI ORDINE ││ ───────────────────────────── ││ Ordine #: 12345 ││ Data: 8 marzo 2026 ││ Totale: 149,99 $ ││ ││ ARTICOLI ││ [Immagine] Nome prodotto 99 $ ││ [Immagine] Nome prodotto 50 $ ││ ││ Subtotale: 149 $ ││ Spedizione: GRATIS ││ Totale: 149 $ ││ ││ ┌─────────────────────┐ ││ │ TRACCIA ORDINE │ ││ └─────────────────────┘ ││ │├─────────────────────────────────┤│ INDIRIZZO DI SPEDIZIONE ││ Mario Rossi ││ Via Principale 123 ││ Città, Prov. 12345 ││ │├─────────────────────────────────┤│ Serve aiuto? Contatta il supp. ││ Footer │└─────────────────────────────────┘Template di email di benvenuto
Scopo: introdurre il brand e spingere alla prima azione
┌─────────────────────────────────┐│ LOGO │├─────────────────────────────────┤│ ││ [IMMAGINE HERO/LIFESTYLE] ││ │├─────────────────────────────────┤│ ││ Benvenuto in [Brand], [Nome]! ││ ││ Introduzione breve e calorosa. ││ Perché hanno fatto una gran ││ scelta. ││ ││ LA TUA OFFERTA DI BENVENUTO ││ ───────────────────────────── ││ 15% DI SCONTO ││ Codice: WELCOME15 ││ ││ ┌─────────────────────┐ ││ │ ACQUISTA ORA │ ││ └─────────────────────┘ ││ │├─────────────────────────────────┤│ COSA CI RENDE DIVERSI ││ ││ [Icona] Beneficio 1 ││ [Icona] Beneficio 2 ││ [Icona] Beneficio 3 ││ │├─────────────────────────────────┤│ Seguici: icone social ││ Footer │└─────────────────────────────────┘Parte 8: test del design email
Anche email ben progettate possono rompersi su alcuni client. Un test completo intercetta i problemi prima che li veda il pubblico.
Checklist di test pre-invio
Revisione dei contenuti:
- Controllo ortografico e grammaticale
- Tutti i link funzionano e sono tracciati
- I token di personalizzazione funzionano
- Subject line e preheader ottimizzati
- Link di disiscrizione presente e funzionante
Revisione del design:
- Le immagini si visualizzano correttamente
- Alt text presente su tutte le immagini
- Rendering mobile verificato
- Dark mode testato
- Tempo di caricamento sotto i 3 secondi
Revisione tecnica:
- L’HTML valida
- CSS inline dove serve
- Dimensione file sotto 100KB
- Immagini ospitate su CDN affidabile
Matrice di test dei client email
Testa sui client più popolari per il tuo pubblico:
| Priorità | Client email |
|---|---|
| Critica | Gmail (web), Apple Mail, iOS Mail |
| Alta | Outlook (Windows), Gmail (mobile) |
| Media | Yahoo Mail, Outlook (Mac) |
| Bassa | Altri in base al pubblico |
Strumenti di test
Piattaforme di test consigliate:
- Litmus - anteprime complete, analytics
- Email on Acid - anteprime, test di accessibilità
- Mailtrap - test in ambiente di staging
- Testi@ - test base gratuito
A/B testing degli elementi di design
Testa le varianti di design per ottimizzare le performance:
| Elemento | Varianti da testare |
|---|---|
| Immagine hero | Foto vs illustrazione |
| Colore CTA | Colore brand vs contrasto |
| Testo CTA | ”Acquista ora” vs “Inizia subito” |
| Layout | Colonna singola vs multi-colonna |
| Lunghezza | Breve vs dettagliata |
| Immagini | Con vs senza |
Design email con Tajo e Brevo
Applicare queste best practice diventa più semplice con gli strumenti giusti. L’integrazione di Tajo con Brevo offre:
Strumenti di design integrati
- Editor drag-and-drop con template mobile-responsive
- Integrazione del brand kit per colori e font coerenti
- Libreria immagini con ottimizzazione automatica
- Accessibility checker integrato nell’editor
Gestione dei template
- Template pre-costruiti basati sulle best practice
- Creazione di template custom con blocchi riutilizzabili
- Versioning degli aggiornamenti ai template
- Supporto multilingua per campagne globali
Test e ottimizzazione
- Anteprima su più device prima dell’invio
- A/B testing degli elementi di design
- Analytics delle performance legate alle scelte di design
- Monitoraggio della deliverability e dell’impatto del design
Coerenza multicanale
- Design system unificato su email, SMS e WhatsApp
- Branding coerente applicato automaticamente
- Template cross-canale per la continuità della campagna
Domande frequenti
Qual è la larghezza ideale per il design email?
La larghezza ottimale è 600-640 pixel. Garantisce compatibilità sui principali client email e previene lo scroll orizzontale. Per design mobile-first, alcuni designer usano 480px. Non superare i 640px per evitare problemi di rendering.
Come rendo le mie email mobile-friendly?
Usa un layout a colonna singola, imposta font minimi a 16px, crea bottoni di almeno 44x44 pixel, usa immagini fluide con max-width: 100% e testa su device reali. Implementa CSS responsive con media query per adattare il layout agli schermi piccoli.
Dovrei usare i web font nel design email?
Puoi usare i web font, ma includi sempre font di sistema come fallback perché Gmail e Outlook per Windows non li supportano. Definisci il font stack con il web font per primo, seguito da font di sistema simili. Testa per assicurarti che il design sia accettabile con i font di fallback.
Come progetto email per il dark mode?
Usa immagini PNG trasparenti dove possibile, testa come i tuoi colori appaiono invertiti, fornisci versioni chiara e scura del logo e aggiungi bordi sottili per evitare che gli elementi si fondano con sfondi scuri. Includi il meta tag color-scheme per segnalare il supporto al dark mode.
Quale formato file devo usare per le immagini email?
Usa JPEG per le fotografie e immagini con gradienti, PNG per grafiche con trasparenza o testo, e GIF per animazioni semplici. Mantieni tutte le immagini sotto i 200KB per un caricamento ottimale. Evita SVG per il supporto limitato nei client email.
Quante CTA dovrebbe avere un’email?
Concentrati su una CTA primaria per email per massimizzare le conversioni. Puoi includere CTA secondarie, ma assicurati che l’azione primaria spicchi visivamente con dimensione, colore e posizione. CTA multiple e pari creano paralisi decisionale.
Qual è il rapporto di contrasto minimo del testo per l’accessibilità?
WCAG 2.1 richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande (18px o più). Usa contrast checker online per verificare che le tue combinazioni di colori rispettino questi standard.
Come testo le email sui vari client?
Usa piattaforme di test email come Litmus o Email on Acid che renderizzano anteprime su decine di client. Come minimo testa su Gmail (web e mobile), Apple Mail, iOS Mail e Outlook (Windows). Crea una matrice di test basata sui client più usati dal tuo pubblico.
Dovrei includere una versione in plain text della mia email?
Sì, includi sempre una versione alternativa in plain text. Alcuni utenti preferiscono il plain text e aiuta la deliverability. Il tuo provider email di solito la genera automaticamente, ma rivedila per assicurarti la leggibilità.
Quanto dovrebbero essere lunghe le email marketing?
Adatta la lunghezza allo scopo: le email promozionali dovrebbero essere di 50-125 parole con visual forti, le newsletter possono essere di 200-500 parole con sezioni scansionabili e i contenuti educational possono essere più lunghi ma ben strutturati. A prescindere dalla lunghezza, concentrati sulla scansionabilità e testa per capire cosa funziona con il tuo pubblico.
Conclusione
Il design email è arte e scienza. Le best practice di questa guida - dal layout e tipografia all’ottimizzazione mobile e all’accessibilità - costituiscono la base per creare email che ingaggiano, convertono e costruiscono relazioni con i clienti.
Ricorda questi principi chiave:
- Progetta prima per mobile - la maggior parte delle email viene aperta su smartphone
- Mantienilo semplice - colonna singola, gerarchia chiara, una sola CTA primaria
- Prioritizza l’accessibilità - una buona accessibilità migliora i risultati per tutti
- Testa a fondo - anteprima su client e device prima dell’invio
- Itera sui dati - fai A/B testing continuo degli elementi di design
Un ottimo design email non insegue le tendenze: è comunicazione chiara che spinge all’azione. Applica questi principi con costanza e vedrai miglioramenti misurabili nelle performance del tuo email marketing.
Vuoi creare email dal design bello che convertono? Inizia con Tajo e accedi a template professionali, strumenti di test integrati e gestione multicanale fluida delle campagne.
Articoli correlati
- Campagne di email marketing: la guida completa a pianificazione, esecuzione e ottimizzazione
- Strategia di email marketing: guida completa a pianificazione ed esecuzione [2025]
- Email marketing per piccole imprese: la guida completa (2026)
- ROI dell’email marketing: come calcolarlo, tracciarlo e migliorarlo [2025]
- Email marketing per principianti: la guida completa per iniziare (2026)