Email e CSS. Approfondimento

Questo che segue è una traduzione in italiano dell'articolo presente su campaign monitor, con l'aggiunta di altri tip & trick suggeritimi da alcuni colleghi.
Email e CSS. Approfondimento

Introduzione

Questo articolo si propone come approfondimento di una precedente guida scritta da Antonio sul possibile binomio Email e CSS. Il sito web, www.campaignmonitor.com, linkato precedente articolo, risulta essere un ottima risorsa online per mantenere aggiornate le proprie conoscenze in materia di email in html. In particolare in questa pagina vengono descritte, in inglese, le linee guida che dovrebbero essere seguite per creare newsletter compatibili con i piu importanti client e webmail esistenti tutt’oggi; mentre a questo link, un ottima tabella per controllare velocemente la compaibilità delle proprietà CSS.

Client di posta e webmail

Voglio elencarti i piu importanti divisi tra desktop, web e mobile da tenere sott’occhio quando si realizza una newsletter. Tra questi ho evidenziato in grassetto, quelli che secondo me andrebbero considerati con un occhio di riguardo , perchè più utilizzati e famosi.
Desktop: Outlook ’07 – Outlook ’03 – Windows MailApple Mail – Entourage 2004 – Entourage 2008 – Notes 6 and 7- Lotus Notes 8.5 – AOL Desktop 10 – Thunderbird 2
Web: Yahoo! Mail – Yahoo! Classic – HotmailGmail – MySpace – AOL Web – MobileMe
Mobile: iPhone mailAndroid EmailAndroid Gmail – Palm Pre (WebOS) – Palm Treo (Win Mobile 6.5) – Palm Treo (Palm Garnet OS) – Blackberry

Informazioni generiche:

[A] Nell’oggetto della mail evitare parole o frasi che possano portare ad essere intercettati come SPAM. Evitare quindi parole legate lamondo delle scommesse o farmaci.
[B] Scrivere sempre il testo in formato ASCII
[C] Evitare di inserire il DOCTYPE, perchè viene inserito in automatico dalla piattaforma.
[D] Evitare l’inserimento di commenti html all’interno del codice.

Usare le tabelle per il layout

[A] E’ conveniente utilizzare sempre le tabelle per strutturare i layout in quanto client come gmail o outlook 2007 hanno uno scarso supporto per i float, margini e padding a differenza delle tabelle nidificate che sono ampiamente supportate. I layout inoltre non dovrebbero avere una larghezza maggiore di 600px.
[B] Quando utilizzi contemporaneamente table width, td width, td padding e css style padding, avrai notevoli differenze di visualizzazione tra i diversi client. Il modo più affidabile per impostare la larghezza della tabella è quello di impostare una width per ogni cella, non per la tabella stessa. Mai dare per scontato che se non si specifica una larghezza della cella il client di posta elettronica lo farà per te. Non lo farà! Evitare inoltre di utilizzare larghezze in percentuale. I client come Outlook 2007 non le rispettano, soprattutto per le tabelle nidificate. Se si desidera aggiungere del padding per ogni cella, utilizzare l’attributo cellpadding della tabella o CSS padding per ogni cella, ma mai combinare le due cose.
[C] Le tabelle nidificate sono di gran lunga più affidabili che impostare i margini e i padding sinistro e destro per le celle. Se riesci ad ottenere lo stesso effetto con le tabelle nidificate, questa sarà la miglior soluzione per combattere i bug dei client di posta.
[D] E’ preferibile evitare il background-color e le background-image per il body. L’alternativa è quella di inserire una tabella 100% che copra interamente la superficie del client e attribuire ad essa eventuali colori o immagini di sfondo.
[E] Evitare di inserire nel markup spazi bianchi tra le celle, alcuni client inseriscono padding addizionale, spaccando il template inspiegabilmente.

CSS e formattazione dei testi

Molti designer, per paura che i client non rispondano correttamente all’utilizzo delle proprietà css inerenti al testo, utilizzano ancora il tag font. Basta guardare questa tabella per sfatare ogni dubbio sull’incompatibilità della maggior parte delle proprietà css inerenti al testo.
[A] Ricordati sempre di spostare il CSS in linea! Gmail è il colpevole. La buona notizia è che questo procedimento può essere completamente automatizzato grazie ad un ottimo servizio online offerto da Premailer, che sposterà tutti i CSS in linea con il clic. Vi consiglio di lasciare questo step alla fine del tuo processo di compilazione in modo da poter lavorare con più comodità in un file css esterno oppure nel tag style nell’head.
[B] Un certo numero di client di posta rifiutano le notazioni abbreviate per la proprietà font. Conviene sempre dichiarare ogni singola proprietà (font-size; color; font-style …). L’utilizzo di @font-face è sconsigliato, i risultati non sono dei migliori, così, purtroppo, i font web-safe nelle email risultano essere ancora lo standard da preferire. Infine quando setti il colore in esadecimale non utilizzare la notazione abbreviata (#000), ma sempre quella estesa (#000000).
[C] L’approccio migliore per creare spaziature verticali per i paragrafi è quello di impostare il margine in linea con i CSS per ogni paragrafo della tua e-mail. Ti ricordo ancora una volta, che conviene inserire un unica referenza in testa al documento durante il processo di creazione della tua e-mail, quindi solo alla fine utilizzare Premailer per portarlo in linea in ogni paragrafo. Se però avete esigenze molto particolari di design e il vostro template deve essere preciso al pixel, sconsiglio di utilizzare i paragrafi e di inserire il testo direttamente nelle celle e settare la formattazione del testo direttamente inline nella cella, oppure utilizzare il tag FONT con i relativi attributi.
[D] Alcuni client di posta sovrascriveranno i colori dei link con i loro valori predefiniti. E’ possibile evitare questo comportamento seguendo questi due accorgimenti. In primo luogo, impostare un colore inline per ogni link. Quindi, aggiungere uno span ulteriore all’interno del link e risettare inline lo stesso colore. Ricordarsi inoltre di settare sempre il font-size degli stessi.
[E]Evitare di inserire nel corpo del link l’indirizzo URL, ma solo un testo rappresentativo del link stesso. Controllare inoltre che negli URL non siano presenti caratteri del tipo /index.php&lang=1, in quanto potrebbero essere tramutati in automatico dai client in

/index.php&lang=1.

Le immagini nelle email html

[A] La cosa più importante da ricordare a proposito delle immagini nelle e-mail è che per molti utenti, non saranno visibili a causa delle impostazioni predefinite. Ti consiglio quindi di limitare al minimo l’utilizzo delle immagini ma soprattutto di evitare che la mancanza delle stesse possa precludere porzioni importanti di testo. Quando inserite nel layout cerca sempre di fornire un link assoluto, i client non interpretano quelli relativi.
[B] Le immagini utilizzate come spacer-image non sono considerate come una tecnica affidabile. La maggior parte dei client di posta sostituiscono le immagini con un segnaposto vuoto delle stesse dimensioni. Altri “strecciano” l’immagine . La caratteristica “x” rossa al posto dell’immagine è attiva di default nella maggior parte dei client di posta elettronica. Fissa sempre le larghezze di celle sia in presenza di immagini che non, per garantire la giusta formattazione delle stesse.
[C] Se si dimentica di impostare le dimensioni per le immagini, un certo numero di client di posta settano automaticamente la dimensione delle stesse quando vengono bloccate dal programma, spaccando così il layout. Inoltre, assicurarsi che tutte le immagini siano correttamente ridimensionate prima di aggiungerle alla tua email. Alcuni client e-mail ignoreranno le dimensioni specificate nel codice e si baseranno sulle reali dimensioni dell’immagine.
[D] Lotus Notes 6 e 7 non supportano immagini in formato PNG a 8-bit o 24 bit. Utilizzare sempre il formato GIF o JPG per tutte le immagini.
[E] Outlook 2007 non ha il supporto per le immagini di sfondo per il body. Se si desidera utilizzare un’immagine di sfondo nella progettazione, fornire sempre un colore di sfondo così che il client di posta elettronica può ripiegare su di esso. Questo stratagemma risolve il problema delle immagini bloccate (quando compare la X rossa) e il problema del background per Outlook2007.
[F] Ormai tutti sono dell’opinione che i client di posta hanno distrutto la possibilità di creare una e-mail in HTML semanticamente corretta e accessibile. Il testo alternativo (alt), come risaputo, è molto importante, soprattutto per le immagini che risultano bloccate. Anche in presenza di immagini bloccate, molti client di posta visualizzano il testo alternativo fornito. Ricorda solo che alcuni client di posta come Outlook 2007, Hotmail e Apple Mail non supportano il testo alt quando le immagini sono bloccate.
[G] Per qualche inspiegabile ragione, Windows Live Hotmail aggiunge alcuni pixel di padding supplementare sotto le immagini. Una soluzione è di impostare la proprietà display in questo modo. img {display: block;} Questo rimuove il padding in Hotmail.
[H] Sia Outlook 2007 che le versioni più vecchie di Notes non offrono alcun sostegno per la proprietà float. Per compensare la mancanza del float, utilizza l’attributo align del tag img. Se noti un comportamento anomalo delle immagini in Yahoo! mail aggiungi align=”top”, spesso può risolvere tali anomalie.

I video nelle email

Il supporto al video è stato per lungo tempo relegato all’utilizzo delle uniche gif animate. Anche se i nuovi tag html5 hanno mostrato alcuni risultati promettenti. I video in HTML5 funzionano in molti client di posta al momento, tra cui Apple Mail, Entourage 2008, MobileMe e su iPhone. Il vero vantaggio di questo approccio è che se il video non è supportato, è possibile fornire una GIF animata o un’immagine cliccabile che collega al video nel browser.

Che dire lato mobile?

L’avvento del mobile ha contribuito a creare più confusione di quanta già non ce ne fosse. Seguendo alcune regole base sarai in grado di garantire un risultato decente anche per coloro che leggono la newsletter da smartphone.
[A] La larghezza standard di 600px per un layout di una newsletter non ha creato grossi problemi neanche con l’introduzione del mobile in quanto la larghezza massima disponibile oscilla dai 320 fino ai 360px. Riferendosi ad un massimo di 600 pixel di larghezza, viene garantito che il layout della newsletter e quindi i suoi contenuti siano tranquillamente leggibili nel momento in cui viene effettuato il ridimensionamento da parte dello smartphone.
[B] I client di posta elettronica che utilizzano WebKit (come iPhone, Pre e Android) sono in grado di regolare automaticamente la dimensione dei caratteri per migliorare la leggibilità. Tutto questo fa più male che bene al tuo layout. Si può sempre disattivare questa caratteristica con la seguente regola CSS: -webkit-text-size-adjust: none;

Piccolo consiglio

Come i browser anche le webmail hanno le loro incoerenze CSS iniziali. Dato che non è possibile inserire un reset a monte, un buon metodo per uniformare il più possibile il layout ed eliminare le incoerenze è quello di entrare nelle webmail più importanti e analizzare con firebug in fase di testing la nostra mail. Eventuali margini colori o padding in più che tendono a rompere il nostro layout potranno essere facilmente (nel più delle volte) sovrascritti dal nostro CSS inline.

Alcuni link utili

Per concludere eccovi alcuni link utili da consultare inerenti all’argomento per prendere ispirazioni per le tue newsletter.

  1. Esempi di Newlsetter Grafiche
  2. Template grafici da scaricare già pronti con psd e html
  3. HTML di partenza per disegnare una email :: Segnalato da Stefano Bagnara

Conclusioni

Tanti problemi, codice sporco e ridondante, tabelle a GO-GO, utilizzo di immagini per il layout, tecniche anni ’90 che tornano alla ribalta… ma vuoi mettere la soddisfazione di riuscire ad inviare una mail accattivante e di impatto a tutti i tuoi clienti? … ma In questo caos diffuso, c’è un gruppo di persone che dicono NO! Loro sono quelli che portano avanti gli standard, anche nelle email. Su questo sito puoi restare aggiornato sui continui sviluppi dei client e delle webmail. Un saluto e al prossimo articolo!

  • http://www.sergiogandrus.it Sergio Gandrus

    Ottimo articolo! E’ assolutamente nei miei bookmark.
    Un paio di domande e una notazione. Non è possibile inserire javascript? Ho fatto qualche prova con Gmail ma senza fortuna.
    Come si possono usare dei font alternativi ai classici?
    Notazione: nel punto E di “Css e formattazioni dei testi” credo che il tentativo di scodificare l’HTML non sia andato a buon fine :grin:

    • http://emailmarketingblog.it Stefano Bagnara

      Javascript non si può usare nelle email. Penso sia supportato da solamente l’1% dei client (cose minori) e porta invece ad una quasi sicura classificazione come spam da parte di tutti gli altri.

      I font alternativi se intendi quelli inseribili con le “nuove” direttive “@font-face” non sono supportati quasi da nessun client. Se vuoi usare un font “standard” puoi usare il vecchio e deprecato .

  • http://emailmarketingblog.it Stefano Bagnara

    Ottimo articolo. NOn sono d’accordo su
    1C: preferisco usare il doctype XHTML che fa renderizzare in modalità standard e non quirks che crea meno inconsistenze (gmail e hotmail renderizzano comunque in modalità standard, quindi meglio adeguarsi a quello che faranno comunque loro).
    1D: manca?
    1E: poco importante, non danno fastidio e ci sono punti più critici.

    I punti dal 2 in poi sono molto più importanti e li condivido!

    Questo è un buon html di partenza per disegnare una email:
    http://htmlemailboilerplate.com (nei commenti del codice proposto si trovano tante spiegazioni interessanti)

    • http://www.sergiogandrus.it Sergio Gandrus

      Bookmarkato anche questo :smile:

  • http://www.simogrima.com/ Simone

    Ottimo articolo, non ho molto tempo da dedicare all’argomento e trovare un sacco di info utili tutte in uno solo posto è una grande cosa. Complimenti.

  • http://www.stefanovollono.it Stefano Vollono

    @Sergio: Si! WP mi ha scodificato il carattere :)

    Grazie Stefano per aver risposto a Sergio, effettivamente l’utilizzo di javascript è rischioso, sia per lo spam che per la compatibilità; così come per il font-face!!!

    @Stefano, grazie per il suggerimento sul DOCTYPE! In realtà D non manca, ho saltato una lettera, ora lo correggo :) … ottimo il link che hai condiviso! Lo inserisco nell’articolo.

    @Simone: grazie. Spero possa aiutare anche altre persone.

    • http://emailmarketingblog.it Stefano Bagnara

      Se ti interessano i boilerplate per le email c’è anche questo molto valido (più recente dell’altro):
      http://www.emailology.org/#1

      Non ho ancora avuto modo di fare un check per capire se uno dei due include già tutte le funzionalità dell’altro o se gli approcci sono compatibili tra loro.

      Sono due risorse abbastanza recenti e forse un po’ troppo avanzate: nel fare email html è bene fare cose molto molto semplici. I vari accorgimenti per la compatibilità smartphone/tablets cominciano però ad essere importanti.

      • Stefano Vollono

        Ottimo!

  • http://www.stefanovollono.it Stefano Vollono

    Quasi dimenticavo Sergio, se devi aggiungere l’articolo ai tuoi bookmark… bhe almeno usa bookzingr!!! :smile: :smile:

    • http://www.sergiogandrus.it Sergio Gandrus

      @Stefano Ovviamente ;)

  • Pingback: Articoli settimana 26/02/2012 | Saverio Gravagnola()

  • Pingback: Email e css, binomio impossibile? | Laboratorio CSS()

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github