Come progettare l’email dei tuoi sogni: la guida completa

Il primo passo è sempre il più difficile. Sì, anche quando si parla di email design.

Quando decidi di creare un’email da zero, ti ritrovi davanti a mille domande. Quali sono le dimensioni ideali di un modello di email, in larghezza e in altezza? Quanto deve pesare una newsletter? E i font? E i colori?

Per non perdere la rotta nel tuo percorso di email design ti servono indicazioni chiare, ed è proprio per questo che abbiamo scritto questa guida. Perché proprio noi? Abbiamo creato 390+ modelli di email perfetti e ancora più email uniche per i nostri clienti. Seguici lungo tutto il processo di progettazione dell’email perfetta, dalle dimensioni al footer, e scopri come realizzarla in Blocks, il nostro editor di email no-code.

Parte 1. Cominciamo dall’inizio

Prima di tutto dobbiamo capire quali devono essere le dimensioni del tuo modello di email. Altezza e larghezza giuste sono fondamentali perché i contenuti si vedano correttamente e il messaggio arrivi al pubblico. E visto che le dimensioni di un modello di email (contenuti compresi) si misurano di solito in pixel (px), useremo i pixel anche in questa guida.

Quanto deve essere larga la mia email?

Per molto tempo la larghezza media di un’email è stata di 600px su desktop e, sui dispositivi mobili, di 320px in verticale e 480px in orizzontale. Col tempo, però, le risoluzioni degli schermi sono aumentate. Oggi, secondo questo articolo di Selzy, la larghezza ideale per la versione desktop della tua email è di 640px, mentre quella mobile resta invariata.

Certo, la tua email può essere più larga di 640px, ma cerca di non superare la soglia degli 800px. Il punto è che ogni client di posta ha impostazioni e limiti propri, e devi rientrare in quei confini se vuoi che tutti i destinatari ricevano la versione migliore del tuo messaggio. E se la tua email supera la soglia, testala in ogni client di posta per assicurarti che non si rompa o non si deformi.

Tieni presente un’altra cosa: se la versione mobile della tua email è larga 480px, gli utenti dovranno ruotare il telefono per vederla correttamente. Come per la larghezza desktop, puoi andare oltre i 320px, ma assicurati di fare test approfonditi.

Quanto deve essere lunga la mia email?

Per l’altezza dell’email l’unico limite è la tua fantasia (e il peso del file). La lunghezza ideale è di 1500px, ma puoi arrivare anche a 3000px! Ricorda però che più l’email è lunga, più è probabile che gli utenti pensino «troppo lunga, non la leggo» e la chiudano.

E se hai molti contenuti da condividere, prova a strutturarli: usa gli elenchi puntati, accorcia i paragrafi, aggiungi titoli. Puoi anche inserire alcune informazioni nelle immagini, usare le GIF o persino allegare un video!

Quanto deve pesare la mia newsletter?

La tua email non dovrebbe superare i 102 KB. Tienilo sempre a mente e cerca di non sovraccaricare l’email di contenuti (e non parliamo solo di immagini o video).

Il peso di un’email si misura in base al peso del codice HTML. Più righe di codice ci sono, più il file è grande. Per questo devi tenere d’occhio la quantità di contenuti: ogni blocco conta, per così dire.

E se superi il limite dei 102 KB? Il risultato è semplice: alcuni client di posta (Gmail, per esempio) taglieranno la tua email. Se viene tagliato il footer, a volte si può anche accettare, ma se l’email viene troncata a metà è tutta un’altra storia. Fai attenzione.

Come creare un’email da zero in Blocks?

Con Blocks puoi creare un’email bellissima senza scrivere una sola riga di codice! Parti da un modello vuoto, genera un’email con l’IA o scegline una dalla galleria dei modelli, poi trascina i blocchi di contenuto sull’area di lavoro e regola le proprietà degli elementi e le impostazioni dell’email nel pannello a destra.

Parte 2. Come far brillare la tua email

La struttura di base della nostra email è pronta: ora è il momento di guardare da vicino i suoi elementi. Parliamo del layout dell’email e di come progettarlo nel modo giusto.

1. Preheader e header (altezza, larghezza, contenuti)

Il preheader è una sottile riga sopra l’email. Di solito compare anche dopo l’oggetto. Il preheader può ampliare l’oggetto (per esempio, parlando di spedizione gratuita o di sconti extra) oppure avere uno scopo puramente pratico (come contenere il link «visualizza nel browser»).

Per la formattazione del testo del preheader ci sono un paio di cose da ricordare. La dimensione del font del preheader deve essere più piccola di quella del corpo dell’email (ma non troppo, ovviamente). Per esempio, se il corpo dell’email usa un font da 14px, per il preheader resta intorno ai 10-12px. Quanto all’altezza del preheader, bastano 55-60px: se la aumenti, risalterà troppo.

E naturalmente non dimenticare la lunghezza del testo del preheader: deve restare tra i 50 e i 100 caratteri.

Passiamo ora all’header dell’email. Di solito contiene il logo dell’azienda insieme a pulsanti, menu o altri elementi. Ecco qualche consiglio sulle sue dimensioni.

Se l’header contiene un logo di dimensioni standard, l’altezza migliore è 70px. Se aggiungi un pulsante o del testo (o usi un logo più grande), puoi portare l’altezza a 100-150px. Per un header con menu, valuta di arrivare fino a 200px. Ma ricorda sempre: un header troppo alto attira troppa attenzione.

Oltre ai padding superiore e inferiore, puoi aggiungere padding anche a sinistra e a destra dei blocchi. A differenza di quelli sopra e sotto, questi devono essere uguali in tutta l’email: se nel corpo dell’email usi padding laterali di 40px, devono essere di 40px anche nel preheader e nell’header.

Quanto al design dell’header, gli unici limiti sono la tua fantasia e lo stile generale dell’email. L’importante è che tutti gli elementi restino coerenti sia su desktop sia su mobile.

2. Banner (altezza, larghezza, cosa fare e cosa evitare)

Il banner dell’email è un’immagine JPG, PNG o SVG che attira più di tutto l’attenzione ed è la tela perfetta per dare sfogo alla creatività. Puoi giocare con le dimensioni del banner, con gli stili dei font (e le loro dimensioni) e con i colori. Ma resta sempre nei limiti del buon senso: un banner zeppo di contenuti rischia di diventare un pasticcio invece che un modo per catturare lo sguardo.

Dimensioni delle immagini nell’email:

La larghezza del banner dipende di solito dalla larghezza complessiva dell’email. Per esempio, se la tua email è larga 600px su desktop e 320px su mobile, puoi mantenere il banner della stessa larghezza. Puoi anche aggiungergli dei padding laterali, ricordando però che devono restare coerenti in tutta l’email (se negli altri blocchi sono di 40px, anche nel banner devono esserlo).

Quanto all’altezza del banner, non ci sono veri limiti, basta restare ragionevoli. Il nostro consiglio è un banner alto 700px-1400px. Un banner più lungo probabilmente farà più male che bene alla tua email.

3. Testo (stile del font, dimensioni, colori, formattazione)

Quando si tratta di progettare il testo di un’email, è facile confondersi. Qual è la dimensione del font migliore per un’email? Esiste un font «professionale» con una dimensione obbligata? Tra decine di opzioni, quale scegliere?

Niente paura, non è affatto difficile. Ti aiutiamo a scegliere lo stile del font, l’altezza, l’interlinea, il colore e la formattazione perfetti per la tua email.

Stile del font:

Esistono due grandi famiglie di font: Serif e Sans Serif. La differenza sta nelle grazie, i piccoli tratti alle estremità delle lettere: i font Serif le hanno, i Sans Serif no.

All’inizio Blocks offriva solo una scelta limitata di font. Dopo una serie di aggiornamenti, però, supportiamo anche i Google Fonts! Il set di partenza contiene i font sicuri, cioè quelli che si vedono correttamente su tutti i tipi di dispositivi e client di posta. Eccoli:

I Google Fonts, invece, sono un po’ più insidiosi: alcuni client di posta e dispositivi potrebbero visualizzarli in modo scorretto. Puoi comunque usarli, certo, ma in quel caso testa le email prima di inviarle.

Ti consigliamo di non usare più di due font nella stessa email. Così mantieni coerenza e leggibilità, e rendi il testo più chiaro (un aspetto importante per l’accessibilità di qualsiasi email).

E a proposito di leggibilità, guarda quanto cambia solo in base al font:

Certo, la seconda opzione è molto più elegante, ma è anche molto più difficile da leggere.

Dimensione del font e interlinea:

Dopo aver provato diverse combinazioni di titoli, sottotitoli e testo, siamo arrivati a queste dimensioni del font consigliate:

• 22-24px per i titoli;
• 18-20px per i sottotitoli;
• 14-16px per il testo normale.

Quanto all’interlinea ideale, tienila al 150-200%. Così il testo sarà leggibile e piacevole per l’occhio.

E ricorda: non esiste un font «professionale» con una dimensione fissa per le email. Tutto dipende dal contesto e dalle tue scelte creative. Assicurati però sempre che l’email sia leggibile ed evita testi troppo grandi o troppo piccoli.

Colore del font:

Il consiglio è simile a quello sugli stili: non usare più di due colori per il testo in tutta l’email. Scegli colori a contrasto per rendere il testo più accessibile.

Formattazione del testo:

Ci sono 3 modi principali per formattare il testo e metterne in risalto alcune parti: il grassetto, il corsivo e la sottolineatura. Vediamo come usarli:

• Il grassetto si usa di solito per evidenziare le parole su cui il lettore deve concentrarsi (per esempio una data, le condizioni di una promozione e così via).
• Il corsivo si usa per le citazioni e per i titoli di libri, film e simili.
• Infine, si sottolineano i link: è l’uso più comune di questa formattazione.

Non sono regole obbligatorie, ma queste pratiche sono ormai diventate un’abitudine: le persone notano più facilmente il testo in grassetto e cliccano su quello sottolineato. Tienilo presente anche per il testo della tua email.

4. Pulsanti (larghezza e altezza, colore, font, padding)

Come per le dimensioni del banner, anche per i pulsanti non esistono limiti precisi. Ci sono però alcune regole generali e alcuni consigli che ti aiutano a usare questo elemento nel modo più efficace.

• I pulsanti devono risaltare rispetto allo sfondo e agli altri contenuti dell’email. Devono attirare lo sguardo ed essere notati subito dai lettori.
• Nella versione mobile dell’email i pulsanti devono essere abbastanza grandi da poterli toccare senza difficoltà.
• Usa colori a contrasto per rendere i pulsanti ben distinguibili.
• Sfrutta lo spazio bianco e aggiungi padding intorno alla CTA sul pulsante: così sarà più facile da leggere e da cliccare.

5. Blocchi di contenuto (numero di elementi nella griglia, dimensioni e stile)

Esistono molti tipi di blocchi di contenuto: articoli, griglie di prodotti, citazioni e così via. In sostanza sono tutti tabelle, composte da una o più colonne. Un consiglio: per le griglie di prodotti è meglio non superare le 4 colonne, e per gli altri tipi di blocchi le 2 colonne.

Ricorda anche che un blocco troppo lungo può scoraggiare il destinatario dal continuare a leggere (e ovviamente non è quello che vogliamo). Resta entro limiti ragionevoli e tieni l’altezza di un singolo blocco di contenuto sui 200-300px. L’altezza complessiva di tutti i blocchi di contenuto della tua email dovrebbe aggirarsi sui 1000-1200px.

6. Footer (larghezza, altezza, contenuti obbligatori e facoltativi)

Nelle email il footer ha una funzione più pratica. Le sue dimensioni dipendono dalla quantità di contenuti. Un footer tipico contiene:

1. L’indirizzo fisico dell’azienda.
2. I link ai social.
3. I contatti dell’azienda (numero di telefono e/o indirizzo email).
4. Il link o il codice QR dell’app mobile.
5. Il promemoria del motivo per cui il destinatario ha ricevuto l’email.
6. Il link all’informativa sulla privacy.
7. Il link «Annulla iscrizione».

Va detto che sia il CAN-SPAM Act sia il GDPR impongono di inserire il link di disiscrizione per i destinatari rispettivamente negli Stati Uniti e nell’UE. Anche se non lavori direttamente con questi paesi, nel tuo database potresti comunque avere clienti americani o europei.

Per questo è sempre meglio inserire il link «Annulla iscrizione» nel footer, per andare sul sicuro. Rendilo ben visibile e permetti agli iscritti di disiscriversi con un solo clic. E un’ultima cosa: nessun ESP ti permetterà di inviare un’email senza il link «Annulla iscrizione». Anche se ti dimentichi di aggiungerlo, te lo ricorderà o lo aggiungerà in automatico (come fa Selzy).

Oltre agli elementi già elencati, nel footer puoi inserire anche altro (come menu, informazioni sulle promozioni in corso e così via).

Infine, parliamo delle dimensioni del footer. La sua larghezza deve essere esattamente uguale a quella dell’email, mentre l’altezza dipende dalla quantità di contenuti. In ogni caso, tieni il footer alto almeno 200px.

Parte 3. Ritocchi finali e test

La nostra email è pronta! Mancano solo gli ultimi passaggi.

Controlla che gli spazi tra gli elementi abbiano tutti la stessa altezza. Non devono essere né troppo piccoli né eccessivi: la misura ideale è di 30-40px. Verifica anche che l’altezza del testo sia coerente in tutti i blocchi, che ogni immagine abbia il testo alternativo e che tutti i link siano al loro posto.

Non dimenticare di aggiungere i tag UTM ai link (se servono). I tag UTM sono brevi stringhe di codice che ti permettono di monitorare i risultati delle campagne. Se scrivi l’email a mano, dovrai aggiungerli a ogni link uno per uno, mentre in Blocks puoi aggiungerli a tutti i link in un paio di clic!

Poi controlla come appare e come funziona la tua email sui dispositivi mobili (molte persone leggono le email proprio lì). E infine invia un’email di prova per verificare che si veda correttamente su ogni dispositivo e client di posta.

Conclusione

Come vedi, progettare da zero un’email bellissima non è difficile! Certo, alcune indicazioni (come le dimensioni del modello di email) sono un po’ più rigide di altre (come la scelta della dimensione del font migliore). Ma con l’aiuto della nostra guida dettagliata, siamo certi che il tuo percorso di email design non perderà mai la rotta!