Rendering di posta elettronica di Outlook: come ho imparato a smettere di preoccuparmi e ad amare Outlook

Pubblicato: 2021-07-02

Ci siamo passati tutti. Crei una bella email con GIF interessanti, pulsanti accessibili e immagini accattivanti. Quindi lo provi e sembra fantastico ... tranne che in Outlook, dove è completamente rotto. Le persone non possono interagire nel modo desiderato con un'e-mail non funzionante.

Outlook è stata una piaga degli e-mail marketer per molto tempo, ma deve esserlo? Come possiamo lavorarci? Continua a leggere per scoprire come ho imparato ad amare Outlook, nonostante i suoi numerosi difetti. mi occuperò di:

Versioni di Outlook
Suggerimenti per le stranezze di Outlook
Il codice per fare le correzioni

Le numerose versioni di Microsoft Outlook

Il nome "Outlook" copre diversi client di posta elettronica con un paio di diversi motori di rendering e almeno due diverse impostazioni di visualizzazione. Tutto questo può essere un enorme mal di testa se lo permetti. Entriamo e vediamo se riusciamo a raddrizzarlo un po'.

Outlook 2007-2019

Queste sono le versioni desktop di Windows di Outlook. Questi usano Word come motore di rendering, il che aveva senso in un momento in cui la posta elettronica era come scrivere lettere. Ah, tempi più semplici. Ma, per gli e-mail marketer, non è sufficiente per il rendering di e-mail HTML.

120 DPI (punti per pollice) aumentano la complessità. Gli utenti Windows possono scegliere 120 DPI per aumentare la risoluzione dello schermo. In tal caso, i client di posta elettronica desktop lo rispetteranno e aggiorneranno le immagini e il testo in modo che siano più grandi. Che può creare scompiglio nella tua email.

Outlook per Mac

Questa è la versione desktop per Mac di Outlook. Utilizza Webkit come motore di rendering. Il che significa che di solito è alla pari con Apple Mail e iOS per quanto riguarda il rendering della posta elettronica. Se ha un bell'aspetto nel tuo browser, ci sono buone possibilità che stia bene qui.

Outlook.com e le app per dispositivi mobili di Outlook

Questi client utilizzano motori di rendering basati su Webkit o Webkit, quindi forniscono un buon rendering HTML e di solito non interrompono le tue e-mail.

Outlook Office 365

Esistono due diverse versioni di Outlook Office 365, il client di posta elettronica desktop e il client di posta elettronica basato sul Web. La versione desktop è simile a Outlook 2007-2019 e utilizza Word come motore di rendering (difficile per la posta elettronica). Il client di posta elettronica basato sul Web utilizza Webkit o Blink e visualizza le e-mail in modo simile a Outlook.com (molto più semplice).

Controllo riga dell'oggetto al tornasole

Niente più email rotte

Visualizza in anteprima le tue e-mail su oltre 90 client di posta, app e dispositivi, comprese tutte le versioni di Outlook, per garantire un'esperienza di sottoscrizione on-brand e priva di errori.

Scopri come →

Un Outlook per domarli tutti

A gennaio, Microsoft ha annunciato la sua visione "One Outlook" per sostituire i client desktop con un client che funziona ovunque a partire dal 2022.

Il nuovo client di posta elettronica sarà basato sulle attuali app Web di Outlook. Quindi le speranze sono alte che avrà un motore di rendering basato su Webkit e renderà bene le email HTML. Sfortunatamente, tutti quei vecchi client desktop non scompariranno quando ciò accadrà, quindi dovranno ancora essere supportati in una certa misura.

Fare o non fare, non c'è tentativo

Ti gira già la testa?

Se lo è, distilliamolo per te: il punto chiave è che stiamo lavorando con due diversi motori di rendering: Word e Webkit. Webkit è più facile da codificare e Word è più difficile. Né è veramente buono o cattivo. Richiedono solo approcci diversi e hanno stranezze diverse che devono essere prese in considerazione.

Diamo un'occhiata ad alcuni dei problemi di rendering comuni nei client desktop di Outlook e come risolverli.

Includi gli attributi di larghezza e altezza nelle tue immagini

Outlook non supporta gli stili CSS per larghezze e altezze e, se non includi gli attributi di larghezza e altezza, Outlook visualizzerà l'immagine nella sua dimensione effettiva. Se stai usando immagini retina (che dovresti essere), ciò significa che otterrai immagini giganti che romperanno le tue e-mail.

prospettiva — Immagine retina senza un attributo di larghezza in Outlook che rende l'e-mail più ampia

Includi testo ALT

Non lasciare che il messaggio di sicurezza di Outlook parli per le tue immagini. Assicurati di includere il testo ALT. Soprattutto perché Outlook non visualizza le immagini per impostazione predefinita a meno che le persone non attivino la funzione.

Usa le tabelle

La posta elettronica ha fatto molta strada e puoi utilizzare i blocchi <div> in molti client di posta elettronica, ma Outlook non è uno di questi. Outlook ignorerà la maggior parte degli stili applicati ai tag <div>, incluse larghezze e padding. Quindi è importante utilizzare invece i tag <table> per i tuoi contenuti.

Utilizzare il codice specifico di Outlook per risolvere i problemi di rendering

Questo potrebbe non risolvere tutti i tuoi problemi, ma ci sono molte volte che l'inclusione di alcuni CSS specifici di Outlook può aiutarti a risolvere un problema di rendering che vedi solo su Outlook. Oppure si può nascondere un piccolo blocco che non funziona su Outlook e utilizzare il codice condizionale per mostrare una versione che avrebbe funzionato per una versione specifica di Outlook. (Ulteriori informazioni sul codice condizionale in seguito.)

Aggiungi l'altezza delle linee a piccole immagini o celle di tabella

Outlook imposta un'altezza minima per le celle e le immagini della tabella. Quindi, se stai usando una cella di tabella come distanziatore o hai un'immagine piccola, assicurati di aggiungere un attributo di altezza della linea all'elemento uguale all'altezza che vuoi che appaia. Per esempio:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

Correggi i problemi di ridimensionamento DPI

Sui computer Windows, esiste un'impostazione globale che le persone possono modificare (o in alcuni casi, impostare un valore più alto per impostazione predefinita) che ridimensiona il testo e gli elementi grafici per renderli più grandi e più facili da leggere. Questo è ottimo per l'accessibilità, ma non così eccezionale per Outlook poiché solo alcuni elementi vengono ridimensionati mentre altri no.

Per fortuna, c'è una soluzione. Innanzitutto, devi aggiungere uno spazio dei nomi XML al tag HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Quindi, aggiungi del codice per correggere il ridimensionamento dell'immagine subito prima del tag </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

Infine, assicurati di includere qualsiasi larghezza impostata come proprietà CSS con pixel e non come attributo nelle tue tabelle.

✗ Non questo con larghezza=”600″ :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Sì, in questo modo con style=”width:600px;” :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Ciò risolverà la maggior parte dei tuoi problemi per i client 120 DPI. Dai un'occhiata a questo confronto fianco a fianco prima e dopo questa correzione:

Outlook 2013 a 120 DPI (senza correzione)	Outlook 2013 a 120 DPI (con correzione)

Che differenza, eh?

Non aspettarti che gli effetti al passaggio del mouse funzionino

Outlook non supporta la pseudo classe hover. Dovresti comunque includerlo per creare interazioni per aumentare l'accessibilità della tua posta in altri client di posta elettronica, ma non sorprenderti se non funziona in Outlook.

Non dipendere da una GIF animata per esprimere il tuo punto di vista

I client desktop di Outlook non supportano le GIF animate. Puoi fare in modo che il frame iniziale visualizzi l'immagine che desideri visualizzare in Outlook oppure puoi nascondere la GIF animata da Outlook e utilizzare la codifica condizionale per visualizzare un'immagine fissa che desideri. (Di nuovo, più avanti sulla codifica condizionale.)

Non utilizzare contenuti interattivi senza un fallback

Le e-mail interattive sono un grande no per Outlook. Dipendono dalla codifica AMP o dall'hack della casella di controllo, entrambi non supportati su Outlook.

Nel caso di AMP per e-mail, verrà visualizzato il file HTML al posto di quello AMP, quindi nessuna codifica aggiuntiva per questo. Per l'interattività dell'hack della casella di controllo, dovrai nascondere il contenuto interattivo e mostrare il fallback di Outlook. Ancora una volta, la codifica condizionale è tua amica qui.

Non aggiungere padding o margini alle immagini

Outlook rimuove il riempimento e i margini dalle immagini. Assicurati invece di aggiungere il riempimento alla cella della tabella attorno all'immagine. Oppure, se hai l'immagine nella stessa cella della copia, aggiungi un margine al tag attorno alla copia (<h1>, <h2>, <p>, ecc.).

La paura è l'e-mail killer: il codice che ti serve per affrontare le tue paure di Outlook

La codifica di un'e-mail eccezionale per i client di posta elettronica desktop di Outlook richiede di saltare al di fuori del "normale" HTML e CSS. Esistono tre tipi di codice che ti aiuteranno a far brillare le tue e-mail in questi client: codifica condizionale, proprietà MSO e VML.

Può essere spaventoso lavorare con qualcosa di nuovo, ma ti prometto che ne vale la pena. E quel momento in cui riesci a farlo funzionare correttamente? Ti sembrerà di aver appena completato la corsa di Kessel in meno di 12 parsec.

Codifica condizionale

La codifica condizionale è una codifica che esamina il client di posta elettronica o il browser utilizzato dal tuo abbonato e mostra il codice solo se soddisfa il condizionale all'interno del commento, ad esempio:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Puoi anche usarlo per scegliere come target versioni specifiche dei client desktop di Outlook aggiungendo i numeri di versione:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook è tutt'altro che semplice, tuttavia, quindi i numeri di versione non corrispondono al nome del client di posta elettronica:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 e Office 365 desktop = mso 16

E poi puoi diventare più complesso prendendo di mira un intervallo di client con minore di (lt), maggiore di (gt), minore o uguale a (lte) o maggiore o uguale a (gte). Per esempio:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Quindi, se vedi solo alcune cose strane che accadono su un client specifico, puoi indirizzare quel client in modo specifico e nascondere e mostrare contenuti migliori per esso.

Puoi anche utilizzare i commenti condizionali per nascondere il contenuto da Outlook dicendo "if !mso" che significa "if not mso":

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Qualcosa da tenere a mente: il codice condizionale funziona solo sui client desktop di Outlook. Poiché è qui che entrano in gioco molti problemi, probabilmente avrai bisogno di questi più di qualsiasi soluzione per i client di webmail.

Ma ci sono modi per scegliere come target anche i client Web, anche se nessun modo per scegliere come target un client Web Outlook rispetto all'altro. Pertanto, quando si sceglie come target Outlook.com, si sceglierà anche il client Web di Office 365 (ma non il client desktop).

Puoi indirizzare i client Web di Outlook sfruttando il fatto che Outlook aggiunge "x_" a tutti i nomi di classe, ma non lo fa per il selettore di attributi. Quindi, se hai una classe "pippo" e vuoi trattarla in modo diverso per i client Web di Outlook, puoi indirizzarla con questo codice:

[class~="x_foo"] { }

(Grazie a Mark Robbins per questa correzione e a Dylan Smith per howtotarget.email.)

Proprietà MSO

Come accennato in precedenza, è possibile aggiungere CSS specifici per Outlook che influiranno solo sui client di posta elettronica desktop di Outlook. Ecco alcuni che troverai piuttosto comuni e potresti averne già sentito parlare:

mso-nascondi: tutto;

Questa proprietà nasconderà tutto dai client desktop di Outlook. Viene eliminato quando l'e-mail viene inoltrata, quindi fai attenzione a usarlo da solo se si tratta di una funzione di cui sai che i tuoi abbonati spesso sfruttano. Puoi accoppiarlo con il codice condizionale "if not mso" se sei un programmatore "just in case".

regola-altezza-riga-mso: esattamente;

Questa proprietà garantisce che Outlook visualizzi l'altezza della linea in base a quanto designato nella proprietà dell'altezza della linea. Senza di esso, Outlook non rispetta necessariamente l'altezza delle linee. Se lavori in un settore in cui la precisione è fondamentale, probabilmente conosci bene questa proprietà.

mso-padding-alt

Questo è un po' meno comune, ma ho dovuto usarlo di tanto in tanto. Ti consente di dichiarare il riempimento specifico per Outlook. Quindi, se il normale riempimento che hai su una cella non viene visualizzato correttamente in Outlook, puoi utilizzare mso-padding-alt per impostare i valori che si adattano al tuo design per Outlook.

mso-ansi-font-size

Questo è un altro che uso solo occasionalmente. Ti consente di impostare dimensioni dei caratteri specifiche per Outlook. Quindi, se Outlook rende il tuo carattere un po' più grande di altri client di posta elettronica e ti ritrovi con una breve riga finale di copia che non volevi, aggiungi mso-ansi-font-size e imposta una dimensione del carattere che si adatti alla tua copia.

Ci sono molte più proprietà MSO che puoi usare, quindi vai avanti e vedi se c'è qualcosa che risolverà un problema di rendering per te.

VML

VML sta per Vector Markup Language. È la versione Microsoft di SVG, ma la lingua è stata deprezzata ed è usata molto raramente (evviva email!). Microsoft ha la documentazione per VML archiviata online, quindi puoi ancora cercare come utilizzarla per creare vettori in Outlook, dove è ancora supportata. In teoria, quando Microsoft passerà al modello "One Outlook", saremo in grado di lasciarci alle spalle VML.

Assicurati di includere la dichiarazione dello spazio dei nomi VML. Di solito lo aggiungo all'elemento <html> nel mio modello standard in modo da poter utilizzare VML ogni volta che ne ho bisogno:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Una volta che lo hai, puoi aggiungere qualsiasi VML al tuo codice all'interno dei condizionali MSO:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Quel codice creerebbe un rettangolo blu di 200 px per 50 px. Forse non è qualcosa che puoi effettivamente usare in un'e-mail, ma puoi usare VML per aggiungere pulsanti con angoli arrotondati al tuo codice, immagini di sfondo e sfumature di sfondo. Campaign Monitor ha due strumenti creati da Stig per aiutarti a creare immagini di sfondo o pulsanti con angoli arrotondati. Ho scoperto che sono un ottimo modo per aggiungere VML quando stai solo imparando.

Puoi anche usare VML per creare un posizionamento assoluto fasullo, effetti ombra o un fallback per supportare la grafica CSS in Outlook. Ci sono molte cose che puoi fare con VML una volta che ti immergi.

Vivi a lungo ed e-mail

Outlook è stato a lungo la rovina degli e-mail marketer, ma non deve esserlo.

Con gli strumenti giusti, puoi creare bellissime email che vengono visualizzate correttamente in Outlook. Dai un'occhiata alle risorse in questo post per costruire le tue abilità di codifica di Outlook e provale nelle tue e-mail con Litmus Builder e Email Previews. Pensa alla codifica per Outlook come a un puzzle in attesa di essere risolto e potresti ritrovarti ad amare Outlook e tutte le sue stranezze.

Metti alla prova le tue email in Outlook con Litmus

Guarda come appariranno le tue e-mail in Outlook e risolvi eventuali problemi prima di premere l'invio. Con Litmus, puoi essere certo di creare email perfette per i pixel con cui i tuoi abbonati possono interagire.

Inizia la tua prova gratuita →

5 suggerimenti per preparare il tuo programma di posta elettronica per la protezione della privacy della posta (e avere comunque successo)

Scopri come preparare subito il tuo programma di email marketing per il successo senza tassi di apertura anche dopo il lancio di Mail Privacy Protection di Apple.