Perché il tuo modello di email ChatGPT arriva rotto

Il tuo modello di email ChatGPT nella chat è perfetto: colonne ordinate, un pulsante bello grande, i colori del tuo brand. Poi invii una prova e Outlook allarga l’email su tutto lo schermo, Gmail perde gli stili e al posto del logo c’è uno spazio vuoto. Ti suona familiare? Non è colpa di ChatGPT in particolare. Claude, Gemini, Copilot e gli altri strumenti di IA fanno gli stessi errori, perché la causa è la stessa.

In questo articolo vediamo perché un’email HTML scritta dall’IA spesso si vede male nei client di posta, passiamo in rassegna gli errori tipici con esempi di codice e ti mostriamo come trasformare quell’HTML in un’email che arriva agli iscritti esattamente come l’hai progettata.

Perché succede: l’IA ha imparato a scrivere codice sui siti web

Un modello di IA scrive l’HTML nel modo in cui l’ha visto più spesso. E quasi tutto l’HTML su internet sono siti web: milioni di pagine costruite secondo le regole del web moderno, con blocchi <div>, griglie flessibili, stili in un file separato e immagini SVG. Per un browser è codice corretto. E l’IA lo riproduce fedelmente anche nella tua email.

Ma un client di posta non è un browser. Le email seguono regole proprie, e sono indietro di anni rispetto al web. Il classico Outlook per Windows mostra ancora le email con il motore di Microsoft Word, non con quello di un browser, e Microsoft ha promesso di supportarlo almeno fino al 2029. Gmail elimina una parte degli stili. GMX e WEB.DE in Germania e La Poste e SFR in Francia ignorano gli stili scritti in un blocco separato. Risultato: l’HTML5 e il CSS3 su cui si basa un sito moderno nelle campagne email non funzionano.

Un dettaglio importante: una campagna parte verso tutti i tuoi iscritti nello stesso momento. Non puoi scegliere chi la apre in Gmail e chi in Outlook. Quindi, se una tecnica si rompe anche solo in un client di posta importante, per le email non va bene. È questo il metro che usiamo per gli errori qui sotto.

Errore 1. Div e flexbox, come su un sito web

Ecco come si presenta di solito un’email scritta dall’IA: due schede prodotto affiancate in un blocco da 600 pixel centrato nella pagina.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

Per un sito web è tutto giusto. Per un’email, quasi ogni riga è un problema. Il classico Outlook per Windows non capisce display: flex, quindi le schede finiscono una sopra l’altra invece di stare in fila. Rispetta max-width solo sulle tabelle e non supporta affatto la centratura con margin: auto, quindi l’email si allarga su tutta la finestra. Outlook non conosce nemmeno i tag <main> e <section>, e Gmail sostituisce alcuni di questi tag con i propri.

Come l’hai progettata

Blocks Store

Come è arrivata in Outlook per Windows

Blocks Store

Cosa significa per te: nelle email il layout si costruisce con le tabelle, non con i blocchi. Sembra un metodo d’altri tempi, ma tutti i client capiscono le tabelle allo stesso modo, compreso Outlook con il suo motore di Word. Ecco le stesse due schede scritte come si fa nelle email:

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

L’IA sa scrivere un codice così, se glielo chiedi. Ma di base sceglie il markup dei siti web, quello che ha visto più spesso. Se ti incuriosisce come si scrivono a mano le email con le tabelle e come aiutano i framework, dai un’occhiata al nostro confronto tra framework per email.

Errore 2. Stili in un blocco separato, non nei tag

Un sito web tiene il design separato dai contenuti: gli stili si descrivono una volta sola in un blocco <style> o in un file a parte, e gli elementi li richiamano tramite le classi. L’IA fa lo stesso:

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Molti client di posta quel blocco lo buttano via e basta. La versione web mobile di Gmail, GMX, WEB.DE, La Poste e SFR non leggono affatto <style>. L’app di Gmail lo ignora quando la casella di posta non è un account Google, per esempio un indirizzo di lavoro. Gmail sul web accetta gli stili solo nell’intestazione dell’email, il <head>, e solo fino a 16 KB. Basta che il blocco cresca un po’ di più e tutto il design sparisce in un colpo. Gmail e Outlook.com non supportano affatto il collegamento a un foglio di stile esterno con <link>.

Come l’hai progettata

Blocks Store

Saldi d’autunno

Fino al 50% di sconto su tutta la collezione, solo fino a domenica.

Scopri i saldi

Come è arrivata senza il blocco di stili

Blocks Store

Saldi d’autunno

Fino al 50% di sconto su tutta la collezione, solo fino a domenica.

Scopri i saldi

Cosa significa per te: in un’email ogni regola di design si scrive direttamente nel tag, nell’attributo style. Si chiamano stili inline. Il codice è di più, ma gli stili non si perdono per strada:

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

Però non festeggiare ancora per questo pulsante: in Outlook per Windows si romperà comunque. Ti spieghiamo perché nel quarto errore.

Errore 3. Immagini SVG e base64

L’IA non può allegare un file immagine alla risposta, quindi trova una scorciatoia. Disegna il logo e le icone direttamente nel codice in SVG. E se le hai dato un’immagine, la inserisce nell’HTML in base64, una lunga stringa di caratteri al posto del link a un file:

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

Nel browser funzionano entrambe. Nelle email nessuna delle due. Gmail, Outlook e Yahoo non mostrano l’SVG disegnato nel codice. Gmail trasforma in PNG un file SVG collegato come normale immagine, che così perde nitidezza e animazione. Gmail e il nuovo Outlook per Windows non mostrano le immagini in base64: al loro posto trovi uno spazio vuoto.

Come l’hai progettata

Blocks Store

Saldi d’autunno

Come è arrivata in Gmail

Il base64 ha anche un secondo difetto: appesantisce l’email. Un’immagine scritta in caratteri occupa nel codice circa un terzo di spazio in più rispetto al file. Un paio di banner e l’email diventa così pesante che Gmail la taglia. Ne parliamo nel quinto errore.

Cosa significa per te: le immagini di un’email devono stare su un server come file PNG, JPG o GIF, e nel codice ci va solo il link, con le dimensioni:

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Errore 4. Outlook per Windows guarda la tua email attraverso Word

Il classico Outlook per Windows merita un discorso a parte. Non mostra l’email con un browser, ma con il motore dell’editor di testo Word. Per questo non capisce molte cose che qualsiasi IA considera di base. Ecco una tipica prima schermata di un’email fatta dall’IA, con un’immagine di sfondo, un titolo sopra e un pulsante:

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

In Outlook si rompe tutto insieme:

• Non mostra l’immagine di sfondo impostata con background-image. Il titolo bianco finisce su uno sfondo bianco e sparisce.
• Outlook per Windows, Outlook per Mac e Outlook.com non supportano il tag <button> nelle email.
• Outlook rispetta padding solo nelle celle delle tabelle. Un pulsante fatto con un link e un po’ di padding si restringe fino alla misura del testo.
• Non disegna border-radius, quindi gli angoli vengono squadrati.

Come l’hai progettata

Saldi d’autunno

Fino al 50% di sconto, solo fino a domenica

Acquista ora

Come è arrivata in Outlook per Windows

Saldi d’autunno

Fino al 50% di sconto, solo fino a domenica

Acquista ora

Cosa significa per te: per Outlook le email si scrivono con tecniche speciali. Il pulsante si costruisce da una cella di tabella con un colore di sfondo, e un pulsante così sopravvive ovunque:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

Un’immagine di sfondo richiede codice a parte in VML, un vecchio linguaggio di markup che capisce solo Outlook. Gli strumenti di IA non se ne ricordano quasi mai. E chi fa marketing non ha alcun motivo per impararlo.

Errore 5. Un’email pesante che Gmail taglia

Gmail mostra un’email per intero solo se il suo codice pesa meno di circa 102 KB. Quello che non ci sta finisce nascosto dietro la riga «[Messaggio troncato] Visualizza intero messaggio». Conta il codice: testo, stili, indirizzi dei link e delle immagini. Le immagini caricate tramite link non rientrano in questo peso, quelle in base64 sì.

Gli strumenti di IA sono prolissi. Ripetono gli stessi stili su ogni elemento, aggiungono contenitori e commenti superflui e inseriscono le immagini nel codice. Il taglio colpisce la parte più importante: in fondo all’email di solito ci sono il link per annullare l’iscrizione e il pixel invisibile con cui il tuo servizio di email conta le aperture. Un iscritto che vuole disiscriversi non trova il link e magari preme «Spam». E le aperture di quell’email non finiscono nelle tue statistiche.

Cosa significa per te: tieni d’occhio il peso del codice. Se l’email supera i 100 KB, va alleggerita: togli le ripetizioni, sposta le immagini su un server, elimina il superfluo.

Errore 6. Manca il preheader

Il preheader è il breve testo che la casella di posta mostra accanto all’oggetto. Se manca, la casella prende il primo testo che trova in cima all’email. Di solito è «Visualizza nel browser», le voci del menu o la scritta sotto il logo. Gli strumenti di IA non aggiungono quasi mai un preheader, perché sui siti web un elemento del genere non esiste.

Cosa significa per te: il preheader è un secondo oggetto e influisce sull’apertura dell’email. Si aggiunge come blocco nascosto all’inizio del codice:

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

Per saperne di più su cosa rende efficace un’email, leggi la nostra guida al design delle email.

Errore 7. Script, moduli e video

Su un sito web è normale aggiungere parti interattive: uno slider in JavaScript, un modulo di iscrizione, un video. Per abitudine, l’IA li aggiunge anche alle email. Nelle email non funziona niente di tutto questo:

• I client di posta non eseguono gli script e li eliminano per proteggersi dal codice dannoso. Alcuni servizi di email non ti lasciano nemmeno salvare un’email che contiene uno script.
• Gmail sostituisce il tag <video> con un segnaposto vuoto, mentre Outlook per Windows e Yahoo non lo mostrano. Il video parte soprattutto in Apple Mail.
• I moduli non funzionano in Outlook per Windows, Yahoo su iPhone, Proton Mail e GMX, e in Outlook.com e Outlook per Mac i dati non vengono inviati.

Cosa significa per te: al posto del video, nell’email si usa un’immagine di copertina con il link al video, e al posto del modulo un pulsante che porta a una pagina con il modulo. Se l’interattività ti serve davvero, servono tecniche speciali, di cui abbiamo parlato nell’articolo sulle email animate.

Come chiedere all’IA di scrivere bene un’email

Molti di questi errori li puoi evitare spiegando all’IA fin dall’inizio le regole del codice delle email. Ecco un prompt da aggiungere alla tua richiesta:

Scrivi un’email HTML per una campagna email, non una pagina web. Per il layout usa solo tabelle con role=“presentation”, senza griglie di div, flex o grid. L’email è larga 600 pixel. Scrivi tutti gli stili inline nell’attributo style, senza blocco style e senza classi. Non usare i tag header, main, section, footer o button. Le immagini devono essere PNG o JPG con URL completo, width, height e alt, senza SVG e senza base64. Crea i pulsanti da una cella di tabella con un colore di sfondo. Niente JavaScript, moduli o video. Aggiungi un preheader nascosto all’inizio dell’email. Tieni il codice sotto i 100 KB.

Con un prompt così il risultato migliora parecchio. Ma diciamolo chiaramente: non risolve tutto.

Primo, su un’email lunga l’IA comincia a dimenticare le regole a metà strada. I primi blocchi sono fatti con le tabelle, poi nel footer ricompaiono <div> e flexbox. Secondo, l’IA non vede come appare l’email in una casella di posta. Ti scriverà sicura «questo codice è compatibile con tutti i client di posta», ma non ha modo di verificarlo: l’email in Outlook non l’ha mai aperta. E terzo, non puoi verificare il codice nemmeno tu, a meno che scrivere email non sia il tuo mestiere. Servono una serie di caselle di prova in client diversi o un servizio di test a pagamento.

L’IA è bravissima a pianificare la struttura di un’email e a scrivere i testi, come raccontiamo nell’articolo sull’IA nell’email marketing. Ma il codice finale è più al sicuro nelle mani di uno strumento che conosce le regole delle email.

Come trasformare il codice dell’IA in un’email che funziona

È proprio a questo che serve il convertitore di email HTML di Blocks. Prende il codice scritto dall’IA e lo ricostruisce secondo le regole delle email. Corregge da solo tutto quello che abbiamo visto: trasforma blocchi e flexbox in tabelle, sposta gli stili dentro i tag e mette in ordine immagini, pulsanti e Outlook.

Ecco come funziona:

1. Incolla il codice dell’email in Blocks o importa il file.
2. Blocks capisce che l’email è stata creata altrove e ti propone di convertirla.
3. Di solito la conversione richiede meno di un minuto.
4. L’email si apre nell’editor, pronta per l’esportazione verso il tuo servizio di email.

C’è anche un secondo vantaggio, facile da trascurare. Dopo la conversione l’email non è più un muro di codice che hai paura di toccare. Si apre nell’editor divisa in blocchi: titolo, immagine, testo, pulsante. Puoi sistemare a mano qualsiasi punto, un dettaglio alla volta: cambiare una parola, sostituire un’immagine, ricolorare un pulsante, tutto senza codice e senza un’altra richiesta all’IA. E quando esporti, Blocks genera di nuovo un codice che i client di posta capiscono.

Se non sei sicuro che un’email HTML valga la fatica, confrontala con una in solo testo nel nostro articolo «Email HTML o solo testo».

In breve

• I modelli di IA hanno imparato a scrivere codice sui siti web, quindi un modello di email di ChatGPT, Claude o Gemini è costruito come una pagina web.
• Una campagna parte verso tutti nello stesso momento. Se una tecnica non funziona anche solo in un client di posta importante, per le email non va bene.
• Gli errori principali: div e flexbox al posto delle tabelle, un blocco di stili separato al posto degli stili inline, immagini SVG e base64, tecniche che Outlook per Windows non capisce, codice troppo pesante, preheader mancante e poi script, moduli e video.
• Un prompt dettagliato aiuta ma non garantisce il risultato, e senza test il codice non lo puoi verificare.
• La strada sicura è passare il codice dell’IA in un convertitore e sistemare i dettagli a mano nell’editor.