Webmail marketing: questione di stile

Inserito da Stefano Bagnara il 9 Dicembre 2008 - 19:21

Focus on

Nelle puntate precedenti vi abbiamo detto quanto dovrebbero essere larghe le vostre newsletter e abbiamo approfondito il discorso blocco delle immagini. Abbiamo poi fatto una parentesi molto tecnica sul quirks mode ed eccoci finalmente ad altro punto chiave nella creazione di una newsletter html: il supporto per gli stili (più tecnicamente CSS)

In particolare abbiamo verificato quale tipo di supporto vi sia per

gli attributi del tag body spesso usati per scegliere colori predefiniti del testo e dello sfondo
il tag <style> sia all'interno dell'head che nel body del codice html
l'attributo style="" utilizzato negli elementi html
il tag <link> utilizzato per includere un foglio di stile remoto
la regola @import all'interno del tag style, utilizzata per includere un foglio di stile remoto

In questa tabella trovate i risultati raccolti, con un occhio di riguardo per i dati più critici :

Logo	<body>	<style>	style=""	<link>	@import

Domini: @alice.it, @tin.it, @virgilio.it, @tim.it, @atlantide.it URL: http://mailstore.rossoalice.alice.it/exchange/ Note: Nella visualizzazione come pagina web supporta il tag <style> e l'attributo style per gli stili inline.

Domini: @alice.it, @tin.it, @virgilio.it, @tim.it, @atlantide.it URL: http://webmailcommunicator.alice.it \| http://webmailvtin.alice.it

Domini: @aol.it, @aol.com URL: http://webmail.aol.com/

Domini: @dada.net, @supereva.it, @supereva.com, @freemail.it, @freeweb.org, @mybox.it, @superdada.com, @cicciociccio.com, @mp4.it, @dadacasa.com, @clarence.com, @concento.it URL: http://.email.dada.net/cgi-bin/ Elemento <style>: supportato solamente all'interno del body. Elemento <link>*: supportato solamente all'interno del body.

Domini: @email.it URL: http://email.leonardo.it/webmail/wm_6 Note*: Nell'uso del tag <style> accertarsi di non utilizzare i commenti html <-- e --> poichè in questo caso email.it elimina l'intero contenuto.

Domini: @excite.it URL: http://mail.excite.it/mail/

Domini: @fastwebmail.it URL: http://mail.google.com/a/fastwebmail.it/

Domini: @fastwebnet.it URL: http://fastmail.fastwebnet.it

Domini: @gmail.com, @googlemail.com URL: http://mail.google.com/mail/

Domini: @gmx.it, @gmx.de, @gmx.com, @gmx.us, @gmx.co.uk URL: http://mail-eu.gmx.com/

Domini: @hotmail.it, @live.it, @live.com, @hotmail.com URL: http://*.mail.live.com/mail/

Domini: @ngi.it URL: http://webmail.inet.it/cgi-bin/

Domini: @infinito.it URL: http://wm*.infinito.it/

Domini: @leonardo.it, @email.it URL: http://email*.leonardo.it/

Domini: @interfree.it URL: http://webmail.interfree.it/cgi-bin/ Elemento <style>: supportato solamente all'interno del body. Elemento <link>: supportato solamente all'interno del body.

Domini: @jumpy.it URL: http://mailfarm.jumpy.it/mail/

Domini: @katamail.it URL: http://webmail.katamail.com/ Note: La richiesta degli stili remoti avviene anche nel caso di blocco delle immagini!

Domini: @katamail.it URL: http://webmail.katamail.com/

Domini: @libero.it, @inwind.it, @iol.it, @blu.it URL: http://wmail-new.libero.it/cp/ Elemento <link>: supportato solamente all'interno del body.

Domini: @libero.it, @inwind.it, @iol.it, @blu.it URL: http://wpop.libero.it \| http://wpop.inwind.libero.it Elemento <link>: supportato solamente all'interno del body.

Domini: @lycos.it URL: http://.mail.lycos.it/app/ Elemento <style>: supportato solamente all'interno del body. Elemento <link>*: supportato solamente all'interno del body.

Domini: @operamail.com URL: http://mymail.operamail.com/

Domini: @poste.it URL: https://postemail.poste.it/ Elemento <link>: supportato solamente all'interno del body.

Domini: @tiscali.it, @tiscalinet.it URL: http://mail.tiscali.it/cp/ Elemento <link>: supportato solamente all'interno del body.

Domini: @vodafone.it URL: http://mail.google.com/a/vodafone.it/

Domini: @yahoo.it, @yahoo.com URL: http://.mc.mail.yahoo.com/mc/

Domini: @yahoo.it, @yahoo.com URL: http://.mg.mail.yahoo.com/dc/

Possiamo riassumere la tabella in questo modo:

Il <body> ed i suoi attributi sono supportati da pochissime webmail. Questo significa che non possiamo fidarci degli attributi color e bgcolor del body per decidere sfondo e colori del testo delle nostre newsletter.
L'elemento <style>, da usare preferibilmente all'interno del <body>, è supportato da molti ma non da tutti. In particolare non è suppportato da alcuni "grandi" come Alice, Gmail (e derivati), Libero, Tiscali e altri.
L'attributo style="" è il metodo più supportato ed è anche l'unico metodo funzionante per impostare stili in Gmail (e derivati come Fastwebmail e Vodafone) ed il meno usato Operamail
Con nostra sorpresa l'elemento <link>, sempre da usare all'interno del <body>, è supportato da molte webmail ed è anche l'unico modo funzionante per applicare stili alla versione classica della webmail di Libero e a quella di Poste.it.

Tenendo inoltre in considerazione che tutti i programmi desktop testati supportano tutte le funzionalità analizzate in questo post, possiamo trarre alcune conclusioni:

Alice non supporta alcun meccanismo di visualizzazione degli stili. Gli utenti di Alice vedranno quindi solo gli attributi html (e non tutti).
Il compromesso più semplice per aggiungere stili è l'uso dell'elemento <style> all'interno del body: rinunciamo però allo stile su Gmail (e derivati), Libero, Tiscali, Inet, Operamail, Poste
Se siete disposti a rinunciare alla visualizzazione degli stili dalla versione tradizionale di Libero e dalla webmail di Poste.it (oltre che la solita Alice) allora la soluzione è l'uso dell'attributo style="" associato ai singoli elementi
Se potete vivere senza che Gmail (e derivati) visualizzi al meglio lo stile della vostra newsletter la combinazione di <style> (contenente le regole CSS) e <link> (alle stesse regole in un foglio di stile online) è un'ottimo compromesso che evita di appesantire la newsletter con un uso estremo degli attributi "style".
Se invece la parola d'ordine è raggiungere con stile la maggior parte degli utenti allora ora sapete che dovrete applicare tutte le tecniche citate e comunque non trascurare l'estetica della newsletter quando visualizzata senza stili (per "colpa" di Alice).
Interessante, inoltre, notare che il supporto per la direttiva @import, sebbene diffuso, non aggiunge nulla alla compatibilità delle newsletter con le webmail

Aggiornamento del 10/12/2008: Consigliamo di non utilizzare i commenti html (<-- e -->) all'interno delle dichiarazioni di stili <style> poichè la webmail di email.it rimuove tali contenuti.

Alice aggiorna la sua "datata" webmail

from Email Marketing Blog on 18 Giugno 2010 - 23:19

La settimana scorsa ricevo questo messaggio in una casella @alice.it LA MAIL DI TELECOM ITALIA CAMBIA VOLTO! Nei prossimi mesi e in maniera graduale sara' disponibile la nuova Alice MAIL con una veste grafica completamente rinnovat

Nuove features: Invio di test multiutente e blocco stili CSS

from VOXmail on 8 Luglio 2009 - 17:56

Sono già passati 2 mesi dall'ultima importante novità di VOXmail (l'integrazione con Facebook), periodo nel quale il team di sviluppo non è affatto stato con le mani in mano! Infatti eccoci con due nuove importanti novità del servizio, che potenziano

Testo bianco su sfondo nero: attenzione alle webmail!

from Email Marketing Blog on 25 Marzo 2009 - 20:16

Poco più di un mese fa portavo qualche esempio in cui il nero su bianco poteva creare qualche grattacapo nella creazione di una newsletter. Questa volta, complici due famose case automobilistiche, vi presento il problema opposto. Comincio con Mazda, che

Adnkronos: due passi avanti e due indietro.

from Email Marketing Blog on 24 Marzo 2009 - 12:43

Tra il 16 e il 17 marzo Adnkronos ha modificato il layout della propria newsletter. A prima vista ho apprezzato l'eliminazione di moltissimi elementi grafici, la scelta di semplice testo con stile per l'intestazione e il menu "compatto" ma ben visibile.