La guida definitiva alla progettazione delle e-mail: best practice per dimensioni dei caratteri e dimensioni delle immagini

Perché il design della posta elettronica è importante: Importanza nell'e-commerce e nel marketing.

Carattere e tipografia

Dimensioni dei caratteri:

Dimensioni consigliate per le e-mail mobili e desktop

Per garantire la leggibilità delle e-mail su dispositivi mobili, in genere è consigliabile attenersi alle seguenti dimensioni dei caratteri:

1. Corpo del testo: 14-16px è un buon intervallo. Facile da leggere senza zoom.
2. Intestazioni: 22-27px funziona bene per le intestazioni. Vuoi che si distinguano ma non siano travolgenti.
3. Sottovoci: Circa 18-22px. Dovrebbero essere più grandi del corpo del testo ma più piccoli dei titoli principali.
4. Pulsanti CTA: il testo all'interno dei pulsanti deve essere di almeno 14 px per un facile tocco.
5. Stampa fine: Mantienilo almeno 12px in modo che sia leggibile ma chiaramente secondario.

La leggibilità è fondamentale, soprattutto per l'e-commerce in cui si desidera guidare il lettore ad agire. Testa sempre le tue e-mail su più dispositivi per assicurarti che abbiano un bell'aspetto!

Tipi di carattere

Serif contro Sans-serif.

Quando si tratta di progettazione di e-mail, la scelta tra i caratteri Serif e Sans-Serif può fare davvero la differenza. Ecco le informazioni più dettagliate:

Caratteri serif

• Esempi: Times New Roman, Georgia
• Vibrazione: Più tradizionale, spesso visto come formale o accademico.
• Ideale per: contenuti di lunga durata in cui la leggibilità è fondamentale.
• Ma: può apparire disordinato su schermi piccoli, quindi utilizzalo con cautela nelle e-mail mobili.

Caratteri Sans Serif

• Esempi: Arial, Helvetica, Verdana
• Vibrazione: Moderno, pulito e informale.
• Ideale per: Contenuti brevi e accattivanti e leggibilità mobile.
• Perché: Più facile da leggere su schermi piccoli e dona un tocco contemporaneo.

Suggerimenti per la progettazione della posta elettronica

1. Consistenza: Attenersi a uno o due caratteri per mantenere il design coerente.
2. Caratteri sicuri per il Web: utilizza caratteri che vengono visualizzati correttamente su tutti i client di posta elettronica.
3. Gerarchia: utilizza caratteri o stili diversi per i titoli e il corpo del testo per creare una gerarchia visiva.
4. Test: verifica sempre il modo in cui i caratteri vengono visualizzati su diversi dispositivi e client di posta elettronica.

Data la nostra attenzione all'e-commerce, potresti propendere per Sans-Serif per la sua atmosfera moderna e leggibilità mobile.

Ma se invii contenuti didattici, un carattere Serif potrebbe aggiungere un tocco di autorità. Scegli in base al tuo brand e al tuo messaggio!

Interlinea

La spaziatura ottimale è importante per la leggibilità della posta elettronica.

• Corpo del testo: Punta a una dimensione del carattere compresa tra 1,4 e 1,6 volte. Pertanto, se la dimensione del carattere è 16px, l'interlinea sarà compresa tra 22px e 26px.

Perché l'interlinea è importante

1. Leggibilità: l'interlinea corretta evita che il testo risulti angusto, facilitandone la lettura.
2. Scremabilità: una buona spaziatura aiuta i lettori a scorrere rapidamente i contenuti, che è il modo in cui la maggior parte delle persone legge le email.

Suggerimenti per l'interlinea

1. Consistenza: mantieni l'interlinea coerente in tutta l'e-mail per un aspetto coerente.
2. Intestazioni e sottotitoli: Questi possono avere una spaziatura leggermente più stretta poiché di solito sono più grandi e più audaci.
3. Mobile: prova su diversi dispositivi per garantire che la spaziatura sia corretta su tutta la linea.

Per le tue campagne e-mail di e-commerce, l'interlinea può aiutare a guidare l'occhio del lettore verso CTA e informazioni chiave. Quindi, non trascurarlo!

Immagini e contenuti multimediali

Taglie consigliate per le immagini e-mail

1. Immagini a larghezza intera: larghezza 600-800px. Questo si adatta alle larghezze predefinite della maggior parte dei client di posta elettronica.
2. Immagini in linea o mobili: larghezza 200-300px. Queste sono immagini che si trovano accanto al testo.
3. Immagini dell'eroe: larghezza 800-1200px. Queste sono le immagini grandi e che attirano l'attenzione in alto.
4. Pulsanti CTA: almeno 44x44px per un facile tocco sul cellulare.

Altri suggerimenti

1. Proporzioni: Attenersi a rapporti comuni come 16:9 o 4:3 per garantire che le immagini si ridimensionino bene.
2. Dimensione del file: mantienilo sotto i 100 KB, se possibile, per un caricamento più rapido.
3. Schermi ad alta DPI: prendi in considerazione i display Retina e utilizza immagini a risoluzione più elevata, ma comprimili per mantenere basse le dimensioni dei file.

Formati di immagine nell'e-mail

• JPEG: Ideale per immagini complesse con molti colori.
• PNG: ideale per immagini, testo e loghi semplici.
• GIF: Per animazioni semplici.

Data la tua attenzione all'e-commerce, immagini nitide e a caricamento rapido possono rendere i tuoi prodotti allettanti e coinvolgere l'utente. Prova sempre su più dispositivi per assicurarti che tutto sia a posto!

Testo alternativo per le immagini nelle email

Accessibilità

1. Ipovedente: gli screen reader utilizzano il testo alternativo per descrivere le immagini.
2. Conformità legale: ti aiuta a soddisfare gli standard di accessibilità come ADA.
3. Blocco delle immagini nei client di posta elettronica: alcuni client bloccano le immagini per impostazione predefinita. Il testo alternativo fornisce il contesto.

Vantaggi SEO

1. Classifica della ricerca: Pur non influendo direttamente sulla posta elettronica, le buone pratiche relative al testo alternativo possono aiutare nella strategia SEO complessiva.
2. Questo accade quando hai una pagina di archivio pubblica per le newsletter in uscita

Esperienza utente

1. Internet lento: se le immagini non vengono caricate, il testo alternativo fornisce il contesto.
2. Una precisazione: descrive l'immagine se è complessa o contiene informazioni importanti.

Migliori pratiche

1. Descrittivo: "Scarpe da corsa da donna blu" è meglio di semplici "scarpe".
2. Conciso: Sii breve ma informativo.
3. Parole chiave: utilizza parole chiave pertinenti ma evita il riempimento di parole chiave.

Il video viene incorporato nell'e-mail

L'aggiunta di video nelle e-mail può aumentare il coinvolgimento, ma comporta alcuni avvertimenti. Ecco cosa potresti coprire:

I pro

1. Fidanzamento: i video possono aumentare la percentuale di clic.
2. Informazione: è più facile trasmettere informazioni complesse o mostrare un prodotto.

I contro

1. Compatibilità: non tutti i client di posta supportano i video incorporati.
2. Tempo di caricamento: i video pesanti possono rallentare il caricamento delle e-mail.

Migliori pratiche

1. Immagine di riserva: utilizza un'immagine in miniatura che si collega al video, nel caso in cui l'incorporamento non funzioni.
2. CTA: aggiungi un pulsante di riproduzione in sovrapposizione per incoraggiare i clic.
3. Breve e dolce: mantieni i video brevi, preferibilmente inferiori a 2 minuti.
4. Riproduzione automatica: Generalmente evitatelo; consentire agli utenti di scegliere di riprodurre il video.

Come

1. HTML5: per i client di posta elettronica che lo supportano, puoi utilizzare i tag HTML5 per l'incorporamento.
2. Servizi di terze parti: Piattaforme come Vibetrace e Mailchimp spesso hanno opzioni integrate per i video.

Alternative al video incorporato nelle e-mail

1. GIF: le GIF brevi e in loop possono offrire un'esperienza simile a un video.
2. Miniatura collegata: un'immagine statica che si collega a un video ospitato altrove.

Test

1. Clienti multipli: verifica come appare il video in diversi client di posta elettronica.
2. Mobile: assicurati che sia ottimizzato per i dispositivi mobili.

Layout e struttura per la progettazione di e-mail

Layout a colonna singola o multicolonna: Pro e contro.

Layout a colonna singola

Professionisti

1. Ottimizzato per dispositivi mobili: è più facile ridimensionare su schermi più piccoli.
2. focalizzata: Guida il lettore in modo lineare e diretto.
3. Semplicità: Più facile da progettare e più veloce da caricare.

Contro

1. Contenuti limitati: Non ideale per messaggi complessi con più sezioni.
2. Meno dinamico: potrebbe non catturare l'attenzione con la stessa efficacia dei layout a più colonne.

Layout a più colonne

Professionisti

1. Ricco di contenuti: Ottimo per mostrare una varietà di prodotti o argomenti.
2. Attrazione visiva: Più dinamico e coinvolgente.
3. Gerarchico: Consente una struttura delle informazioni più complessa.

Contro

1. Complessità: più difficile da progettare e potrebbe non essere visualizzato correttamente su tutti i dispositivi.
2. Travolgente: Rischio di disordine o sovraccarico di informazioni.

Suggerimenti per il tuo focus sull'e-commerce

• Colonna singola: ideale per campagne mirate come lanci di prodotti o offerte speciali.
• Multicolonna: Ideale per newsletter o per mostrare una gamma di prodotti.

La scelta tra colonna singola e multicolonna dovrebbe essere in linea con la tua strategia di contenuto, la complessità del tuo messaggio e le preferenze del tuo pubblico di destinazione. Testa sempre entrambi i layout per vedere cosa risuona meglio con il tuo pubblico di e-commerce!

Importanza degli spazi bianchi nella progettazione delle email

Nel design lo spazio bianco ha un'importanza particolare. Ci sono molti vantaggi nell’usare lo spazio bianco, ma per la posta elettronica i più importanti sono:

Leggibilità e spazio per respirare: La spaziatura tra testo ed elementi rende il contenuto più facile da digerire.

Concentrazione e attenzione: Gli spazi bianchi possono indirizzare l'occhio del lettore verso elementi importanti come i CTA.

Professionalità e look pulito: Un design ordinato sembra più professionale e affidabile.

Esperienza utente e scremabile: aiuta i lettori a scorrere rapidamente i contenuti, ovvero il modo in cui la maggior parte delle persone legge le e-mail.

Esperienza mobile e facile da toccare: lo spazio aggiuntivo semplifica il tocco dei pulsanti sui dispositivi mobili.

Per le tue email di e-commerce, gli spazi bianchi possono aiutare a guidare il lettore verso azioni chiave, come effettuare un acquisto o verificare un nuovo prodotto. Non è solo spazio vuoto; è un elemento di design funzionale!

Reattività mobile

Assicurati che abbia un bell'aspetto su tutti i dispositivi. C'è una certezza più alta che dispositivi mobili vengono utilizzati più del desktop per leggere le e-mail.

Assicurarsi che la tua email sia reattiva e possa adattarsi agli schermi dei dispositivi mobili non è un'opzione ma il modo per iniziare a progettare un'email.

Inviti all'azione (CTA) nelle e-mail

• Posizionamento CTA: Dove posizionarli per il massimo impatto.
• Design del pulsante CTA: dimensione, colore, testo.

Esperienza utente (UX)

Tempo di caricamento

Importanza del tempo di caricamento delle email (a seconda delle dimensioni e del numero di immagini)

1. Esperienza utente: le e-mail a caricamento lento possono frustrare gli utenti e portare a un minore coinvolgimento.
2. Utenti mobili: sono spesso in movimento e non aspettano contenuti lenti.
3. Ottimizza le immagini: mantieni le dimensioni dei file piccole ma la qualità elevata.
4. Minimizza il codice: HTML/CSS puliti e semplici si caricano più velocemente.
5. Email più brevi: Anche se potrebbe essere più semplice provare ad aggiungere molto alle email, in realtà è meglio mantenerle più brevi.
6. Ritaglio e-mail: alcuni client di posta elettronica (come Gmail) ritagliano le email se superano una certa dimensione.
7. Test: testa sempre i tempi di caricamento su vari dispositivi, client di posta elettronica e risoluzioni.

Navigazione

Navigazione e-mail

1. Scoperta dei contenuti: per le email più lunghe, come le newsletter, la navigazione aiuta gli utenti a trovare ciò a cui sono interessati.
2. CTA: una navigazione chiara può guidare gli utenti ad agire.
3. Menù: Per le email molto ricche di contenuti, un piccolo menu in alto può essere utile.
4. Gerarchia: utilizza titoli e sottotitoli per suddividere i contenuti e guidare il lettore.

Accessibilità

Scelta dei caratteri nell'e-mail

1. Scelta del carattere: i caratteri semplici e puliti sono più facili da leggere.
2. Dimensione del font: attenersi a una dimensione leggibile, generalmente 14-16px per il corpo del testo.
3. Lettori di schermo: prova la tua email con un software di lettura dello schermo per assicurarti che sia accessibile.
4. Disponibilità dei caratteri: quando si utilizzano caratteri personalizzati (che non sono installati per impostazione predefinita sui dispositivi), assicurarsi che i file dei caratteri vengano caricati correttamente.

Contrasto di colore

1. Leggibilità: l'elevato contrasto tra testo e sfondo migliora la leggibilità.
2. Accessibilità: Aiuta le persone con problemi di vista o daltonismo.
3. Testo e sfondo: punta a testo scuro su sfondo chiaro o viceversa.
4. CTA: assicurati che i pulsanti risaltino ma siano anche leggibili.
5. Utensili: utilizza i controlli di contrasto per testare le tue scelte di colore.