Share
Sulla scia di alcune delle nostre recenti scoperte riguardanti lo stato dei CSS in e-mail, ho calcolato che era giunto il momento di scuotere un po 'le cose. Quindi, ecco qui: i CSS3 nella vita delle email. Ok, quindi mi dispiace se ti ho fatto cadere il tuo toast, lì. So che stai pensando, "Ma ... è ancora in gran parte sperimentale ... Nel browser, per l'avvio!" Sì, il supporto CSS3 è ancora più incostante tra una serie di client di posta elettronica che non riescono nemmeno a ottenere CSS2. Ma ciò non significa che sia troppo presto per toccarne uno.
In questo articolo, passerò attraverso due proprietà che è possibile utilizzare nei modelli di e-mail, insieme ad alcuni esempi pratici. Quindi, togliti il brindisi e mettiamoci al lavoro.
Se stai progettando modelli di email HTML per un po 'di tempo, saprai che è quasi impossibile prevedere quale tipo di stranezze legate ai CSS verranno visualizzate durante il test della tua progettazione tra i principali client di posta elettronica. Ad esempio, Gmail è stato famoso per aver tolto qualsiasi CSS che non fosse in linea (e per un po ', non riconoscendo il cellpadding della tabella e il cellspacing), mentre alcuni clienti semplicemente scelsero di eliminare completamente gli stili.
Se sei nuovo nella progettazione di modelli di email HTML, questa è probabilmente la cosa più inquietante che puoi leggere. Ma non temere, ci sono un sacco di informazioni là fuori per portarti al massimo. Dai un'occhiata a "Rock Solid HTML Emails" e vedrai che non c'è motivo di aumentare lo zefrank. È gestibile.
Comunque, dato che i progettisti hanno già abbastanza problemi con il supporto CSS2 nei client di posta elettronica, non dovrebbe essere un sogno un po 'CSS3? Bene, continua a leggere.
Sì e no. Per il caso sì, ci sono un paio di noti client di posta che hanno un supporto CSS3 piuttosto robusto (ne parleremo più avanti). La buona notizia è che alcune delle proprietà CSS3 che vengono visualizzate in questi client si degradano con garbo altrove, il che significa che esiste sempre un'opzione di fallback. Ma detto questo, se vuoi essere sicuro che i tuoi modelli di email siano visualizzati in modo quasi coerente tra i principali client di posta, allora CSS3 non fa per te.
Se passi alla nostra guida ai CSS in email, vedrai che ci sono alcuni client di posta che hanno supporto parziale o completo per un certo numero di proprietà CSS3. E per la maggior parte, hanno una cosa in comune - Webkit.
Il modo in cui il tuo modello di email appare in Outlook non assomiglia a come apparirà sul tuo Blackberry o quando visualizzi la tua webmail in Firefox.
Se hai la benedizione di lavorare sempre su un Mac, controllare la tua posta elettronica sul tuo iPhone e passare il tempo navigando sul tuo iPad, allora hai una visione abbastanza coerente del web. Sfortunatamente, il resto di noi ha a che fare con vari gradi di supporto CSS su un certo numero di piattaforme di venditori. Il modo in cui il tuo modello di email appare in Outlook non assomiglia a come apparirà sul tuo Blackberry o quando visualizzi la tua webmail in Firefox.
Quindi probabilmente non ti sorprende che i dispositivi Apple utilizzino lo stesso motore di rendering (il software che decide come visualizzare codice HTML e CSS) attraverso le loro app di posta elettronica e il browser Safari. Per i progettisti, è probabilmente meno sorprendente che questo motore sia Webkit e il supporto CSS3 sia comparativo, molto buono.
Detto questo, i client di posta elettronica Webkit (Apple Mail, iPhone e iPad Mail) rappresentano circa il 20% dei client di posta utilizzati complessivamente. Tuttavia, ciò che conta davvero sono i client di posta elettronica utilizzati dai tuoi iscritti. Ad esempio, uno sviluppatore di software Mac potrebbe avere quasi il 100% dei propri clienti che visualizza la propria newsletter sui dispositivi Apple.
Con questo in mente, diamo un'occhiata ad alcune delle proprietà CSS3 che ora si insinuano nella tua casella di posta.
Benvenuti nell'ultimo numero di Widget Inc gossip mensili.
Aggiunta di drop e ombre interne con text-shadow è un modo non distruttivo per decorare il tuo testo. Non solo può salvarti dal creare altrimenti lo stesso effetto usando un'immagine, ma sembra soddisfacente nei client in cui text-shadow non è supportato.
Visualizzalo in un browser web.
Utilizzando gli angoli arrotondati sul layout altrimenti squadrato o pulsanti quadrati è già una tecnica comunemente utilizzata sul web. Può anche dare ai tuoi modelli di email un aspetto più morbido e moderno nei client di posta sopra, oltre a tornare in modo sicuro agli angoli quadrati quando non è supportato.
Con l'annuncio che border-radius sarà formalmente implementato in IE9, possiamo aspettarci di vedere più del suo uso.
Alcuni degli usi più estremi di CSS3 nei modelli di e-mail possono essere trovati in situazioni in cui i destinatari utilizzano una serie molto limitata di client di posta elettronica. Un grande esempio di questo è lo sviluppatore Mac di cui sopra. Il panico, i fornitori di "software Mac incredibilmente buono", invia fatture incredibili dopo aver acquistato uno dei loro titoli, che includono: sussulto! - pulsanti animati e luminosi:
Ecco il codice che hanno utilizzato per ottenere questo effetto:
-webkit-animation-name: 'glow'; -webkit-animation-duration: .7s; -webkit-animation-iteration-count: infinito; -webkit-animation-direction: alternate; -webkit-animation-timing-function: easy-in-out;
Ovviamente, questo non apparirebbe altrettanto valido in un client di posta elettronica diverso da Apple Mail, ma è certamente un concetto accurato!
Quanti CSS3 riesci a individuare in questo altro design di e-mail di Panic? Fai clic per una versione più grande:
Prendi nota di come il design si ridimensiona elegantemente nel browser. E quelle strisce di posta aerea? Sono barre in avanti (/). Genio! Per scoprire cosa è entrato in questo modello, dai un'occhiata a questo articolo.
/ / / / / / / / /
Dai un'occhiata ai report di utilizzo del client email di CampaignMonitor e passa alla guida definitiva ai CSS in email per avere un'idea delle proprietà CSS3 disponibili nei principali client di posta elettronica. E, naturalmente, prova, prova, prova. Con una spruzzata di CSS3, un po 'di sperimentazione e un pizzico di cautela, puoi rendere il tuo modello di email distinguersi dalla massa.
Se sei dell'abilità e vorresti vendere i tuoi progetti di email, ora è il momento di dare un'occhiata alla categoria Templates Email su ThemeForest!
Accentsconagua