Stai per mettere mano alle tue email per apportare qualche modifica utilizzando il linguaggio CSS ma non sei proprio sicuro di come fare? Ci sono un paio di cose che è bene sapere prima di mettersi all’opera, comprendere i vincoli dei client di posta elettronica e i loro vari gradi di supporto CSS rappresenta infatti un aspetto fondamentale.

Vediamo insieme qualche consiglio per facilitare il compito:

Utilizza stili in linea: assicurati di utilizzare il tag “stile” per incorporare le tue regole CSS nel codice HTML questo perché i client di posta elettronica hanno bisogno di stili in linea e non di siti web, i quali spesso e volentieri si avvalgono di fogli di stile esterni.

Garantisci la semplicità: sarebbe preferibile aderire alle proprietà CSS fondamentali in quanto non tutte sono supportate dai client di posta elettronica. Alcuni esempi sono il colore e la dimensione del carattere come anche il colore dello sfondo.

HappyTips: evita di complicarti il lavoro utilizzando ombre, gradienti e animazioni.

web designer mentre prende appunti seduto sul divano con il suo computer

Utilizza tabelle per il layout: nonostante il design moderno online faccia principalmente affidamento sui CSS per la disposizione grafica, il design delle email continua a fare ampio ricorso alle tabelle.

HappyTips: prediligi l’uso di tabelle per organizzare il layout della tua posta elettronica e dimenticati di flexbox, float o griglie.

Fai un check delle tue email: è bene assicurarsi che le tue email vengano visualizzate correttamente su tutte le piattaforme a fronte della varietà di client di posta elettronica e dispositivi esistenti. Come fare?

HappyTips: Avvaliti di strumenti come Litmus e Email on Acid per verificare la compatibilità CSS delle email.

I fallback: utilizza i fallback, avere una soluzione alternativa qualora un client di posta elettronica non supporti determinati attributi CSS rappresenta una scialuppa di salvataggio.

Abbiamo stilato una serie di linee guida che, se le seguirai, ti assisteranno nella creazione di email accattivanti ed efficienti che saranno compatibili con la maggior parte dei client di posta elettronica. Un consiglio sempre valido è quello di testare regolarmente le tue email per verificare e di conseguenza garantire la massima compatibilità. In questo modo qualora sorgessero dei problemi potresti intervenire tempestivamente apportando modifiche al CSS ove necessario.

Approfondiamo alcuni aspetti:

CSS interno

Siamo tutti d’accordo nell’affermare che uno degli aspetti più noiosi durante il processo di creazione delle email sia la necessità di specificare gli stili direttamente all’interno degli attributi di stile di ciascun elemento, in altre parole stiamo facendo riferimento al “CSS inline”.

Tuttavia, ora il CSS interno, ovvero gli stili definiti all’interno di un elemento <style>, gode di maggiore supporto. Questo approccio è decisamente più efficiente poiché permette di utilizzare combinazioni di selettori e ridurre la quantità di codice, rendendolo più leggibile.

Per implementare in modo corretto il CSS interno è necessario seguire alcune regole. Stai già per arrenderti perchè pensi che le regole siano troppe? Ed è qui che arriva la buona notizia! Fortunatamente, è possibile aderire a tutte queste regole semplicemente utilizzando due elementi <head> e inserendo l’elemento <style> nel secondo.

Query multimediali

Il CSS interno ti permette di impiegare le query multimediali, essenziali per il responsive design. Ti consigliamo di creare layout reattivi che possano adattarsi elegantemente a layout più semplici e verticali.

Happy Tips: Evita le query multimediali nidificate. Limita o evita completamente di usare le condizioni a caratteristiche come la larghezza dello schermo, la larghezza minima e massima.

web designer mentre tramite css modifica layout email

Font Personalizzati

I font personalizzati migliorano l’estetica delle email, rendendole più attraenti, tuttavia, l’integrazione attraverso il metodo più comune (<link rel=”stylesheet”>) è supportata solo dal 21,21% dei client di posta elettronica attuali.

L’alternativa, @font-face, sfortunatamente non gode di un supporto molto più ampio. Nonostante questi limiti, entrambi i metodi consentono l’uso di font di fallback, minimizzando i rischi nell’adozione di @font-face.

Questo approccio rimane relativamente semplice e può essere utilizzato con servizi di font come Google Fonts e Adobe Fonts.

Immagini SVG

Purtroppo, l’SVG ha un supporto molto limitato e le sue opzioni di fallback sono ancora meno affidabili. Al momento, sarebbe preferibile evitare l’uso di SVG e optare invece per immagini PNG/JPG.
In generale, è consigliabile limitare l’uso di immagini pesanti, non solo per ragioni di prestazioni su dispositivi più lenti, ma anche per garantire una migliore esperienza utente sui dispositivi portatili, evitando scorrimenti eccessivi.

Pensavi sarebbe stato più semplice vero? Ebbene si, lo sviluppo della email rimane complesso nonostante l’introduzione di funzionalità moderne.
Se vuoi alleggerire il carico di stress ti consigliamo di utilizzare drag and drop di Postcards per creare il design desiderato senza doverti preoccupare di quali funzionalità HTML/CSS siano supportate o meno.