Esempio di ottimo layout per una email in html


La settimana scorsa un mio collega mi ha fatto vedere una e-mail promozionale inviatagli da register.it.

Entrambi siamo rimasti favorevolmente colpiti dalla struttura ottima del messaggio che veniva visualizzato in modo perfettamente leggibile anche con il blocco delle immagini attivato sulla casella di posta.

Di seguito potete vedere l’email con e senza il blocco dei contenuti esterni attivato (cliccando sulle immagini le potete ingrandire).

Come si vede, la scelta di disporre le immagini intorno al testo e mantenere lo stesso allineato a sinistra, rende il messaggio gradevole e facilmente leggibile anche senza scaricare le immagini.

Questo è un ottimo esempio di come dovrebbe essere realizzato un layout grafico per una e-mail in html.

Purtroppo invece, come gia visto in altri casi, lo studio dell’immagine della newsletter privilegia troppo spesso l’impatto grafico ed emotivo senza tenere in considerazione le problematiche connesse al blocco dei contenuti.

Problematiche che non vanno sottovalutate se teniamo in considerazione che il 40/50% di chi legge le e-mail non scarica le immagini.

Devo ringraziare il mio collega per la segnalazione e ricambio il favore facendo un po’ di promozione al suo sito dedicato alle vacanze in kenya, cosa che faccio volentieri perchè il sito è veramente carino, complimenti 🙂

, ,

9 risposte a “Esempio di ottimo layout per una email in html”

  1. Ciao Ale e grazie per i complimenti 😀

    Per quanto riguarda la newsletter… hai notato quanto testo è inserito nelle immagini?
    A mio avviso il template potrebbe essere ulteriormente sviluppato: un po’ di tabelle e css ed il testo potrebbe essere completamente svincolato dal blocco delle immagini di outlook.

    Forse però tutti i problemi di compatibilità tra i client di posta li hanno fatti desistere dal tentativo; o semplicemente non ne valeva la pena. Tu che dici? Accessibilità anche per le newsletter?

    PS
    A buon rendere 😛

  2. La tua è sicuramente una giusta osservazione, anche perchè le best practice indicano che il testo e i contenuti importanti non debbano mai essere messi nelle immagini.

    Al di la di questa considerazione, è importante sottolineare che non è facile lavorare con i css nelle e-mail perchè si aprono tantissimi problemi di compatibilità.

    Spesso si è costretti a scegliere delle vie di mezzo che privilegiano la velocità nella creazione del layout e penalizzano i test di compatibilità.

    Non c’è una scelta giusta o una sbagliata, bisogna sempre valutare le situazioni: se il layout cambia ad ogni newsletter non si può pensare di perdere costose ore di lavoro per essere ipercompatibili e si scelgono soluzioni “a metà”.

  3. Ciao Ale

    Sicuramente interessante il tuo ultimo post in merito alla composizione grafica dei messaggi commerciali e-mail, ma ritengo importante sottolineare di come in questa specifica occasione non si sia data sufficiente importanza al Brand. Mi spiego meglio. L’impostazione grafica di un messaggio e-mail deve essere sicuramente appropriata alla tipologia di comunicazione specifica, ma non deve mai essere distante da quello che si definisce “Corporate Identity”, ovvero lo stile stile grafico-comunicativo utilizzato deve rappresentare in maniera univoca l’azienda che lo propone e quindi trovare corrispondenza tra il messaggio e il brand aziendale.
    In questo caso il sito web di Register e la comunicazione e-mail non sono “coordinati”.

    Ciao e buon lavoro
    Nikvonnok

  4. L’aspetto del brand e dell’omogeneità con la grafica del sito web meriterebbe un post a parte.

    In ogni caso bisogna dire che se è vero che questo messaggio non riprende per nulla la grafica del sito, è anche vero che assomiglia molto alle creatività sviluppate per le campagne banner su portali generici e tematici.

    In qualche modo un minimo di iidentità aziendale è stata salvaguardata.. 😀

  5. Nonostante il post sia di oltre un anno fa, voglio lasciare lo stesso la mia opinione; chissà che non torni utile a qualcuno.

    L’e-mail non è male e sono d’accordo con quello che sottolinei a proposito delle immagini; io nelle mie realizzazioni ho qualche ulteriore accortezza:
    1) imposto le dimensioni delle immagini, in modo che lo spazio occupato sia sempre lo stesso indipendentemente dalla loro visualizzazione
    2) se l’immagine ha un colore predominante, faccio in modo che in sua assenza il colore sia presente ugualmente
    3) utilizzo il testo alternativo all’immagine e tramite il le proprietà del tag font faccio in modo che sia quanto più simile possibile all’immagine stessa
    4) non utlizzo xhtml, né css, né div; tutto il layout è tabellare ed in HTML 4 super-compatibile
    5) uso, per quanto possibile, le entità HTML

  6. Ottimo post. Io per evitare il problema solitamente, anzi, sempre, invio mail normali senza immagine. In questo caso bisogna spingere di + con il titolo e le prime righe di testo, sennò è facile perdere l’attenzione,ma almeno così hai una percentuale di lettura molto molto più alta. Secondo me la percentuale di persone che non aprono le immagini da te citata è sbagliata, secondo me sono molti di più quelli che solo per il fatto che non visualizzano l’immagine cancellano immediatamente la mail.
    Comunque concordo nell’asserire che come layout è davvero bello, da sottolineare anche i tre riquadrini sotto che a mio modo di vedere trasmettono sempre un messaggio di semplicità e chiarezza al lettore, come dire “Ecco i 3 semplici passi, nessuna difficoltà, è tutto spiegato bene”
    Voi che ne pensate?
    Emmanuele

    • Ciao Emmanuele e grazie per il commento.
      I dati relativi al download delle immagini e dei contenuti esterni in realtà sono in aumento. Considera che da quanto emesro nel E-mail Marketing Consumer Report pubblicato da ContactLab ad aprile 2009 la percentuale di utenti che dichiara di scaricare di default le immagni è del 45,8% mentre la percentuale di coloro che dichiarano di attivare volontariamente il download dopo aver aperto il messaggio è del 35,9%. In totale si arriva ad una percentuale prossima al 81%.
      Questi sono i dati più recenti che ho, ma se vuoi condividerne di più aggiornati siamo qui 🙂
      Alessandro

  7. Sicuramente non li metto in dubbio ma guardandomi attorno vedo molte più di 20 persone su 100 che cancellano le mail con immagini…poi probabilmente molto dipende anche dal target. E’ ovvio che persone + esperte di internet sanno distinguere cosa è e cosa non è pubblicità, e conseguentemente se ilmessaggio è scritto bene tenderanno ad aprire la mail, e viceversa. E così via con le altre categorie.
    Ad ogni modo preferisco lavorare di più sulla landing ed indurre al click con la mail.
    Si potrebbe parlare anche dei colori da scegliere che dici? 😉 Ci sono interi libri che parlano di questa sfaccettatura secondo me molto affascinante
    P.s.Mi scuso non pensavo non si potesse mettere un anchor text a scelta nel Name, me lo segno e nn lo inserisco più. Dico così perchè ho visto che lo hai cambiato, o sbaglio? Se puoi elimina il collegamento al sito e lascia Emmanuele come nome.

    • Più che dal target e dalle capacità informatiche secondo me dipende se chi riceve la mail conosce chi la manda. In questa ottica l’e-mail marketing utilizzato a regola d’arte offre ottimi risultati. Chiaro che se ricevo un messaggio non richiesto da chi non conosco, difficilmente scarico le immagini.
      Il discorso dei colori è sicuramente interessante, così come quello legato al persuasive copywriting o alla scelta delle immagini da utilizzare. Si potrebbe discutere di aspetti tecnici e psicologici per ore 🙂
      Per quanto riguarda la scelta del nome nel commento di solito non faccio il censore, salvo nei casi in cui si inseriscano palesemente parole chiave. Purtroppo sono anche un SEO, quindi cerco di evitare che il mio blog si trasformi in una link farm. E comunque tutti i link nei commenti sono nofollow, quindi sarebbe inutile farlo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *