Perfetto. Ora ho abbastanza dati per scrivere un articolo blog completo e ben documentato. Comincio a stendere l'articolo.
La tua guida al design email con Mailchimp inizia qui. Un buon design non è decorazione. È la differenza tra una campagna che converte e una che viene eliminata prima dello scroll successivo.
Le campagne di email marketing hanno un ROI medio di 36 volte, il che significa che le aziende guadagnano 36 euro per ogni euro speso. Ma questo ritorno dipende interamente dal fatto che le tue email vengano aperte, lette e utilizzate. Le scelte di design che fai in Mailchimp determinano tutti e tre gli aspetti.
Questa guida copre ogni livello della guida al design email con Mailchimp: dalle dimensioni del layout e la tipografia ai pulsanti CTA, i rapporti delle immagini, l'ottimizzazione mobile e gli strumenti di design AI di Mailchimp. Che tu stia costruendo da un template o codificando HTML personalizzato, queste sono le decisioni che muovono le metriche.
Punti Chiave
- Tra il 50 e il 60% degli open email proviene da dispositivi mobili nel 2024, rendendo il mobile-first design un requisito fondamentale, non un aggiornamento opzionale.
- I template Mailchimp sono progettati per non superare i 600px di larghezza, in modo da adattarsi alle capacità di visualizzazione della maggior parte dei client email.
- Un buon design email riguarda la gerarchia visiva: i lettori dovrebbero capire in pochi secondi cosa fare, con un titolo principale, spaziature chiare, font leggibili, posizionamento evidente dei CTA e un layout mobile-friendly.
- La regola 60/40 (60% testo, 40% immagini) è la linea guida più accettata per il rapporto immagini-testo, poiché SpamAssassin, uno dei sistemi di rilevamento spam più comuni, la riconosce come soglia generale.
- Mailchimp Brand Kit ti consente di salvare e aggiornare i tuoi loghi, font, colori e personalità del brand in modo che gli strumenti AI possano generare rapidamente grafiche e layout coerenti con il tuo brand per le tue email e i flussi di automazione.
1. Inizia ogni design con un obiettivo chiaro
Prima di aprire un template e iniziare a progettare, fai un passo indietro e definisci cosa vuoi realizzare. Stai cercando di portare traffico a un post del blog? Incoraggiare i destinatari a fare shopping nella tua ultima collezione? Promuovere un evento? Il tuo obiettivo dovrebbe influenzare ogni decisione di design che prendi, dall'intestazione dell'email all'invito all'azione finale. Quando il tuo design si allinea con un unico obiettivo focalizzato, il tuo messaggio di email marketing sarà più chiaro e coinvolgente.
Qui è dove la maggior parte delle campagne Mailchimp sbaglia. Cercare di dire tutto in una sola email è di solito il modo più veloce per ridurre i click.
Prima di costruire qualsiasi cosa, rispondi a tre domande:
- Qual è l'azione singola che voglio che il lettore intraprenda?
- Chi esattamente riceve questa email?
- Cosa significa successo per questo invio?
Tutte le altre decisioni di design, inclusi layout, immagini e lunghezza della copia, dovrebbero servire quelle risposte. Nient'altro.
2. Fondamenti del Layout: Larghezza, Struttura e Scelta delle Colonne
Il layout del tuo HTML email dovrebbe essere compreso tra 600 e 800 pixel di larghezza, poiché molti client email forniscono una finestra di anteprima che non è molto ampia. In pratica, i template Mailchimp sono progettati per non superare i 600px di larghezza, in modo da adattarsi alle capacità di visualizzazione della maggior parte dei client email, e questo è il default più sicuro per la massima compatibilità di rendering.
Il layout che scegli stabilisce la base per l'intera email. Un layout a colonna singola funziona bene per la visualizzazione su dispositivi mobili e mantiene il design semplice, mentre un design a più colonne può mostrare più prodotti o funzioni contemporaneamente.
Ecco come scegliere tra loro:
- Colonna singola: Ideale per newsletter, annunci, email di onboarding e qualsiasi contenuto dove l'ordine di lettura è importante. Si visualizza pulitamente su tutte le dimensioni dello schermo.
- Più colonne: Funziona bene per griglie di prodotti, confronti di funzioni o raccolta di contenuti curati. Richiede test su mobile poiché i design a più colonne solitamente si rompono su piccoli schermi di dispositivi mobili.
La gerarchia dell'informazione è molto importante. I dettagli dell'evento e il contenuto critico dovrebbero sempre essere in alto e prominenti nelle dimensioni. Se presenti, i call-to-action dovrebbero essere chiaramente definiti e facilmente discernibili a colpo d'occhio.
La semplicità conta. Non progettare un'email come faresti con un sito web. In generale, più breve è la tua email, migliore sarà la sua performance.
3. Tipografia: Font, Dimensioni e Leggibilità
La tipografia è una delle leve più trascurate nel design email. Le scelte di font scadenti riducono la leggibilità e erodono l'impressione professionale che il tuo brand deve dare.
La tipografia è importante. La dimensione del font e la famiglia di font fanno una grande differenza nella leggibilità. È importante avere il tuo "hook" nella parte superiore dell'email, poiché i client email mobili potrebbero non scaricare il messaggio completo.
Per il corpo di testo leggibile su mobile, è consigliata una dimensione font minima di 16px. Apple consiglia 17-22px; Google consiglia 18-22px. La propria guida di riferimento di Mailchimp ha trovato Georgia 16px leggibile ed efficace.
Regole pratiche di tipografia per le email Mailchimp:
- Usa font web-safe (Arial, Georgia, Helvetica, Verdana) per il corpo per garantire il rendering in tutti i client email.
- Limitati a un massimo di due famiglie di font: uno per i titoli, uno per il testo del corpo.
- Imposta l'altezza della linea tra 1,4 e 1,6 volte la dimensione del font per una lettura confortevole.
- Non incorporare mai testo critico all'interno delle immagini. Se le immagini sono bloccate, quel testo scompare completamente.
Usa font web-safe con dimensioni e peso chiari per rendere il tuo pulsante CTA facile da leggere e accattivante.
4. Immagini: Come Usarle Senza Compromettere la Deliverability
Le immagini rendono le email più coinvolgenti, ma devono essere utilizzate con intenzione.
Le immagini sono un ottimo modo per rendere il contenuto più coinvolgente, attraente e professionale. Tuttavia, usa le immagini per rafforzare il tuo messaggio piuttosto che distrarre da esso.
La regola 60/40 in pratica
Per email di marketing o promozionali, il rapporto suggerito è 60% testo a 40% immagine. Questo bilancia l'appeal visivo con la deliverability, utilizzando una copia convincente supportata da forti immagini di prodotto. Per le newsletter, è consigliato un rapporto 70% testo a 30% immagine, dove il valore principale proviene da contenuto scritto mentre le immagini servono a migliorare e suddividere il testo.
I test contro 23 dei filtri anti-spam più popolari hanno rilevato che se un'email ha 500 caratteri o più, il rapporto contenuto-immagine non influisce sulla deliverability. Detto questo, mantenere un equilibrio sano rimane una pratica intelligente, in particolare per i pubblici B2B e gli utenti di Outlook.
Regole chiave per le immagini in Mailchimp:
- Aggiungi sempre testo alt descrittivo. Se non fornisci testo alt descrittivo, la tua email diventa inaccessibile quando le immagini sono bloccate o per gli utenti che si affidano a screen reader.
- Mantieni le immagini sotto 200KB. Le immagini grandi impiegano più tempo a caricarsi e consumano dati preziosi.
- Evita email composte interamente da immagini. Un'email composta interamente da immagini rimane un importante red flag per la deliverability, principalmente per le preoccupazioni relative all'aggiramento di filtri basati su testo, oltre a porre sfide di accessibilità e scarsa esperienza utente.
- La maggior parte dei client email ora mostra le immagini per impostazione predefinita. Litmus ha ampiamente testato i download automatici di immagini e ha scoperto che tutti i client email mobili consentono le immagini per impostazione predefinita.
5. Pulsanti CTA: Scelte di Design che Guidano i Click
Il tuo pulsante call-to-action è l'elemento funzionale più importante in qualsiasi email Mailchimp. Tutto il resto del design esiste per portare il lettore a quel click.
Senza un call to action efficace, i clienti non sanno cosa fare una volta che hanno aperto la tua email. I pulsanti email possono incoraggiare i sottoscritti a intraprendere azioni, riportandoli al tuo sito web dove possono convertire.
Progetta CTA che si distinguono e guidano i click. Usa colori contrastanti e parole d'azione convincenti che comunicano chiaramente cosa accade quando i sottoscritti cliccano. Mantieni i CTA semplici e orientati all'azione focalizzandoti su un'azione principale per email per evitare di confondere il tuo pubblico e diluire il tuo messaggio.
Per il mobile, le dimensioni dei pulsanti contano più di quanto la maggior parte dei marketer realizzi. I target di tocco call-to-action, come i pulsanti, dovrebbero essere almeno 46px quadrati. Apple consiglia 44px quadrati; Google consiglia 48px quadrati.
Principi aggiuntivi per il design dei CTA:
- I pulsanti HTML si caricano più velocemente e si visualizzano in tutti i client, anche quando le immagini sono disattivate, rendendo la tua email più efficace perché gli utenti vedranno il tuo CTA e sapranno cosa fare dopo.
- Il tuo CTA dovrebbe essere solo poche parole per dire ai clienti esattamente cosa fare.
- Posiziona il tuo CTA principale sopra il fold dove possibile. Il tuo pulsante call-to-action dovrebbe essere visibile senza scorrere.
- Su mobile, considera di far sì che i CTA importanti come i pulsanti si estendano per tutta la larghezza dell'email, coprendo sia i lettori destrorsi che sinistrorsi.
Per ulteriori informazioni sulla scrittura di subject line che portino le persone al CTA in primo luogo, leggi la nostra guida su Email Subject Line Best Practices That Boost Open Rates by 27%.
6. Mobile-First Design in Mailchimp
I client mobili rappresentano il 41,6% degli open email, seguiti dagli open webmail al 40,6% e dagli open desktop al 16,2%. Progettare per il desktop prima e poi adattarsi per il mobile è un approccio all'indietro che ti costa engagement.
L'importanza del design email mobile-friendly è fondamentale per le campagne di email marketing di successo. Con la maggior parte delle email ora aperte su dispositivi mobili, assicurarsi che le tue email si vedano bene su mobile non è solo una raccomandazione, è una necessità.
Le aziende vedono un aumento del 15% nei click da mobile quando creano un design email mobile-responsive.
Checklist di mobile design per le campagne Mailchimp:
- Usa layout a colonna singola come struttura predefinita.
- Imposta le dimensioni minime dei font a 16px per il testo del corpo.
- Usa pulsanti CTA a larghezza intera su mobile in modo che siano tappabili con entrambe le mani.
- Mantieni le subject line sotto i 40 caratteri. I desktop mostrano 60 caratteri della subject line di un'email. I sottoscritti che utilizzano smartphone riescono a vedere tra 25 e 30 caratteri, quindi inserisci le informazioni più essenziali per prime.
- Includere un preheader coinvolgente in un'email dà ai lettori un ulteriore motivo per cliccare e li guida dolcemente nell'introduzione del contenuto. L'aggiunta di un preheader aumenta gli open rate del 13,72%.
Con Mailchimp, puoi facilmente visualizzare in anteprima le tue email per assicurarti che si vedano bene su diversi client email web e mobili utilizzando lo strumento Inbox Preview integrato prima di inviare.
7. Utilizzo di Mailchimp Brand Kit e Strumenti di Design AI
Mailchimp ha integrato l'AI nel suo flusso di lavoro di design in modo genuinamente utile per i team senza designer dedicati.
Mailchimp Brand Kit ti consente di salvare e aggiornare i tuoi loghi, font, colori e personalità del brand. Utilizza AI e gli asset nel tuo brand kit per generare rapidamente grafiche e layout eleganti e coerenti con il tuo brand per le tue email, post social, flussi di automazione e altro.
L'AI dietro le quinte è sostanziale. Un utente inserisce semplicemente l'URL del suo sito web nel Mailchimp Content Studio e l'AI rileva, analizza e classifica automaticamente tutti gli elementi del brand rilevabili. Il servizio cattura loghi, colori del brand, abbinamenti di colori di background e testo, font e stili di font, immagini del brand e una guida di stile completa del sito web inclusi stili di pulsanti, pattern di navigazione e trattamenti di background.
Per il feedback su copia e design, il Content Optimizer, alimentato da tecnologia simile a ChatGPT, analizza la tua copia e il tuo design e offre suggerimenti per migliorare la leggibilità, il tono e i call to action.
In termini di quello che l'AI gestisce bene: Creative Assistant può costruire un'email di invito a un webinar in circa 4 minuti rispetto ai 25 minuti di costruzione da zero. Il layout generato dall'AI è tipicamente pronto all'80%, con solo l'immagine di intestazione e il colore del pulsante CTA che necessitano di regolazione. Fatica con layout complessi a più colonne, email di e-commerce con griglie di prodotti dinamici e qualsiasi cosa che richieda HTML o CSS personalizzato.
Per mantenere un brand coerente nella casella di posta dei tuoi destinatari, è importante avere un template email che usi per le tue campagne. Un brand kit forte combinato con un piccolo set di template riutilizzabili elimina l'incoerenza che deriva dalla costruzione di ogni campagna da zero.
Per uno sguardo più approfondito alla personalizzazione oltre il design, vedi la nostra guida su 7 Email Personalization Techniques That Boost Conversions 47%.
8. Testing, Anteprima e Invio con Sicurezza
Il lavoro di design non è finito quando fai clic su "salva". Le campagne che progetti in Mailchimp appariranno sempre un po' diverse quando visualizzate nella casella di posta dei destinatari. Diversi client email e dispositivi visualizzano le email HTML secondo i loro singoli motori di rendering.
Prima di inviare un'email, testa il tuo contenuto in modo da non inviare email con dati mancanti o link interrotti. Gli strumenti di anteprima e test di Mailchimp aiutano a garantire che le tue immagini si carichino correttamente e che tutti i link ipertestuali e i pulsanti funzionino. Invia alcuni email di test a te stesso per assicurarti che tutto appaia nel modo in cui desideri.
Checklist pre-invio:
- Visualizza in anteprima su desktop e mobile utilizzando l'Inbox Preview di Mailchimp.
- Invia un'email di test a te stesso e ad almeno un altro dispositivo.
- Verifica tutti i link, specialmente i pulsanti CTA.
- Verifica che le immagini si visualizzino correttamente e che sia presente il testo alt.
- Conferma che il tuo subject line e il testo del preheader si vedano bene in entrambi i client.
- Verifica di aver evitato tutte le lettere maiuscole, troppi punti esclamativi e parole o frasi strane, che i filtri anti-spam cercano.
Per la segmentazione dell'elenco che assicura che le persone giuste vedano queste email ben progettate in primo luogo, leggi la nostra guida su Email List Segmentation Strategies That Boost ROI by 760%. 
Domande Frequenti
Qual è la larghezza email consigliata per i template Mailchimp?
I template Mailchimp sono progettati per non superare i 600px di larghezza, in modo da adattarsi alle capacità di visualizzazione della maggior parte dei client email. Anche se puoi allargare un template, questo è lo standard che si visualizza in modo affidabile su Gmail, Outlook, Apple Mail e client mobili.
Devo usare layout a colonna singola o a più colonne in Mailchimp?
Dipende dal tipo di contenuto. Un layout a colonna singola funziona bene per la visualizzazione su dispositivi mobili e mantiene il design semplice, mentre un design a più colonne può mostrare più prodotti o funzioni contemporaneamente. Per la maggior parte dei casi di utilizzo, la colonna singola è il default più sicuro perché si visualizza in modo prevedibile su ogni dimensione dello schermo.
Quale dimensione di font devo usare nelle email Mailchimp per il mobile?
Una dimensione font minima di 16px è consigliata per il mobile. Apple consiglia 17-22px e Google consiglia 18-22px. Qualsiasi cosa inferiore a 16px richiede agli utenti di pizzicare lo zoom, il che riduce significativamente l'engagement.
Come mantengo la coerenza del brand su tutte le campagne email di Mailchimp?
Salva i tuoi loghi, font, colori e personalità del brand in Mailchimp Brand Kit. La piattaforma userà AI e quegli asset per generare rapidamente grafiche e layout eleganti e coerenti con il tuo brand per le tue email, post social e flussi di automazione. Abbina questo con un piccolo set di template di campagna riutilizzabili e l'output di design rimarrà coerente senza iniziare da zero ogni volta.
