8 Consigli per realizzare correttamente newsletter in HTML

Best Practise per scrivere Newsletter
Tempo stimato di lettura: 3 minuti, 9 secondi
Pubblicato il 5 ottobre 2012

Di questi tempi parlare di tabellehtml insieme potrebbe risultare un oltraggio alle leggi cosmiche che regolano il web.

HTML5, CSS3, effetti 3D e transizioni di ogni genere sono ormai all’ordine del giorno e, seppur questo stia a mio avviso portando all’omicidio degli standard web, non è difficile pensare che presto saranno entrati nelle abitudini di webdesigner e front-end developer di tutto il mondo.

Per qualcuno ancora alle prime armi, però, potrebbe suonar strano sapere che occorrerà per un attimo accantonare anni ed anni di progressi fatti per poter procedere nella realizzazione di una DEM affinchè essa risulti visibile correttamente da tutti i software (online o offline) di gestione della posta elettronica.

#1 Email semplici e leggere

Un’email HTML non è un sito web. E’ bene partire sempre da questo semplice presupposto. Tentare di inserire infatti troppi elementi e diversificati, soprattutto in termini di regole CSS, rischia di far visualizzare infatti risultati molto differenti  nei vari client-mail. Quindi meglio prevenire e procedere con template semplici e veloci da caricare.

#2 Non fare abuso di immagini

Un’immagine vale più di mille parole, ma può anche richiedere molto tempo per essere caricata, soprattutto di questi tempi in cui, sempre più facilmente, la posta si visualizza da dispositivi mobili. Questo rischia di far sì che l’utente cestini immediatamente la mail. Inoltre, utilizzare solo immagini, aumenta il rischio che venga considerata spazzatura dai filtri spam. Meglio prevenire…

#3 Lavora con le tabelle

La maggior parte dei client di posta gestiscono i CSS peggio di Internet Explorer 6, quindi vietato utilizzare qualsiasi regola moderna. Occorre fare un salto nel passato decennale ed utilizzare le tabelle. Tra l’altro, è sempre possibile utilizzare software come Dreamweaver (che fa la conversione automatica da div assoluti a celle) o Fireworks (che permette di esportare le “slice” come tabelle) per velocizzare il processo.

#4 Utilizza immagini caricate sul tuo server

Non linkare immagini prese da molte fonti. Rischi infatti di allungare i tempi di caricamento all’inverosimile. Usa invece percorsi assoluti ed immagini, ben organizzate in cartelle, prese dal tuo server:

#5 Scrivi il CSS inline e usa gli attributi html

Dal momento che il supporto per i CSS è molto scarso nei client di posta elettronica, sarà fondamentale non linkare CSS esterni. Utilizza invece dichiarazioni inline, specifiche  per l’elemento del DOM che stai considerando.

E’ anche possibile utilizzare le vecchie regole di progettazione arrivando ad utilizzare attributi come bgcolor, font, color, direttamente nei tag html. Un orrore? Sì, eppure molto efficace per una newsletter “compatible” al 100%.

#6 Verifica che l’email si veda correttamente nei vari client

Come in fase di realizzazione di un sito web fai un controllo multi-browser, altrettanto occorre fare con i client di posta. Indicativamente non dovrebbe mai mancare il supporto per Gmail, Yahoo mail, Mozilla Thunderbird, Apple Mail e Outlook. Di seguito un link da consultare per vedere quali proprietà sono supportate dai vari client di posta: http://www.campaignmonitor.com/css/

#7 Utilizza Google Analytics per tracciare le conversioni

Inviare una newsletter, magari pubblicitaria, senza assicurarsi di quanti click riceva, potrebbe essere uno spreco di energie. Se non abbiamo grandi esigenze, possiamo tranquillamente utilizzare google analytics aggiungendo all’url dei parametri che ci permetteranno di rilevare le provenienze ad una pagina e  le azioni effettuate. Google offre un semplice strumento per generare questi url: http://support.google.com/analytics/bin/answer.py?hl=en&answer=1033867.

#8 Suddividi la complessità

Invece di strutturare tabelle con colonne a misura dichiarata e rowspan o colspan precisi è preferibile annidare ulterori tabelle. E aggiungo: se devi distanziare contenuti non fare colonne vuote con width ma inserisci un gif trasparente della distanza che vuoi creare. Queste nefandezze rendono la strutttura piú solida sui browser di posta e sulle webmail. (ndDZ)

E tu quali accorgimenti utilizzi?

Ispirato a: http://www.catswhocode.com/blog/best-practices-for-coding-html-emails

 

  • ottimo articolo, io che faccio spesso newsletter, trovo questo articolo molto interessante e ben fatto 😀 non per niente l’ha fatto @Davide 😀

    • Davide De Maestri

      Ahahahaha, grazie Davide, ho cercato di aggiungere qualcosa che ho dovuto per parecchio tempo fare in ufficio. Al momento sono ricordi, ma è bene sempre tenersi “pronti” per l’evenienza. PS: @gleenk ! 😛

  • Un altro utile scempio: suddividi la complessitá: invece di strutturare tabelle con colonne a misura dichiarata e rowspan o colspan precisi è preferibile annidare ulterori tabelle. E aggiungo: se devi distanziare contenuti non fare colonne vuote con width ma inserisci un obbrobrioso gif trasparente della distanza che vuoi creare. Queste nefandezze rendono la strutttura piú solida sui browser di posta e sulle webmail.

    • Davide De Maestri

      Ottima integrazione dz 😉 integro

  • cinzia

    Davide, che dire? Diretto ed efficace.. mi chiedo solo dove trovi il tempo di fare tutto!! O_o

    • Davide De Maestri

      Ehehehe

  • Davemax

    Articolo molto interessante. Grazie.

    • Davide De Maestri

      Grazie Dave 😉

  • gio

    Domanda da profana che ha appena iniziato: C’è qualche software che può aiutare nella progettazione, soprattutto dal punto di vista estetico? un Dreamweaver ad esempio, anche se sarebbe bello riuscire con photoshop o indesign! 🙂

Shares