Webmail marketing: questione di stile

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
Alice
*
SI NO NO NO NO
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.
Alice Communicator
? ? ? ? ?
Domini: @alice.it, @tin.it, @virgilio.it, @tim.it, @atlantide.it
URL: http://webmailcommunicator.alice.it | http://webmailvtin.alice.it
AOL
NO SI SI NO NO
Domini: @aol.it, @aol.com
URL: http://webmail.aol.com/
Dada
NO SI * SI SI * SI
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.
Email.it
*
NO SI SI NO SI
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.
Excite
NO SI SI SI SI
Domini: @excite.it
URL: http://mail.excite.it/mail/
FastwebMail
SI NO SI NO NO
Domini: @fastwebmail.it
URL: http://mail.google.com/a/fastwebmail.it/
FastMail Fastweb
? ? ? ? ?
Domini: @fastwebnet.it
URL: http://fastmail.fastwebnet.it
Gmail
SI NO SI NO NO
Domini: @gmail.com, @googlemail.com
URL: http://mail.google.com/mail/
GMX.it
SI SI SI NO NO
Domini: @gmx.it, @gmx.de, @gmx.com, @gmx.us, @gmx.co.uk
URL: http://mail-eu.gmx.com/
Hotmail
NO SI SI NO NO
Domini: @hotmail.it, @live.it, @live.com, @hotmail.com
URL: http://*.mail.live.com/mail/
Inet
NO NO SI SI NO
Domini: @ngi.it
URL: http://webmail.inet.it/cgi-bin/
Infinito
NO SI SI NO SI
Domini: @infinito.it
URL: http://wm*.infinito.it/
Leonardo
NO SI SI NO SI
Domini: @leonardo.it, @email.it
URL: http://email*.leonardo.it/
Interfree
SI SI * SI SI * SI
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.
Jumpy
NO SI SI SI NO
Domini: @jumpy.it
URL: http://mailfarm.jumpy.it/mail/
Katamail Classica
*
NO SI SI SI SI
Domini: @katamail.it
URL: http://webmail.katamail.com/
Note:
  • La richiesta degli stili remoti avviene anche nel caso di blocco delle immagini!
Katamail
*
NO SI SI SI SI
Domini: @katamail.it
URL: http://webmail.katamail.com/
Note:
  • La richiesta degli stili remoti avviene anche nel caso di blocco delle immagini!
Libero
NO NO SI SI * NO
Domini: @libero.it, @inwind.it, @iol.it, @blu.it
URL: http://wmail-new.libero.it/cp/
Elemento <link>: supportato solamente all'interno del body.
Libero Tradizionale
NO NO NO SI * NO
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.
Lycos
NO SI * SI SI * SI
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.
OperaMail
NO NO SI NO NO
Domini: @operamail.com
URL: http://mymail.operamail.com/
Poste
NO NO NO SI * NO
Domini: @poste.it
URL: https://postemail.poste.it/
Elemento <link>: supportato solamente all'interno del body.
Tiscali
NO NO SI SI * NO
Domini: @tiscali.it, @tiscalinet.it
URL: http://mail.tiscali.it/cp/
Elemento <link>: supportato solamente all'interno del body.
Vodafone.it
SI NO SI NO NO
Domini: @vodafone.it
URL: http://mail.google.com/a/vodafone.it/
Yahoo Classic
NO SI SI NO NO
Domini: @yahoo.it, @yahoo.com
URL: http://*.mc*.mail.yahoo.com/mc/
Yahoo
NO SI SI NO NO
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.

Aggiungi un commento

Cliccando su "Salva" accetti che i tuoi dati siano registrati con l'unico scopo di pubblicazione e gestione dei commenti (Leggi l'informativa completa)