Capitolo 6: Design e tecnica

Il design delle email nel 2026 è una disciplina strana. Stai progettando per un medium che si visualizza diversamente in decine di client email, su schermi che vanno dagli smartwatch ai monitor ultra-wide, sia in modalità chiara che scura, con vincoli tecnologici che farebbero piangere uno sviluppatore web. Eppure, le email che ottengono i migliori risultati sono spesso le più semplici.

Questo capitolo tratta le fondamenta tecniche che fanno sì che le tue email vengano visualizzate correttamente, si carichino rapidamente e convertano in modo affidabile.

Design Mobile-First

Oltre il 60% delle email viene ora aperto su dispositivi mobili. Questo numero è aumentato costantemente per anni e non tornerà indietro. Ancora più critico: il 64% degli utenti mobile elimina un'email che non viene visualizzata bene sul proprio telefono. Non "non sembra perfetta". Ma "non funziona".

Mobile-first significa progettare prima per lo schermo più piccolo, poi scalare verso l'alto.

I layout a colonna singola sono l'approccio più sicuro ed efficace. I design a più colonne che appaiono magnifici su desktop crollano in modo imprevedibile su mobile, spesso impilando gli elementi nell'ordine sbagliato o creando incubi di scorrimento orizzontale. Una singola colonna con testo, immagini e pulsanti di dimensioni appropriate funziona ovunque.

Mantieni la larghezza dell'email tra 600 e 640 pixel. Questo è lo standard che funziona nella più ampia gamma di client email. Più di 640px e rischi lo scorrimento orizzontale su schermi più piccoli e nei client email che aggiungono pannelli laterali.

I pulsanti touch-friendly devono essere di almeno 44x44 pixel. Questa è la Human Interface Guideline di Apple per le dimensioni minime dei target di tap, e suggerirei di andare leggermente più grandi, a 46x46 pixel, per tener conto di tap meno precisi. Niente distrugge più velocemente l'engagement delle email mobile di un pulsante troppo piccolo per essere toccato accuratamente.

Le dimensioni del font dovrebbero essere di almeno 13px su iPhone. Qualcosa di più piccolo di 13px su iOS attiva lo zoom automatico, che distrugge il tuo layout. Usa 14-16px per il testo del corpo e 20-22px per i titoli. Più grande è quasi sempre meglio su mobile.

Le righe dell'oggetto dovrebbero rimanere sotto i 30 caratteri per la visibilità mobile. La maggior parte dei client email mobile tronca le righe dell'oggetto tra 30 e 40 caratteri a seconda del dispositivo e se viene mostrato il testo di anteprima. Metti le parole importanti all'inizio.

Usa le media query per le immagini ottimizzate per mobile. Fornisci file immagine più piccoli ai dispositivi mobili, sia per la velocità di caricamento che per l'utilizzo dei dati. Un'immagine che si carica in 1 secondo su Wi-Fi potrebbe richiedere 5 secondi con una connessione mobile scarsa, e il tuo lettore non aspetterà.

La dimensione del file immagine è più importante di quanto la maggior parte dei marketer realizzi. Mantieni le singole immagini sotto i 200KB e il peso totale dell'email sotto gli 800KB. Comprimi tutte le immagini prima di caricarle. Usa TinyPNG o Squoosh per la compressione senza perdita. Molti ESP ridimensionano le immagini al volo, ma non sempre le comprimono in modo abbastanza aggressivo.

Usa i font web-safe come stack principale. I font personalizzati nelle email hanno un supporto inconsistente. Arial, Helvetica, Georgia e Verdana vengono visualizzati in modo affidabile ovunque. Puoi specificare un font web personalizzato come prima scelta e tornare a un font web-safe per i client che non lo supportano, ma sappi che la maggior parte dei tuoi lettori vedrà il fallback. Progetta tenendo a mente il fallback, non il font personalizzato.

Anteprima dell'email su dispositivi reali, non solo nel browser. Le anteprime nel browser desktop sono fuorvianti. L'email che appare perfetta nell'anteprima di Chrome potrebbe avere testo sovrapposto su un iPhone SE o immagini tagliate nell'app Gmail su Android. Usa Litmus, Email on Acid, o come minimo inviati un test e controllalo sul tuo telefono prima di inviare.

Gli schermi Retina e ad alta DPI richiedono immagini 2x. Se la colonna dell'email è larga 600px e usi un'immagine larga 600px, apparirà sfocata sugli schermi Retina (che sono la maggior parte dei telefoni e laptop moderni). Esporta le immagini a 2x la dimensione di visualizzazione (1200px per una colonna da 600px) e imposta la larghezza in HTML alla dimensione di visualizzazione. Il file sarà più grande, quindi la compressione diventa ancora più importante.

Compatibilità dei client email

Ecco la verità scomoda sullo sviluppo delle email: stai ancora costruendo con le tabelle. Nel 2026. Mentre il web è passato a CSS Grid e Flexbox, l'email rimane ancorata alle tabelle HTML per il layout.

Perché? Perché Microsoft Outlook usa il motore di rendering di Word (sì, il word processor) per visualizzare le email HTML. E Outlook detiene una quota di mercato sufficiente, particolarmente nel B2B, che non puoi ignorare. Le tabelle si renderizzano in modo coerente nel motore di Word. I CSS moderni no.

Usa CSS inline. La maggior parte dei client email rimuove i fogli di stile esterni e molti rimuovono gli stili dal <head>. L'unico modo affidabile per assicurarsi che i tuoi stili vengano applicati è inlinarli direttamente su ogni elemento. Ogni strumento serio per la costruzione di email gestisce questo automaticamente durante l'esportazione.

Il design responsive usando le media query funziona nella maggior parte dei client email moderni: Apple Mail, iOS Mail, app Gmail, Outlook mobile, Yahoo. Il client web desktop di Gmail supporta tecnicamente le media query, ma poiché l'email viene visualizzata in una finestra di anteprima più piccola piuttosto che nel viewport completo, le query spesso non si attivano. Lo stesso vale per la maggior parte dei client webmail, sebbene alcuni usino iframe per visualizzare l'email, nel qual caso le media query si attivano. Costruire mobile-first aiuta qui, perché quelle media query verranno attivate. Per una compatibilità più ampia, il design ibrido è la tua rete di sicurezza.

Il design ibrido (chiamato anche design spugna) è il tuo fallback. Usa layout fluidi, larghezze basate su percentuali e commenti condizionali per creare email che si adattano alle dimensioni dello schermo senza fare affidamento sulle media query. Può essere fatto con o senza tabelle. Mark Robbins generalmente raccomanda di usare un div con una tabella fantasma, che evita molti problemi a cascata che le tabelle causano. L'email appare bene a qualsiasi larghezza perché la struttura sottostante è flessibile per impostazione predefinita.

Mark Robbins (ora Developer Advocate per Email Experience presso Customer.io) ha aperto la strada alle tecniche CSS-only per le email che spingono ciò che è possibile senza JavaScript (che è bloccato in tutti i client email). Il suo lavoro su componenti interattivi solo CSS, miglioramenti dell'accessibilità e progressive enhancement ha fatto avanzare considerevolmente il settore. Se stai costruendo email a livello tecnico, studia il suo lavoro.

Differenze comuni nel rendering dei client email da testare:

Outlook desktop (2019/2021/365) usa il motore di rendering di Word, il che significa: nessun supporto per le immagini di sfondo CSS, controllo del padding limitato e spaziatura delle tabelle imprevedibile. VML (Vector Markup Language) è stato tradizionalmente raccomandato per le immagini di sfondo in Outlook, ma Mark Robbins ha evidenziato che VML causa gravi problemi di accessibilità e raccomanda di evitarlo. Considera invece l'uso di un colore di sfondo solido come fallback per Outlook.

Gmail web rimuove tutti gli stili dal <head> se superano una certa soglia di dimensione (circa 16KB, aumentata dal precedente limite di circa 8.192 caratteri). Se il tuo CSS è complesso, alcuni stili verranno rimossi silenziosamente. E sebbene Gmail supporti tecnicamente le media query, la dimensione della finestra di anteprima significa che raramente si attivano nel client web, ecco perché il design ibrido è importante.

Apple Mail è il client email più conforme agli standard e supporta quasi tutto, incluse le media query, le animazioni CSS e @supports. È il client ideale per lo sviluppo, ma non lasciare che ti faccia pensare che altri client si comporteranno allo stesso modo.

Yahoo Mail e AOL sono migliorati significativamente negli ultimi anni ma hanno ancora stranezze riguardo al supporto delle media query e alla gestione dei margini. testa sempre.

Strumenti di design per email

L'ecosistema di strumenti per il design delle email è maturato significativamente. Ecco cosa raccomanderei nel 2026, suddiviso per caso d'uso.

Approfondiamo con più contesto.

Builder no-code per i team di marketing:

Beefree (ex BEE) è la mia prima raccomandazione per i team che hanno bisogno di costruire email rapidamente senza programmazione. L'interfaccia drag-and-drop è genuinamente buona, e la funzione dei moduli salvati consente di costruire una libreria di componenti riutilizzabili. Stripo è la migliore opzione se hai bisogno del supporto AMP for Email o vuoi accedere a una vasta libreria di template (1.400+ template). Chamaileon è costruito per i team enterprise che necessitano di governance del brand e workflow di approvazione integrati nel processo di creazione delle email.

Piattaforme di test:

Litmus rimane lo standard di riferimento, offrendo anteprime su oltre 90 combinazioni di client email e dispositivi. Non è economico, ma se stai inviando a un pubblico diversificato (e probabilmente lo sei), vedere come la tua email viene renderizzata in Outlook 2019 su Windows vs Apple Mail su macOS vs Gmail su Android è essenziale. Email on Acid offre anteprime di rendering simili più test antispam a un prezzo inferiore. Per i team con budget limitato, è una valida alternativa.

Framework di codice per sviluppatori:

MJML è un linguaggio di markup che compila in HTML email responsive. Scrivi markup pulito e semantico e MJML gestisce l'output basato su tabelle. È il framework per sviluppatori più popolare per le email. Maizzle porta Tailwind CSS nello sviluppo email, con una build pipeline che gestisce l'inlining, la rimozione del CSS inutilizzato e la generazione di HTML pronto per la produzione. React Email ti permette di costruire template email usando componenti React all'interno dell'ecosistema npm. Se il tuo team pensa già in termini di componenti, questo è un adattamento naturale. Parcel (non il web bundler, l'IDE email) fornisce anteprime in tempo reale e suggerimenti sul supporto CSS mentre programmi.

Workflow design-to-code:

I workflow da Figma a Email sono sempre più comuni. I team di design creano template email in Figma usando librerie di componenti, poi esportano in HTML tramite plugin o affidano i design a sviluppatori che li implementano in MJML o Maizzle.

Design email basato sull'IA

Il panorama degli strumenti di design è cambiato significativamente all'inizio del 2026, e il design assistito dall'IA non è più teorico. Ecco cosa è effettivamente utilizzabile oggi.

Figma MCP + Claude Code ("Code to Canvas") è lo sviluppo più significativo. Annunciata a febbraio 2026, l'integrazione MCP di Figma crea una connessione bidirezionale tra i file di design e gli strumenti di codice IA. Claude ispeziona i design Figma semanticamente — comprendendo sistemi di design, gerarchie di componenti, token di spaziatura e intenzioni, non solo i pixel. Per le email, descrivi quello che vuoi ("crea una sezione hero per email che corrisponda al nostro brand kit con un'immagine a larghezza piena, titolo, sottotitolo e pulsante CTA") e ottieni un design che rispetta il tuo sistema di design Figma esistente. Combinato con MJML o React Email, questo workflow va dal brief di design a un template email pronto per la produzione in minuti piuttosto che ore.

Paper.design è un canvas di design abilitato per MCP con 24 strumenti, nativo per HTML e CSS. A differenza di Figma, che emette vettori che necessitano di conversione, Paper lavora nel medium che le email effettivamente usano. Bidirezionale con Claude Code e Cursor — gli agenti IA possono ispezionare artboard, modificare layout, scrivere HTML e aggiornare stili. I token di design si sincronizzano da Figma, i dati API reali popolano le UI, e l'output si converte in React o Tailwind. Piano gratuito (100 chiamate MCP a settimana) e Pro ($20 al mese, 1M chiamate a settimana). Per i designer email che vogliono un design assistito dall'IA senza lasciare un ambiente nativo HTML, Paper rimuove un intero passaggio di conversione dal workflow.

Cursor per lo sviluppo email merita menzione perché è diventato l'ambiente di codice IA de facto, e i template email sono codice. I designer che usano MJML o React Email possono iterare 10 volte più velocemente in Cursor rispetto a un editor tradizionale. Descrivi il cambiamento che vuoi in linguaggio naturale, Cursor scrive il codice, tu visualizzi l'anteprima del risultato. Per i team che hanno spostato lo sviluppo email nel codice (che, come mostrato dalla sezione sui framework sopra, è la direzione che si sta seguendo), Cursor comprime il ciclo di feedback tra "voglio questo" e "eccolo".

Il workflow design-from-Claude di Nitrosend ti consente di progettare template email interamente tramite linguaggio naturale, sia tramite il server MCP in Claude che tramite la chat IA integrata di Nitrosend. "Crea una vetrina prodotti a due colonne con il nostro logo nell'intestazione, tre schede prodotto con immagini e prezzi, e un pulsante CTA verde" produce un template renderizzato su cui puoi iterare in modo conversazionale. Per i fondatori solisti e i piccoli team senza risorse di design, questo elimina completamente il collo di bottiglia del design. Attualmente in beta chiusa.

Altri strumenti di design IA da tenere d'occhio:

Mailmodo offre la creazione di email IA end-to-end — descrivi l'email che vuoi, e genera un'email interattiva completa con supporto AMP. EmailCanvasAI genera template email da prompt di testo. Il generatore di template IA di Mailjet crea design di partenza da brevi descrizioni. Questi sono strumenti in fase iniziale, ma segnalano la direzione: il design email si sta spostando da "costruiscilo visivamente" a "descrivilo in modo conversazionale".

La raccomandazione pratica: Se il tuo team usa già Figma, esplora il workflow Figma MCP + Claude Code per il tuo sistema di design. Se sei orientato agli sviluppatori, Cursor con MJML o React Email è il percorso più rapido verso lo sviluppo email assistito dall'IA. Se sei un piccolo team senza risorse di design o sviluppo dedicate, l'approccio di design IA di Nitrosend o Mailmodo elimina completamente il collo di bottiglia. E se vuoi il massimo controllo sul design HTML nativo con assistenza IA, Paper.design vale la pena essere valutato.

Template no-code vs template programmati

Questa non è una decisione di tipo "o l'uno o l'altro". Si tratta di abbinare l'approccio al caso d'uso.

Gli strumenti no-code sono da 3 a 5 volte più veloci per le campagne one-off. Quando hai bisogno di costruire una singola email promozionale, un builder drag-and-drop ti ci porta in 30 minuti invece di 3 ore. Usa Beefree, Stripo o il builder integrato del tuo ESP.

I template programmati sono migliori per i flussi ricorrenti, il controllo versione e i sistemi di design. Quando stai costruendo una serie di benvenuto che invierà a migliaia di iscritti per mesi o anni, investire in un template correttamente programmato vale la pena. I template programmati possono vivere nel controllo versione (Git), essere revisionati nelle pull request e aggiornati sistematicamente in un intero flusso.

La maggior parte dei programmi email maturi usa entrambi. Template programmati per i flussi automatizzati (benvenuto, carrello abbandonato, post-acquisto) e strumenti no-code per le campagne one-off (lanci di prodotti, promozioni stagionali, annunci). Questo approccio ibrido ti dà coerenza dove conta e velocità dove ne hai bisogno.

Sistemi di design per template email

Se stai inviando più di una manciata di tipi di email, hai bisogno di un sistema di design. Non un template. Un sistema.

I token del brand definiscono le costanti: i colori primari e secondari, lo stack di font, le unità di spaziatura standard (8px, 16px, 24px, 32px), il raggio del bordo per i pulsanti e qualsiasi altra costante visiva. Documentali una volta e fai riferimento ad essi ovunque.

Una libreria di componenti contiene i mattoni: intestazione (logo, navigazione), sezione hero (immagine, titolo, CTA), blocco di testo (titolo, corpo, link), scheda prodotto (immagine, titolo, prezzo, pulsante), pulsante CTA (primario, secondario, link di testo) e piè di pagina (link social, testo legale, annullamento iscrizione). Ogni componente ha un comportamento responsive definito, un trattamento in modalità scura e requisiti di accessibilità.

I template di layout combinano componenti in tipi di email standard: email promozionale, newsletter, notifica transazionale, email di benvenuto, carrello abbandonato. Questi sono i tuoi punti di partenza, non i tuoi vincoli.

Le linee guida d'uso dicono al tuo team quando usare cosa, quanto testo includere, quali componenti sono obbligatori (piè di pagina, annullamento iscrizione) rispetto a opzionali, e qualsiasi regola del brand riguardante immagini, tono o posizionamento del CTA.

Costruire un sistema di design richiede tempo all'inizio. Per un tipico brand e-commerce, aspettati 40-60 ore di lavoro di sviluppo iniziale. Ma quell'investimento si ripaga rapidamente. Una volta che il sistema è in atto, costruire una nuova email scende da 3-4 ore a 30-60 minuti. E ogni email che invii è automaticamente in linea con il brand e accessibile.

Se sei un team più piccolo senza le risorse per un sistema di design completo, inizia con un singolo template principale ben costruito che copre il tuo tipo di email più comune (di solito un'email promozionale). Costruiscilo correttamente una volta, con supporto per la modalità scura, funzionalità di accessibilità e ottimizzazione mobile. Poi adattalo per ogni invio. Questo non è un sistema di design, ma risolve l'80% del problema.

Accessibilità

Paul Airy è stato la voce principale sull'accessibilità delle email per anni, e il suo messaggio centrale merita di essere ripetuto: le email accessibili non sono solo la cosa giusta da fare, ottengono risultati migliori per tutti.

Si stima che il 15-20% delle persone abbia una qualche forma di disabilità. Questo include disabilità visive, disabilità motorie, differenze cognitive e disabilità situazionali (come leggere un'email con una mano sola tenendo in braccio un bambino). Progettare per l'accessibilità significa progettare per tutti loro, e nel farlo, migliori l'email anche per l'altro 80%.

Requisiti WCAG 2.1 per le email:

Il contrasto dei colori deve soddisfare un rapporto di 4,5:1 per il testo normale e 3:1 per il testo grande. Usa uno strumento di verifica del contrasto. Ciò che sembra bene sul tuo monitor di fascia alta potrebbe essere illeggibile su uno schermo più economico alla luce solare diretta.

Tutte le immagini devono avere un testo alt descrittivo. Non "image1.jpg" o "banner". Descrivi cosa mostra l'immagine e cosa il lettore deve sapere. Se l'immagine è puramente decorativa, usa un attributo alt vuoto (alt="") in modo che i lettori dello schermo lo saltino.

Mantieni un ordine di lettura logico. I lettori dello schermo seguono l'ordine sorgente HTML, non il layout visivo. Assicurati che il tuo contenuto abbia senso quando viene letto linearmente, dall'alto verso il basso.

Includi un attributo lingua (lang="en") e un attributo direzione (dir="ltr") nel tuo elemento HTML in modo che i lettori dello schermo usino il modello di pronuncia corretto e la direzione del testo.

I link dovrebbero avere uno scopo chiaro solo dal loro testo. "Clicca qui" è privo di significato fuori contesto. "Scarica il rapporto Email Benchmark 2026" dice al lettore esattamente dove va il link.

Non fare affidamento solo sul colore per trasmettere informazioni. Se un prezzo viene mostrato in rosso per indicare una vendita, includi anche del testo che dica "Prezzo in vendita" o usa un testo barrato sul prezzo originale.

Usa testo scalabile. Non impostare mai le dimensioni del font in pixel che non possono essere sostituite dalle preferenze dell'utente.

Garantisci la navigabilità tramite tastiera. Tutti gli elementi interattivi devono essere raggiungibili e operabili tramite tastiera.

Nelle tabelle di layout, aggiungi role="presentation" per dire ai lettori dello schermo che la tabella viene usata per il layout, non per i dati. Senza questo attributo, i lettori dello schermo cercheranno di analizzare il tuo layout come una tabella di dati, creando un'esperienza confusa.

Target di tocco di minimo 44x44px non sono solo una best practice per mobile. Sono un requisito di accessibilità. Gli utenti con disabilità motorie necessitano di dimensioni adeguate per i target.

L'accessibilità non è una checklist che completi una volta. È una pratica che mantieni in ogni email. Aggiungi la revisione dell'accessibilità al tuo processo QA email. Prima di ogni invio, controlla: ogni immagine ha il testo alt? L'ordine di lettura è logico? Tutti i pulsanti e i link hanno dimensioni e contrasto sufficienti? Riesci a capire l'email se socchiudi gli occhi e riesci a leggere solo i titoli e il testo dei link? Se la risposta a una di queste domande è no, correggila prima di inviare.

Il test con il lettore dello schermo è lo standard di riferimento. Se vuoi davvero capire quanto siano accessibili le tue email, testale con un vero lettore dello schermo. VoiceOver su Mac e iOS, NVDA su Windows e TalkBack su Android sono tutti gratuiti. Ascoltare la tua email letta ad alta voce da un lettore dello schermo rivelerà problemi che l'ispezione visiva non rivelerà mai. Punta a farlo almeno una volta al trimestre sui tuoi template più usati.

Modalità scura

Almeno il 33% dei destinatari delle email visualizza le email in modalità scura, e questa percentuale è in crescita. La modalità scura può devastare i design email che non sono stati costruiti per gestirla.

I client email gestiscono la modalità scura in modo diverso. Alcuni invertono i colori. Alcuni scambiano gli sfondi. Alcuni fanno entrambe le cose. Il risultato può essere testo nero su sfondo nero (invisibile), link blu scuro su sfondo grigio scuro (quasi invisibile), o loghi con sfondi bianchi che ora hanno un rettangolo bianco stridente intorno a loro.

Testa le tue email in modalità scura in Apple Mail, Gmail e Outlook. Questi tre gestiscono la modalità scura in modo diverso, e insieme coprono la maggior parte degli utenti in modalità scura.

Usa PNG trasparenti per i loghi. Un logo con uno sfondo bianco su un'email bianca appare bene. Quello stesso logo in modalità scura ottiene un rettangolo bianco intorno. Gli sfondi trasparenti risolvono questo.

Evita gli sfondi bianco puro. Usa il bianco sporco (#F5F5F5 o simile) per lo sfondo del corpo dell'email. In modalità scura, il bianco puro (#FFFFFF) può creare un bagliore accecante. Il bianco sporco si adatta più elegantemente ed è più piacevole per gli occhi in entrambe le modalità.

Usa la media query CSS @media (prefers-color-scheme: dark) dove supportata per fornire stili espliciti per la modalità scura. Questo ti dà il controllo su come appare la tua email in modalità scura piuttosto che lasciare che il client email indovini. Il supporto è buono in Apple Mail e Outlook. Gmail lo ignora e applica le proprie trasformazioni per la modalità scura.

Consigli pratici per il design in modalità scura:

Usa un bordo o un'ombra sottile attorno alle immagini con sfondi bianchi o chiari in modo che non galleggino in modalità scura. Aggiungi un sottile bordo da 1px nel colore del tuo brand attorno ai loghi come misura di sicurezza.

Per i colori del testo, evita il testo nero puro (#000000) in modalità chiara. Usa invece grigio scuro (#333333 o #222222). In modalità scura, i client email spesso invertono il nero puro in bianco puro, che può risultare duro. Il testo leggermente sfumato rispetto al nero puro si inverte in bianco leggermente sfumato, più facile da leggere.

Testa i tuoi pulsanti CTA in entrambe le modalità. Un pulsante molto visibile su sfondo bianco potrebbe scomparire su sfondo scuro. Considera di aggiungere un bordo ai tuoi pulsanti in modo che rimangano visibili indipendentemente dal colore di sfondo.

Se stai usando colori di sfondo nelle sezioni di contenuto (come una casella con un consiglio evidenziato o un banner colorato), quei colori potrebbero essere modificati o rimossi in modalità scura. Assicurati sempre che il tuo contenuto sia leggibile anche se il colore di sfondo torna allo sfondo scuro predefinito del client email.

Email interattiva

Gli elementi interattivi nelle email possono aumentare significativamente l'engagement. I tassi click-to-open aumentano in media del 31,7% quando vengono inclusi elementi interattivi.

Ma l'interattività nelle email viene con un avvertimento critico: il supporto varia notevolmente tra i client email. Costruisci sempre con il progressive enhancement in mente, un concetto che Jason Rodriguez ha difeso. Il tuo elemento interattivo è un bonus per i client che lo supportano. Il fallback per i client che non lo fanno dovrebbe comunque essere un'email pienamente funzionale e dall'aspetto gradevole.

Gli effetti CSS hover hanno ampio supporto e offrono un miglioramento del 5-10% nell'engagement. Cose semplici come cambiamenti di colore dei pulsanti al passaggio del mouse, overlay delle immagini o animazioni di sottolineatura. Questi sono aggiunte a basso rischio e alto rendimento.

Gli accordion alimentati da CSS hanno un supporto moderato e possono offrire un miglioramento del 10-15%. Funzionano bene per le email ricche di contenuti come newsletter o confronti di prodotti, consentendo al lettore di espandere solo le sezioni di cui si preoccupa. Non funzionano in Gmail web o Outlook, quindi il tuo fallback dovrebbe mostrare tutto il contenuto espanso.

Le GIF animate hanno un supporto universale e offrono il 5-8% di engagement in più. Ogni client email supporta le GIF (con l'eccezione di alcune versioni Outlook desktop, che mostrano solo il primo frame). Sono l'elemento interattivo più sicuro che puoi usare. Dimostrazioni di prodotti, animazioni sottili e interesse visivo funzionano tutti bene.

AMP for Email offre l'interattività più potente con un miglioramento dell'engagement del 20-30%, consentendo caroselli, moduli, menu accordion e persino contenuto live all'interno dell'email. Ma il supporto è limitato a Gmail e Yahoo, richiede la registrazione del mittente Google, e l'adozione rimane bassa. Se il tuo pubblico è principalmente su Gmail e hai risorse di sviluppo, AMP può essere potente. Per la maggior parte dei mittenti, non vale ancora l'investimento.

I countdown timer sono un comune elemento interattivo per le email di vendita e le offerte a tempo limitato. Vengono generati lato server come GIF animate che mostrano un conto alla rovescia in diretta. Servizi come Sendtric e Mailmodo offrono generatori di countdown timer gratuiti e a pagamento. Funzionano in praticamente ogni client email. L'importante avvertimento: usa solo veri countdown timer per vere scadenze. Un timer che conta verso una vendita che si proroga tranquillamente in seguito addestra gli iscritti a ignorare la tua urgenza.

I sondaggi e le votazioni incorporati possono aumentare significativamente l'engagement perché trasformano l'email da un broadcast in una conversazione. Strumenti come Typeform e SurveyMonkey generano sondaggi a una domanda incorporabili che funzionano nella maggior parte dei client email. Per i client che non supportano la versione incorporata, il fallback è un link al sondaggio. anche un sondaggio a una sola domanda in una newsletter può aumentare i tassi di clic del 15-20%.

La regola d'oro dell'email interattiva: costruisci sempre prima il fallback. Progetta la tua email come se nessun elemento interattivo funzionerà. Poi aggiungi l'interattività in cima per i client che la supportano. In questo modo, ogni iscritto riceve un'email funzionale, e quelli con client email moderni ottengono qualcosa in più.