Pochi giorni fa ho scritto del lancio ufficiale di Outlook.com e quindi è il momento di fare un riepilogo delle cose da fare e non fare per assicurarsi una corretta visualizzazione delle newsletter sulla webmail di Microsoft.
Blocco Immagini
Innanzitutto Outlook.com, come il predecessore, come impostazione predefinita blocca le immagini presenti nelle email se provenienti da mittenti sconosciuti. Non si limita ad un blocco "sano" ma piuttosto visualizza al posto delle immagini dei blocchi grigi. Molto peggio di quanto facciano "gli altri" che almeno visualizzano l'eventuale testo inserito nell'attributo ALT.
Se siete tra i fan delle immagini embedded (io le sconsiglio) sappiate che supporta le immagini embedded come MIME parts mentre non supporta quelle embedded nell'html attraverso il "data uri scheme".
Immagini di sfondo
Outlook.com ignora la proprietà CSS background-image sia nella sua forma esplicita, sia come secondo parametro della proprietà background.
L'unico modo per inserire immagini di sfondo è quindi utilizzare il buon vecchio HTML 3.2 e il suo attributo BACKGROUND utilizzabile sia per inserire uno sfondo in una <TABLE> che in una singola cella <TD>.
Esiste un limite anche nell'uso dell'attributo HTML, in quanto se provate ad usarlo come attributo del tag <BODY> per mettere una immagine di sfondo all'intera newsletter vedrete che non funziona. Per ovviare a questo è generalmente consigliabile inserire una <TABLE> con larghezza 100% che racchiuda l'intera newsletter ed utilizzare a quel punto l'attributo BACKGROUND di tale table invece del body.
Float
Le proprietà CSS di posizionamento float a position vengono ignorate, esattamente come fa Gmail. In entrambi i casi la migliore alternativa consiste nell'usare l'attributo HTML 3.2 ALIGN. L'attributo HTML ALIGN="right" ad esempio applicato ad un tag <IMG o ad un tag <TABLE ci permetterà di ottenere un effetto molto similare a quello ottenuto con la proprietà CSS "float: right".
Margin
Mentre gli altri "limiti" sono stati direttamente ereditati da Hotmail, questo sembra essere stato introdotto appositamente per Outlook.com, forse per renderlo più simile ai programmi desktop Outlook 2007/2010/2013 che hanno notevoli problemi con la visualizzazione dell'HTML. Sembra più semplice "adeguarsi al peggio che al meglio".
Outlook.com ignora qualunque proprietà margin. Potreste usare il padding ma non funziona bene sui prodotti Desktop della stessa Microsoft. Inoltre tenete presente che il padding crea spazio all'interno del bordo mentre il margin lo crea esternamente.
Le alternative stanno sempre negli attributi HTML 3.2 e in particolare in HSPACE/VSPACE per quanto riguarda i margini delle immagini e nell'uso del CELLPADDING collegato alle TABLE, che rimangono lo strumento essenziale per un layout HTML di una newsletter "compatibile". Potete usare anche la proprietà padding CSS per scegliere padding diversi per ogni cella e per ogni lato delle celle, ma ne sconsiglio l'uso se non volete poi litigare con il cugino desktop (Outlook 2007+).
Al danno di non poter impostare propri margini aggiungiamo anche la beffa che Outlook.com definisce dei margini sui tag P e sugli heading che non è possibile modificare. Se volete controllo dovrete usare dei DIV. Questi i margini applicati:
h1, h2, h3, h4, h5, h6 {margin: 0 0 5px 0;}
p {margin: 0 0 1.35em 0;}
Spazi bianchi sotto le immagini
Come Gmail anche Hotmail utilizza un DOCTYPE che con molti browser scatena la modalità di renderizzazione HTML "Standard" facendo sì che spesso compaiano strani spazi sotto le immagini. La soluzione è sempre quella suggerita nel post su Gmail, e comunque consiglio di usare il doctype che usa Hotmail così da lavorare direttamente sullo stesso layout engine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Altre cose che non vanno
Oltre a questo segnalo anche che hotmail non supporta il tag LINK per importare CSS esterni e nemmeno la direttiva CSS @import. Non supporta le direttive CSS per rendere un layout "responsive" (@media queries) e non supporta le direttive per i @fontface. Nello scrivere i CSS usate solo selettori semplici come "TAG" o "TAG.classe" o "TAG TAGFIGLIO" perchè eventuali selettori più potenti non funzioneranno.
Trucchi
Se mai vi dovesse servire inserire del codice HTML che serve solamente per risolvere problemi di visualizzazione di Hotmail/Outlook.com sappiate che esiste un metodo per farlo: si chiamano commenti condizionali (Conditional Comments) e sono una funzionalità usata da tutti i prodotti Microsoft.
<!--[if false]><style>/* Questo serve per evitare che il resto venga visto dalla webmail di AOL <![endif]--><!---->
<!--[if (!mso & !ie)]>Questo lo vede <b>SOLO HOTMAIL/OUTLOOK.COM</b><![endif]--><!---->
<!--[if (mso)]>Questo lo vede <b>SOLO OUTLOOK 2007/2010</b><![endif]--><!---->
<!--[if false]> Chiude la protezione per AOL webmail */</style><![endif]--><!---->
Conclusioni
Outlook.com, degno successore di Hotmail, si conferma uno dei client di posta meno amichevoli per chi vuole comporre semplici newsletter html e avere un minimo di controllo sulla loro visualizzazione, ma la maggior parte dei workaround che ci costringe ad applicare sono utili per migliorare la compatibilità con altri client meno noti.
Aggiungi un commento