Creazione di e-mail HTML
HTML Email Builder
Costruisce un messaggio a blocchi come HTML basato su tabelle e stili in linea, con un pulsante realizzato in VML, e ricava dagli stessi blocchi la versione alternativa in solo testo.
Un editor a blocchi che sa produrre soltanto l’impaginazione su cui i client di posta vanno d’accordo: tabelle annidate, stili in linea e un pulsante disegnato due volte, così il motore Word di Outlook riceve una forma vera e non un collegamento di testo con uno sfondo inutile. Esporta insieme l’HTML e l’alternativa in testo semplice, e il testo è scritto a partire dai blocchi invece che togliendo i tag.
Messaggio
Blocchi
- Titolo
- Paragrafo
- Pulsante
- Separatore
- Due colonne
- Piè di pagina
Anteprima
Questa non è una schermata del client. È il tuo HTML con applicate le regole di rimozione documentate di quel client, disegnato qui da questo browser.
- Outlook per Windows disegna con Microsoft Word. Questo riquadro è un browser: può mostrarti che cosa resterebbe a Word dopo la rimozione, ma non come Word lo impaginerebbe. A capo, spaziature e ridimensionamento delle immagini (Word presume 96 dpi anche su uno schermo a 120 dpi) saranno diversi.
Rimosso per questo client · 2
Dichiarazioni: border-radius: 6px · border-radius: 8px
Il pulsante viene disegnato due volte: una forma VML per il motore Word di Outlook e un link per tutto il resto. Se ne vede sempre e solo uno.
Che cosa dice il controllo di questo risultato
Niente che si rompa e niente che perda effetto. È per questo che lo si costruisce così.
5,03 kB · 5% dei 102 KB di Gmail
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="it" xml:lang="it" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Questa settimana su Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">Che cosa è cambiato questa settimana e dove leggere il resto‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">L’aggiornamento della settimana</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">Ciao.<br>Ecco che cosa è cambiato questa settimana. L’impaginazione è fatta di tabelle, così arriva intera anche su Outlook.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">Leggi tutto l’articolo</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">Leggi tutto l’articolo</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">Questa è la colonna di sinistra. Le due sono una sola riga di una tabella.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">E questa è quella di destra. Non c’è di mezzo nessun flexbox, così il motore di Word le tiene affiancate.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">Indirizzo del mittente · Seul<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Annulla l’iscrizione</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Solo testo
Che cosa è cambiato questa settimana e dove leggere il resto L’aggiornamento della settimana =============================== Ciao. Ecco che cosa è cambiato questa settimana. L’impaginazione è fatta di tabelle, così arriva intera anche su Outlook. Leggi tutto l’articolo: https://example.com/news —————————————————————————————— Questa è la colonna di sinistra. Le due sono una sola riga di una tabella. E questa è quella di destra. Non c’è di mezzo nessun flexbox, così il motore di Word le tiene affiancate. —————————————————————————————— Indirizzo del mittente · Seul Annulla l’iscrizione: https://example.com/unsubscribe
Generato dai blocchi e non togliendo i tag: per questo i link si leggono come frasi e non come un muro di URL.
Come si usa
Impostare il messaggio
Oggetto, preheader, larghezza e colori. Il preheader è la riga grigia che l’elenco della posta in arrivo mostra dopo l’oggetto: lasciandolo vuoto, il client prende il primo testo che capita, che di solito è «Visualizza nel browser».
Impilare i blocchi
Titolo, paragrafo, immagine, pulsante, due colonne, divisore, spaziatore, piè di pagina. Il blocco a due colonne è una riga di tabella e non una media query, quindi resta a due colonne anche nei client che ignorano le media query.
Guardare l’anteprima e il verdetto
Gli stessi riquadri per client dello strumento di controllo, e sotto la lettura che quello stesso strumento dà di questo output. Dovrebbe restare vuota: è tutto qui il senso di costruire in questo modo.
Esportare entrambe le parti
Vanno inviate come multipart/alternative. Un messaggio di solo HTML ottiene un punteggio peggiore da ogni filtro antispam ed è illeggibile per qualunque cosa legga la posta ad alta voce.
Domande frequenti
Perché il pulsante compare due volte nell’HTML?
Una copia è una forma VML dentro un commento <!--[if mso]-->, che legge soltanto il motore Word di Outlook; l’altra è un normale ancoraggio dentro un commento che Word ignora. Esattamente una delle due è visibile ogni volta. Senza la metà VML, in Outlook il padding viene perso ed è cliccabile solo il testo.
Il coreano verrà disegnato correttamente su Windows?
La pila mette Apple SD Gothic Neo, Malgun Gothic e Noto Sans KR prima di qualunque carattere latino, perché quando un font web fallisce Outlook ripiega su Times New Roman invece che sul font successivo: una pila con il latino davanti è il modo in cui l’hangul finisce per diventare quadratini.
Posso incollare qui il mio HTML?
No: questa pagina si limita a costruire. L’HTML già esistente va allo strumento di controllo della compatibilità, che dirà che cosa cambiare e genererà il markup sostitutivo per gli elementi che ne hanno bisogno.
Può ricevere da
Controllo di compatibilità delle e-mail HTML
HTML Email Compatibility Check
Confronta l’HTML di un messaggio con quello che ogni client di posta supporta davvero, indica l’elemento che si rompe e mostra affiancato che cosa sopravvive in Gmail, Outlook e gli altri.
Tabella di supporto dei client di posta
Email Client Support Table
Che cosa supportano Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail e Thunderbird nelle e-mail HTML, dalle prove su dispositivo di caniemail, con la data dell’ultima verifica accanto a ogni voce.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Tabella di supporto dei client di posta
Email Client Support Table
Che cosa supportano Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail e Thunderbird nelle e-mail HTML, dalle prove su dispositivo di caniemail, con la data dell’ultima verifica accanto a ogni voce.
Confronto fra messaggio inviato e messaggio consegnato
Sent vs Delivered Comparison
Manda una bozza dal tuo account a un indirizzo usa e getta e mostra che cosa ha riscritto il percorso di invio: link avvolti in redirect, blocchi di stile spariti, pixel di tracciamento aggiunti, la codifica usata.
Controllo di compatibilità delle e-mail HTML
HTML Email Compatibility Check
Confronta l’HTML di un messaggio con quello che ogni client di posta supporta davvero, indica l’elemento che si rompe e mostra affiancato che cosa sopravvive in Gmail, Outlook e gli altri.
Controllo di un link sospetto
Suspicious URL Check
Esamina la forma di un link prima che tu lo apra — caratteri sosia, host scritti come indirizzo IP, trucchi con la @, sottodomini profondi, porte insolite, servizi di accorciamento — e su richiesta ne segue i redirect e cerca la data di registrazione del dominio. Nessuna banca dati di reputazione.
Ispettore di archivi compressi
Archive Inspector
Apre uno zip senza estrarlo e segnala le voci che escono dal percorso, gli eseguibili, le macro e le bombe zip.
Convertitore audio
Audio Converter
Converte fra MP3, WAV, FLAC, AAC, OGG e Opus con impostazioni di bitrate e frequenza di campionamento.