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 |
|---|---|---|---|---|---|
|
SI | NO | NO | NO | NO |
|
Domini: @alice.it, @tin.it, @virgilio.it, @tim.it, @atlantide.it
URL: http://mailstore.rossoalice.alice.it/exchange/ Note:
| |||||
|
? | ? | ? | ? | ? |
|
Domini: @alice.it, @tin.it, @virgilio.it, @tim.it, @atlantide.it
URL: http://webmailcommunicator.alice.it | http://webmailvtin.alice.it | |||||
|
NO | SI | SI | NO | NO |
|
Domini: @aol.it, @aol.com
URL: http://webmail.aol.com/ | |||||
|
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. | |||||
|
NO | SI | SI | NO | SI |
|
Domini: @email.it
URL: http://email*.leonardo.it/webmail/wm_6 Note:
| |||||
|
NO | SI | SI | SI | SI |
|
Domini: @excite.it
URL: http://mail.excite.it/mail/ | |||||
|
SI | NO | SI | NO | NO |
|
Domini: @fastwebmail.it
URL: http://mail.google.com/a/fastwebmail.it/ | |||||
|
? | ? | ? | ? | ? |
|
Domini: @fastwebnet.it
URL: http://fastmail.fastwebnet.it | |||||
|
SI | NO | SI | NO | NO |
|
Domini: @gmail.com, @googlemail.com
URL: http://mail.google.com/mail/ | |||||
|
SI | SI | SI | NO | NO |
|
Domini: @gmx.it, @gmx.de, @gmx.com, @gmx.us, @gmx.co.uk
URL: http://mail-eu.gmx.com/ | |||||
|
NO | SI | SI | NO | NO |
|
Domini: @hotmail.it, @live.it, @live.com, @hotmail.com
URL: http://*.mail.live.com/mail/ | |||||
|
NO | NO | SI | SI | NO |
|
Domini: @ngi.it
URL: http://webmail.inet.it/cgi-bin/ | |||||
|
NO | SI | SI | NO | SI |
|
Domini: @infinito.it
URL: http://wm*.infinito.it/ | |||||
|
NO | SI | SI | NO | SI |
|
Domini: @leonardo.it, @email.it
URL: http://email*.leonardo.it/ | |||||
|
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. | |||||
|
NO | SI | SI | SI | NO |
|
Domini: @jumpy.it
URL: http://mailfarm.jumpy.it/mail/ | |||||
|
NO | SI | SI | SI | SI |
|
Domini: @katamail.it
URL: http://webmail.katamail.com/ Note:
| |||||
|
NO | SI | SI | SI | SI |
|
Domini: @katamail.it
URL: http://webmail.katamail.com/ Note:
| |||||
|
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. | |||||
|
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. | |||||
|
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. | |||||
|
NO | NO | SI | NO | NO |
|
Domini: @operamail.com
URL: http://mymail.operamail.com/ | |||||
|
NO | NO | NO | SI * | NO |
|
Domini: @poste.it
URL: https://postemail.poste.it/ Elemento <link>: supportato solamente all'interno del body. | |||||
|
NO | NO | SI | SI * | NO |
|
Domini: @tiscali.it, @tiscalinet.it
URL: http://mail.tiscali.it/cp/ Elemento <link>: supportato solamente all'interno del body. | |||||
|
SI | NO | SI | NO | NO |
|
Domini: @vodafone.it
URL: http://mail.google.com/a/vodafone.it/ | |||||
|
NO | SI | SI | NO | NO |
|
Domini: @yahoo.it, @yahoo.com
URL: http://*.mc*.mail.yahoo.com/mc/ | |||||
|
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.
- 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