Ogni email è un mix, il più possibile bilanciato, fra testo e immagini. In un mondo in cui l'aspetto visivo è oltremodo importante, le immagini che usiamo nelle nostre newsletter giocano un ruolo importante per ingaggiare il nostro lettore e convincerlo che quello che gli stiamo dicendo vale la sua attenzione.

Si fa presto a dire immagini

Le immagini, in ambito digitale, vengono salvate su file secondo vari formati, ognuno con le sue caratteristiche peculiari. I formati più utilizzati nel web sono JPEG, GIF, PNG e SVG.

Ognuno di questi formati è nato in tempi e con motivazioni diverse: non è sempre facile, per chi non è addetto ai lavori, sapere quale di questi sia il migliore in certi contesti e dunque quale sia la scelta ideale.

Proveremo a identificare caratteristiche e criticità di ognuno, per aiutarvi in questa non banale scelta.

All'alba del 2018 una delle grandi scommesse dell'email marketing pare essere l'email interattiva: utilizzo di tecniche css e html che rendano la newsletter un vero e proprio microsito, con tanto di animazioni e gamification (solamente per i client di posta e device in grado di supportare le tecnologie necessarie).

Dall'altra parte si potrebbe obiettare che questa tendenza è più dettata dalle esigenze di creativi e agenzie che dalle necessità effettive di business e che forse uno sforzo così impegnativo in questo senso non corrisponda poi ad un ritorno di investimento adeguato.

Foto di Florian Klauer su Unsplash

Come sempre è difficile stabilire una regola valida per ogni situazione, ma è possibile che la vera rivoluzione del 2018 sia il ritorno deciso all'email testuale, o comunque veramente minimale in termini di design?

Ad oggi il problema relativo allo scaricamento automatico o meno delle immagini da parte dei programmi di posta elettronica e delle webmail pare essersi molto ridotto.

Se è vero che qualche anno fa la maggioranza delle newsletter e delle email che facevano riferimento ad immagini esterne veniva visualizzata di base senza immagini, con l'avvento degli smartphone la situazione è decisamente cambiata.

Mail di IOS mostra sempre le immagini e da fine 2013 anche Gmail e la relativa applicazione Android/Ios hanno cambiato radicalmente comportamento, nascondendo le immagini solo in casi particolari.

L'attenzione dunque verso un certo tipo di ottimizzazione - il testo alternativo legato all'immagine - è venuta meno; è comunque bene ricordare che

• Outlook per Windows non mostra automaticamente le immagini
• Yahoo non mostra automaticamente le immagini
• Gmail di tanto in tanto decide di non mostrare immagini
• Thunderbird non mostra automaticamente le immagini

Ci sono inoltre altri casi in cui il testo alternativo all'immagine diventa importante

• Problemi ed errori nel caricamento delle immagini
• Utilizzo di screenreader (programmi che si occupano di leggere il contenuto a video per ipovedenti)

Ignorare il problema non è una soluzione accettabile: se la nostra email contiene immagini funzionali e utili a chi le riceve, è necessario prevedere un testo alternativo.

A fine giugno Yahoo! Mail ha subito un drastico redesign, che ha coinvolto non solo l'aspetto grafico e di UI, ma ha toccato l'intera piattaforma, compreso il post processing delle email in arrivo e il supporto di alcune proprietà CSS.

La nuova interfaccia è senza dubbio più moderna e leggibile, risultato ottenuto abbracciando l'ormai omnipresente material design; in generale l'esperienza d'uso è sicuramente migliorata, anche grazie ad un alleggerimento complessivo che si fa notare in termini di reattività.

Le novità inserite sono molte, a partire da un potente motore di ricerca interno, un'area dedicata a tutti gli allegati inviati e ricevuti e un editor di email completamente rivisto: Yahoo strizza l'occhio al pubblico dei MEME e delle GIF, con una libreria immediatamente disponibile e nel contempo offre la possibilità di cornici e sfondi che, ad essere sinceri, ricordano un po' i "bei" tempi andati.

Il nuovo Yahoo! Mail e il rendering

Le novità più interessanti per chi si occupa di Email Marketing sono senza dubbio quelle legate al rendering delle email: Yahoo! Mail in passato è stata una delle "bestie nere" dell'email design, a causa delle sue peculiarità e dei trick necessari per mantenere una visualizzazione coerente.

Nell'ultimo articolo abbiamo visto come il lavoro legato all'email marketing possa riassumersi in quattro fasi e ne abbiamo analizzata la prima, la costruzione della lista, suggerendo alcuni strumenti utili alla gestione di questo importante e delicato processo. Una volta costruito il database, arriva il momento di preparare le comunicazioni. Creare una newsletter efficace, bella, responsive e correttamente visibile in tutti i maggiori client di posta e device è un compito estremamente demandante. Abbiamo selezionato per voi una serie di strumenti che possono esservi d'aiuto in questa fase.

Editor Online

Al giorno d'oggi la maggior parte dei servizi ESP mette a disposizione moderni editor per email responsive, grazie ai quali è possibile creare in breve tempo il proprio template per le comunicazioni. È altrettanto vero che non tutti gli editor sono uguali e non tutte le soluzioni hanno un editor incluso: è il caso, ad esempio, dei servizi di SMTP relay, oppure di servizi self hosted. In questi casi un editor di email online può essere vitale, per evitare forti mal di testa.

Mosaico

Mosaico, sviluppato da VOXmail, è il primo Editor Email rilasciato in licenza GPL, per cui open source. È un editor moderno, che permette di realizzare email responsive utilizzando blocchi di contenuto, configurabili nell'aspetto e nei colori. Semplicità d'uso e solidità sono le sue caratteristiche principali. È possibile testarlo online senza effettuare registrazione; il sistema vi consentirà di caricare le vostre immagini, creare la vostra newsletter e anche testarla. Potrete poi scaricare l'html per usarlo per gli invii effettivi.

L'uso esteso di web font nelle pagine web è oramai assodato: dopo i primi timidi approcci della fine degli anni '90 (una volta tanto il primo a supportare la direttiva @font-face è stato il vituperato Internet Explorer), dal 2008, e soprattutto con l'avvento della libreria gratuita di Google Font nel 2010, il web ha cambiato faccia, lasciando campo libero alla web-typography, come vero fondamento del web-design.

Chiaramente il passaggio dal web all'email non è stato automatico, e non è ancora lontano dal potersi considerare completato. Vediamo quali sono le opportunità che un email designer ha a disposizione quando si tratta di scegliere font per titoli e testi di una missiva.

Uso di caratteri web safe

I caratteri web-safe sono una serie di font presenti in tutti i computer e quindi visualizzati sicuramente con effetto simile, se non identico.

I font sono: Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Times New Roman, Trebuchet MS, Verdana.

Nel 2012 Microsoft ha abbandonato i brand Hotmail e Live, lanciando la nuova piattaforma email Outlook.com.

Questa riunificazione, che ha portato il brand delle email desktop Microsoft su web, era mirata a intaccare il crescente predominio di Gmail nel settore delle webmail.
Per riuscirci Microsoft ha rivisto nel profondo l'interfaccia delle vecchie webmail, rinnovandola e adeguandola al nuovo stile Metro di Windows 8, che proprio in quegli anni stava lanciando.

Nel farlo ha però calcato la mano in maniera significativa: il preprocessing css era piuttosto "violento", fino a rendere il rendering delle email html impreciso e in larga parte imprevedibile.

I professionisti dell'email design si sono da subito scervellati per trovare trucchi adatti a compensare questo tipo di limitazioni: di base infatti Outlook.com settava un line-height maggiorato a tutte le email, nel tentativo di uniformare lo stile del contenuto dell'email a quello dell'interfaccia, oppure imponeva di base una colorazione ai vari H1, H2 etc, o ancora non accettava margin (a meno che non li si indicasse con la M maiuscola), oltre a imporre un doctype che in determinate condizioni introduceva spaziature non volute sotto le immagini.

Il trend d'uso degli smartphone è in continua ascesa: l'ultimo report di Litmus, recentissimo, segnala che attualmente le aperture di email da dispositivo mobile sono il 56% del totale.
È un dato sul quale soffermarsi: più della metà delle email vengono lette da telefonino.

Sappiamo che l'esperienza utente su un dispositivo mobile è completamente diversa da quella che si ha su un desktop, sia in termini prettamente tecnici - grandezza dello schermo, dispositivi di puntamento -, sia in termini di momenti di fruizione e capacità di conversione.

Negli anni scorsi c'è stata una rincorsa, più che giustificata, alla trasformazione dei siti, in maniera che diventassero "responsive", quindi in grado di adattarsi alle nuove modalità di fruizione tramite telefono e tablet: ad oggi spesso si parte considerando come primo mezzo di navigazione lo smartphone (mobile first).

Qualche tempo fa abbiamo partecipato al CSSday 2015, primo convegno interamente dedicato al mondo dei CSS, organizzato dal GRUSP (PhpDay, JsDay...), con un intervento su Email design e Css.

L'idea era quella di fare un punto sull'attuale stato dell'arte, sulle differenze fra il mondo del design web e quello del design email, tentando di tracciare una rotta per il prossimo futuro.

Altra parte fondamentale del talk è stata quella relativa ai dati di utilizzo delle varie webmail italiane, che hanno evidenziato quanto sia variegato e difficile da domare il mondo della compatibilità verso client e webclient email.

Qui trovate il video integrale dell'intervento:

Tagliaerbe spiega in un recente post che cosa s'intende per Above the fold e l'importanza di tenere presente cosa verrà visto "al primo impatto" e ciò che invece richiederà un intervento (un click, l'uso della rotellina, un trascinamento) da parte dell'utente per essere portato in luce.

Il post è prevalentemente orientato alla fruizione di pagine via web, con un piccolo accenno alle email:

La logica di posizionare “tutto in alto” è importantissima non solo per siti e blog, ma anche per l’email marketing.