Email Ready: email HTML da Figma o da un'immagine

Trasformare un design in un'email HTML è più difficile che trasformarlo in una pagina web, perché una casella di posta non è un browser. Email Ready è la modalità di output di MarkupGen pensata per questo lavoro, e offre due strade: generare il codice HTML dell'email dal tuo design Figma, oppure creare l'email da un'immagine tagliando il design e aggiungendo link cliccabili. Questo articolo spiega entrambe, quando usare ciascuna e tutto ciò che lo strumento gestisce al posto tuo.

Che cos'è Email Ready

Ogni progetto MarkupGen ha un formato di output. Responsive HTML è per siti web e landing page. Email Ready («Pronto per l'email» nell'interfaccia italiana) è per newsletter ed email di marketing: invece di flexbox e grid produce HTML basato su tabelle con CSS inline, il formato che Gmail, Outlook e Apple Mail sanno visualizzare.

Lo scegli nelle impostazioni di layout del progetto, generi, e il risultato è un documento email completo anziché una pagina web.

Strada 1: generare codice HTML pronto per l'email

È la strada predefinita, e quella giusta quando l'email è fatta soprattutto di testo, pulsanti e immagini semplici.

• Layout a tabelle con CSS inline. Niente flexbox, niente grid, nessun foglio di stile esterno che un client di posta possa rimuovere.
• Testo vero. Titoli e paragrafi restano testo: selezionabili, letti dagli screen reader e visibili anche quando le immagini sono bloccate.
• Gli effetti non supportati vengono convertiti in immagini. Le parti del design senza un equivalente sicuro per l'email vengono rasterizzate invece di andare perse o rompersi.
• Un documento XHTML 1.0 Transitional valido. Doctype, namespace e attributi vengono normalizzati in esportazione, perché è la dichiarazione che Outlook, Gmail e Apple Mail gestiscono in modo più coerente.
• Modificabile sul posto. Cambia i testi e sostituisci le immagini nell'editor prima di esportare.
• Un indicatore di peso. La scheda Esportazione email mostra il peso attuale dell'HTML rispetto al limite, così vedi il problema prima dei tuoi iscritti.

Il problema dei 102 KB: perché Gmail tronca le email

Gmail tronca qualsiasi messaggio il cui HTML superi circa 102 KB. Il destinatario vede l'inizio dell'email e un link «Visualizza intero messaggio»; ciò che stava sotto il taglio, spesso la call to action e il link di disiscrizione, resta nascosto.

Un design ricco con molte sezioni può superare quel limite sotto forma di codice. MarkupGen ti avvisa a 100 KB — nel pannello di layout e di nuovo nella finestra di invio di prova — e propone la seconda strada.

Strada 2: creare l'email da un'immagine

Crea email da immagine segue l'approccio opposto. Invece di descrivere il design con il codice, usa l'immagine stessa del design, la taglia in porzioni e le ricompone in una tabella leggera. L'HTML contiene solo la tabella e i riferimenti alle immagini, quindi pesa di norma pochi KB, per quanto complesso sia il design.

Come funziona:

1. Parti da un'immagine. L'immagine di design del progetto viene caricata automaticamente, oppure caricane un'altra: un artboard Figma, un banner, una locandina.
2. Disegna le aree cliccabili. Trascina sull'immagine per disegnare un riquadro su ogni pulsante, banner o prodotto. Spostalo, ridimensionalo da qualsiasi bordo o angolo, muovilo di 1 px con i tasti freccia o digita coordinate esatte.
3. Aggiungi link e testo alternativo. Ogni area accetta un link (http(s)://, mailto: o tel:), un nome e un testo alternativo.
4. Imposta la larghezza dell'email. 600 px per impostazione predefinita; cambiala se il tuo template lo richiede.
5. Genera. MarkupGen taglia l'immagine e costruisce la tabella.
6. Anteprima, test ed esportazione. Controlla le anteprime desktop e mobile (375 px), invia un'e-mail di prova, poi applica il codice al progetto o portalo altrove.

Di cosa si occupa lo strumento durante il processo:

• Taglia solo dove serve. L'immagine viene tagliata lungo il bordo superiore e inferiore di ogni area. Le porzioni adiacenti senza link vengono unite: meno immagini e meno richieste.
• Linee di taglio visibili. Guide gialle mostrano esattamente dove cadranno i tagli, così puoi tenerli su sfondo vuoto e non attraverso una riga di testo.
• Ricomposizione al pixel. Le posizioni di taglio vengono allineate a pixel interi alla dimensione di visualizzazione, quindi le porzioni ricompongono l'immagine originale senza fessure né colonne spostate.
• Porzioni senza perdita, già ospitate. Le porzioni vengono salvate in PNG e caricate per te con URL assoluti: non devi ospitare nulla. Un'immagine 2x resta nitida perché viene mostrata alla larghezza dell'email, senza essere ridotta.
• Markup specifico per Outlook. Larghezze fisse, commenti condizionali per il motore di Outlook basato su Word e reset che evitano spazi indesiderati tra le porzioni.
• Solo link sicuri. Tutto ciò che non è http(s), mailto o tel viene rifiutato, e un'area senza link valido viene saltata con un avviso invece di pubblicare un link rotto.
• Le aree vengono salvate con il progetto. Riapri lo strumento più tardi per correggere un link o spostare un'area senza ridisegnare tutto.
• Limiti ampi. Fino a 200 aree di link e 400 porzioni per email, con immagini larghe fino a 4000 px.

Quale usare?

Una regola pratica: inizia dal codice generato. Passa al metodo immagine quando l'indicatore di peso supera il limite, o quando il design dipende da font ed effetti che i client di posta non sanno riprodurre.

Tutto ciò che puoi fare con il risultato

Entrambe le strade arrivano nello stesso punto:

• Inviare un'e-mail di prova a una casella reale, direttamente dall'editor. L'invio viene bloccato se nel design resta un testo o un'immagine non assegnato.
• Vedere l'anteprima su desktop e mobile prima dell'invio.
• Copiare il codice, scaricare il file .html o condividere un link a una copia ospitata dell'email.
• Applicare al progetto e salvare, così l'email vive insieme al resto del progetto.
• Lavorare nella tua lingua: l'interfaccia è disponibile in 10 lingue.

Per approfondire i test, leggi come generare e testare l'invio di HTML per l'email marketing.

I compromessi, detti chiaramente

Un'email basata su immagine ha un costo. Il testo al suo interno non può essere selezionato, copiato o cercato. Se un client blocca le immagini per impostazione predefinita, il destinatario vede solo il testo alternativo finché non le consente; per questo lo strumento chiede il testo alternativo per ogni area. Il layout è a larghezza fissa, quindi sugli schermi piccoli si rimpicciolisce invece di ridisporsi; controlla l'anteprima mobile. E un'anteprima nel browser non è mai una prova: apri sempre l'e-mail di prova nei client usati dal tuo pubblico.

Domande frequenti

Perché Gmail tronca la mia email? Gmail tronca i messaggi il cui HTML supera circa 102 KB e nasconde il resto dietro un link «Visualizza intero messaggio». MarkupGen mostra il peso attuale e ti avvisa a 100 KB.

Posso trasformare un'immagine in un'email HTML con link cliccabili? Sì. Crea email da immagine taglia l'immagine, racchiude ogni area disegnata nel proprio link e ricostruisce l'immagine come tabella che i client di posta visualizzano in modo affidabile.

Devo ospitare io le immagini? No. Le porzioni vengono caricate automaticamente e richiamate con URL assoluti, quindi l'email funziona appena la invii.

Un'email basata su immagine funzionerà in Outlook? Il risultato usa layout a tabelle, larghezze fisse e markup condizionale specifico per Outlook. Conviene comunque inviare un test a una casella Outlook prima di una campagna.

Posso modificare i link dopo la generazione? Sì. Le aree vengono salvate con il progetto: riapri lo strumento, cambia un link o sposta un'area e genera di nuovo.

Funziona solo con i design Figma? La strada del codice generato parte da un design Figma. La strada dell'immagine accetta anche qualsiasi immagine caricata in un progetto Email Ready.

Se una campagna email è ferma in Figma — o in una singola immagine — puoi iniziare gratis e avere HTML pronto per la casella di posta in pochi minuti. I team di marketing trovano il flusso completo in MarkupGen per i team di marketing.