Padroneggiare Outlook: uno sguardo ai problemi di rendering comuni

Microsoft è uno dei più grandi attori nel settore della posta elettronica. Microsoft Outlook e la sua controparte basata sul Web Outlook.com detengono una quota di mercato di oltre il 10% collettivamente. Questo è piuttosto enorme!

In un mondo in cui gli utenti possono scegliere tra un'ampia varietà di client di posta elettronica, come ha fatto Outlook a rimanere così popolare? Non solo Microsoft Office è comunemente installato sui computer delle aziende di tutto il mondo, ma molti computer domestici e laptop con Windows sono dotati di MS Office preinstallato. Il client di posta elettronica predefinito fornito con MS Office è... Outlook.

Poi c'è Outlook.com, che ha iniziato la sua carriera come client di posta elettronica come Hotmail, nel 1996. Nel 1997 Microsoft ha acquisito Hotmail per una cifra stimata di 400 milioni di dollari e ha lanciato Hotmail come MSN Hotmail. Successivamente è stato rinominato nuovamente in Windows Live Hotmail. Infine, nel 2013 Hotmail è stato completamente sostituito da Outlook.com. Con la storia di Outlook.com intrecciata con Hotmail, non dovrebbe sorprendere sapere che a partire dal 2015, Outlook.com aveva oltre 400 milioni di utenti attivi.

Problemi di rendering comuni in Outlook

Creare e-mail per Outlook è sempre stato impegnativo. Da Outlook 2007 in poi, Microsoft ha smesso di utilizzare Internet Explorer per eseguire il rendering delle e-mail e ha invece scelto di utilizzare Microsoft Word come motore di rendering. Grandi notizie per gli utenti di Microsoft Office, che possono copiare e incollare facilmente elementi da Word o Excel nelle proprie e-mail di Outlook. Non così grandi notizie per gli e-mail marketer e gli sviluppatori che utilizzano l'HTML per creare le loro e-mail. Prova a copiare e incollare una pagina web HTML in un documento Word e avrai un'idea di come Word traduce HTML.

Naturalmente, i talentuosi sviluppatori di posta elettronica là fuori hanno iniziato a lavorare con la loro magia nello sviluppo di una pletora di hack e-mail per assicurarsi che le loro bellissime e-mail HTML fossero rese altrettanto magnificamente in Outlook. Non è un compito facile, dato che molti hack tendono a coinvolgere VML (Vector Markup Language), che non è qualcosa che tendi ad imparare nella scuola dei duri per lo sviluppo della posta elettronica!

Ecco un breve riassunto di alcuni dei problemi più comuni che devono affrontare gli sviluppatori di posta elettronica durante lo sviluppo di messaggi di posta elettronica per Outlook:

Utilizzo delle tabelle nello sviluppo della posta elettronica

Nello sviluppo Web moderno, puoi utilizzare contenitori come div per contenere contenuto, con tabelle utilizzate esclusivamente per dati tabulari. Tuttavia, per posizionare correttamente elementi come div all'interno di una pagina HTML, sono spesso richiesti attributi CSS come float e position.

Outlook non supporta questi attributi. Per strutturare correttamente le tue e-mail per la massima capacità di rendering cross-device/client/browser, gli sviluppatori utilizzano le tabelle per creare le e-mail.

Sebbene le tabelle funzionino da anni per gli sviluppatori di posta elettronica, sono restrittive in ciò che può essere realizzato in termini di progettazione della posta elettronica. I progettisti devono pensare in termini di righe e colonne affinché i loro progetti possano essere facilmente costruiti con le tabelle.

Immagini di sfondo con VML

Testo in diretta. Testo in diretta. Testo in diretta. È il mantra dell'email marketer. Avere più testo live possibile nelle tue e-mail per assicurarti che le tue e-mail arrivino nella posta in arrivo (anziché spam), siano accessibili a tutti e leggibili con le immagini disattivate.

Le immagini di sfondo possono consentirti di sovrapporre del testo in tempo reale a un'immagine, che si tratti di un motivo o di una bella foto. Le immagini di sfondo possono creare un bellissimo senso di profondità per i tuoi progetti di posta elettronica, pur rimanendo accessibili.

Tuttavia, Outlook non supporta le immagini di sfondo con HTML puro. Outlook richiede l'uso di VML per far funzionare le immagini di sfondo. Per fortuna, non è necessario imparare completamente VML per poter utilizzare le immagini di sfondo nella tua email. Campaign Monitor ha un ottimo strumento che genererà il tuo codice VML e HTML per darti immagini di sfondo a prova di proiettile nelle tue e-mail.

Nessun supporto per le GIF animate

Con la mancanza di supporto per i video nelle e-mail e gli e-mail marketer che spingono a rendere le loro e-mail più dinamiche e coinvolgenti, l'umile GIF animata è il modo perfetto per dare vita alle tue e-mail.

Tuttavia, Outlook non supporta le GIF animate. Mentre l'immagine verrà caricata e apparirà all'utente, verrà renderizzato solo il primo fotogramma dell'animazione.

Se hai abbonati che aprono e-mail in Outlook e stai utilizzando GIF animate, fai in modo che il primo fotogramma dell'animazione conti. Mantieni la GIF semplice e l'animazione non parte integrante del messaggio, ma più come un ulteriore vantaggio per coloro che possono vedere l'animazione completa.

Nessun supporto per il padding su p, div e a tag

Il padding è un ottimo attributo CSS che può introdurre spazio ai tuoi elementi. È un utile attributo CSS per posizionare gli elementi in un'e-mail o per creare un po' di respiro attorno agli elementi per migliorare il design.

Una soluzione semplice consiste nell'utilizzare gli attributi HTML cellspacing e cellpadding nella tabella per creare spazio attorno agli elementi all'interno di una tabella.

Per introdurre il padding nei tuoi paragrafi, il tag p, usa l'attributo style mso-line-height-rule:exactly; combinato con l'altezza della linea per dare alla tua copia e al testo un po' di respiro, rendendo più facile da seguire:

 <p>Your text here</p>

Non è solo Outlook

Mentre il client desktop ha posto problemi per anni agli sviluppatori di posta elettronica, ora c'è una nuova versione di Outlook.com per gli sviluppatori di posta elettronica da affrontare, che a sua volta ha generato la sua parte di stranezze di rendering. Molti dei quali sono diversi dalle stranezze trovate in Outlook. (Certo.)

Un cambiamento non è stato un passo nella giusta direzione: Outlook.com elimina tutto ciò che è inserito in una serie di query multimediali. Quindi non c'è modo di distinguere tra la versione mobile o desktop di un'e-mail.

C'è una buona notizia però. Ci sono alcuni bug di rendering presenti nelle versioni precedenti di Outlook.com che sono stati riparati. In particolare: l'hack float/margin. Per fare in modo che la versione precedente di Outlook.com comprendesse questi attributi CSS, dovevano essere scritti utilizzando lettere maiuscole o una combinazione di maiuscole e minuscole. Ora il caso non ha importanza.

In precedenza, affinché Outlook.com comprendesse l'attributo margin, dovevi utilizzare:

 Margin: 10px;

Ma ora puoi usare:

 margin: 10px;

Per un elenco più completo delle modifiche, lo sviluppatore di posta elettronica Remi Parmentier ha scritto un ottimo blog su ciò che è necessario sapere sul nuovo Outlook.com e su cosa dovrebbero cercare gli sviluppatori di posta elettronica.
Padroneggiare Outlook

Mantenere il tuo codice pertinente

Se hai mai lavorato come sviluppatore di posta elettronica, spesso può sembrare che gli obiettivi della capacità di rendering della posta elettronica si muovano più di quanto dovrebbero. Poiché lo sviluppo della posta elettronica continua ad evolversi, ci saranno sempre nuove tecniche che devono essere "tradotte" in Outlook.

Ad esempio, quando è stato introdotto lo sviluppo di e-mail ibride/spugnose per garantire che l'app mobile Gmail rendesse una versione mobile di un'e-mail, gli sviluppatori di e-mail hanno anche creato nuove tecniche per consentire a Outlook di eseguire il rendering di tali e-mail.

Poiché gli sviluppatori di posta elettronica si spingono oltre, con molti che aspirano a creare e-mail senza tabelle, queste nuove tecniche dovranno essere semplificate per le molte versioni di Outlook ancora in uso.

È giusto dire che gli sviluppatori di posta elettronica innovativi e di talento non sono mai stati così richiesti. VML deve ancora essere padroneggiato nella posta elettronica e finché Outlook utilizza Word come motore di rendering, questa sarà un'area chiave in cui gli sviluppatori di posta elettronica possono continuare a spingere le loro conoscenze e il loro valore.

La creazione di e-mail richiede tempo

Con tutte queste sfide che Outlook impone agli sviluppatori di posta elettronica, nonché l'elenco crescente di client e dispositivi di posta elettronica che devono essere supportati, non c'è da meravigliarsi se una parte considerevole del tempo trascorso nell'email marketing è dedicata allo sviluppo e al test delle e-mail HTML.

Nel nostro 2016 State of Email Production, oltre il 44% degli intervistati ha riferito di aver dedicato più di 3 ore allo sviluppo della posta elettronica. Questo non è un breve lasso di tempo e deve essere preso in considerazione quando si esamina un intero flusso di lavoro di email marketing.

Outlook è sempre stata una bestia difficile da affrontare per gli sviluppatori di posta elettronica. Sfortunatamente non può essere ignorato poiché ha una quota di mercato considerevole dei client di posta elettronica, che potrebbe essere maggiore se lavori nel settore del marketing B2B. Semplicemente, Outlook non può essere ignorato.

Hai difficoltà a far funzionare le tue e-mail in Outlook?

Abbiamo collaborato con Microsoft per dare priorità ai bug di rendering della posta elettronica in Outlook, identificare i problemi più rapidamente e annunciare miglioramenti e correzioni alla community.

Aiutaci a migliorare Outlook e inviaci il tuo bug di rendering.

Invia un bug di rendering di Outlook →