Anteprima email HTML
Guarda la tua email in Gmail su desktop e mobile

Che cosa ti mostra un’anteprima email HTML

Un’anteprima email HTML mostra la tua email prima che la veda qualcun altro. Incolli il codice e la pagina lo disegna come farebbe Gmail. Poi lo controlli su desktop e su telefono.

Ti risparmia guai veri. Tra l’altro, Gmail cambia più di quanto molti si aspettino. Toglie alcuni tag, ignora parte del CSS e taglia i messaggi lunghi. Quindi uno sguardo rapido ora vale più di un’email rotta dopo.

Questa anteprima segue le regole che Google scrive per gli sviluppatori. Legge lo stesso elenco di proprietà CSS supportate che pubblica Google. Di conseguenza i controlli vengono dalla fonte e non da supposizioni.

Infatti, tutto avviene nel tuo browser. La tua email, con i suoi nomi e le sue offerte, non lascia mai questa pagina.

Guarda un’email prima di inviarla

Incolla o apri il tuo HTML e l’anteprima appare subito. Per vedere il risultato non devi nemmeno toccare un pulsante. Se vuoi solo dare un’occhiata, scegli un esempio e premi Prova un esempio.

Così, l’anteprima vive in un riquadro suo. Il CSS della tua email non può toccare questa pagina e questa pagina non può toccare la tua email. In questo modo l’anteprima resta fedele.

Anteprima email su desktop e mobile

Desktop mostra la tua email larga 760 pixel, vicino alla larghezza di un riquadro di lettura di Gmail. Mobile la mostra a 375 pixel, la larghezza di un telefono comune.

Inoltre, le media query reagiscono a queste larghezze. Una regola per schermi fino a 480 pixel si attiva quando scegli Mobile. Così vedi due colonne impilarsi in una.

Come Gmail legge il tuo CSS

Google tiene una pagina chiamata CSS support in Gmail. Elenca ogni proprietà che Gmail supporta. Gmail ignora tutto il resto.

Tra l’altro, imposta Regole su Gmail e l’anteprima scarta tutto ciò che l’elenco lascia fuori. Per esempio box-shadow, position e i layout flex spariscono. Imposta Regole su Browser normale e non scarta nulla, così puoi confrontare i due.

Selettori e media query in Gmail

Gmail legge i selettori di classe, di elemento e di ID. Salta i selettori di attributo e le pseudoclassi come :hover. Per le media query supporta larghezza, orientamento e risoluzione.

L’anteprima segue gli stessi limiti. Un selettore saltato compare nei controlli con un esempio, così lo trovi in fretta.

L’oggetto e il frammento di anteprima

Infatti, scrivi un oggetto e un nome del mittente e la pagina disegna una riga della posta in arrivo. Mostra il nome, l’oggetto e le prime parole del messaggio. Quelle prime parole sono il testo di anteprima.

Molte email iniziano con Visualizza nel browser, che spreca la riga migliore della posta in arrivo. Aggiungi invece un breve preheader nascosto, oppure scrivi il tuo testo in Testo di anteprima. Così, i controlli ti avvisano quando l’email si apre con una riga debole.

Un’anteprima in modalità scura

Molti lettori usano Gmail in modalità scura. Il menu Aspetto dà una vista scura approssimativa. Capovolge i colori chiari in scuri e rimette le immagini nel verso giusto.

Gmail non pubblica il proprio metodo, quindi considera questa vista una spia di avviso e non una promessa. Inoltre, eppure mostra subito un logo scuro che sparisce su una pagina scura.

Immagini nell’anteprima

Il tuo browser impedisce a questo sito di caricare immagini da altri siti. È una regola di sicurezza e la manteniamo. Quindi un’immagine remota appare come un riquadro grigio della misura giusta.

Il riquadro mostra comunque il layout. Inoltre i controlli ti segnalano testo alternativo mancante, larghezze mancanti e immagini incorporate in base64, che Gmail non mostra.

Cosa toglie Gmail dalle email

Tra l’altro, Gmail non esegue script. Toglie anche frame, moduli, video e SVG. Elimina inoltre i gestori di eventi come onclick e i link che iniziano con javascript:.

L’anteprima fa lo stesso ed elenca ogni rimozione. Così scopri un pulsante rotto prima dei tuoi lettori.

Il limite di taglio di 102 KB

Gmail taglia un messaggio più grande di 102 KB. Infatti, nasconde il resto dietro un link chiamato Visualizza l’intero messaggio. Se la riga di annullamento iscrizione è in fondo, i lettori potrebbero non vederla mai.

Il riquadro Dimensione mostra la tua email in kilobyte. Per ridurla, togli i commenti, ripeti meno stili in linea e passa il codice in un minificatore HTML.

Controlli per i modelli di email a freddo

Un’email a freddo funziona meglio quando sembra una nota di una persona. Quindi tieni il design leggero: pochi paragrafi, un link e un modo chiaro per annullare l’iscrizione.

I controlli segnalano i soliti guai. Così, avvisano di email fatte soprattutto di immagini, di link che non portano da nessuna parte e di una riga di annullamento mancante. Negli Stati Uniti la guida alla conformità CAN-SPAM spiega perché quest’ultima conta.

Carica un file HTML dal tuo computer

La maggior parte degli strumenti di email ti lascia esportare l’HTML di un modello. Salvalo come file, premi Apri un file e l’anteprima appare. Funzionano file fino a 2 MB, molto più di quanto Gmail mostrerebbe.

Controlla i link prima di inviare

Inoltre, un link rotto ti costa un lettore. I controlli contano ogni link e avvisano di quelli vuoti, di quelli http semplici e di quelli pericolosi. I link restano disattivati nell’anteprima, quindi un clic sbagliato non ti porta mai via dal lavoro.

Prima di inviare, apri ogni link una volta nel tuo browser. Poi leggi l’indirizzo nella barra di stato e controlla che porti dove dicono le parole.

Confronta le regole di Gmail con un browser normale

Passa avanti e indietro il menu Regole e guarda cosa cambia. Ogni differenza è qualcosa che Gmail toglierebbe ai tuoi lettori. Sistemale per prime, perché decidono come appare la tua email nella posta che la maggior parte usa.

Un’anteprima non è un test completo

Tra l’altro, questa anteprima non è Gmail stesso. Segue le regole scritte di Gmail, ma il vero Gmail ha app, account e aggiornamenti propri. Invia anche una prova a te stesso.

Anche Outlook e Apple Mail si comportano in modo diverso. Infatti, tabelle e stili in linea sono il modo più sicuro di costruire un’email per tutti.

Come risolvere i guai più comuni delle email

Usa tabelle per il layout e imposta una larghezza su ogni immagine. Metti in linea gli stili chiave. Aggiungi testo alternativo a ogni immagine e tieni la colonna principale vicino a 600 pixel. Poi guarda di nuovo l’anteprima, su entrambi gli schermi.