Chi realizza campagne di Direct Marketing via email deve applicare una quantità di criteri per garantire che la DEM (Direct Email Marketing), una volta consegnata nella casella di posta venga visualizzata correttamente dal laptop, dallo smartphone, dal tablet o da qualsiasi altro dispositivo.

In generale i Web Developer, nella realizzazione delle loro pagine, devono fare i conti su come i differenti browser interpretano il loro codice css/html e arrendersi all’indispensabile e onerosa attività di verifica cercando tutte le combinazioni di browser/sistemi operativi e versioni.

Anche per la realizzazione di una DEM HTML vale lo stesso principio, ma bisogna aggiungere al calcolo combinatorio anche le varie versioni dei client di posta.
Le verifiche quindi si moltiplicano ma tramite alcuni accorgimenti si possono ottenere buoni risultati anche con un numero limitato di controlli.

Va da sé che la DEM non è una pagina WEB, non si possono usare Javascript, Flash, Video e Form e inoltre alcuni client di posta hanno limitazioni nell’utilizzo di proprietà del css e dell’HTML.
Ecco alcuni semplici consigli per ottimizzare il codice CSS/HTML delle nostre email:

• Evitare di gestire il layout grafico della pagina tramite  ma utilizzare strutture tabellari con
  . Alcuni client di posta infatti non supportano l’allineamento (float) degli elementi, inoltre i dispositivi possono avere le più svariate risoluzioni dello schermo rendendo il risultato finale piuttosto difficile da prevedere
• Per le strutture più complicate utilizzare tabelle nidificate, cercando anche di limitare l’uso degli attributi colspan e rowspan o almeno utilizzarne uno solo per aumentare la leggibilità nel caso di modifica
• Evitare i tag HTML per simulare il comportamento del paragrafo: meglio utilizzare il line-break
  
• Usare solo il css in linea tramite l’attributo HTML style. Il css inserito nell’head, come solitamente viene fatto nelle pagine web, in alcuni casi viene del tutto ignorato dai client di posta
• Un’altra caratteristica di alcuni client di posta è che non vengono visualizzate correttamente le immagini di sfondo (background-image). Se dobbiamo scrivere dei testi sopra una immagine dobbiamo fare in modo che il testo compaia su una parte dell’immagine che abbia uno sfondo uniforme. Utilizzando il background-color si cercherà quindi di collegare il blocco testo-immagine

La regola generale è quella di tenere il codice più semplice possibile, usando i tag HTML  “primitivi”  e utilizzare le tabelle come struttura di base ripetendo  il codice css su ogni elemento dove deve essere impiegato.

Questi sono solo alcuni consigli iniziali, spesso però bastano a garantire una buona leggibilità delle DEM sui diversi dispositivi. Provateli e fateci sapere che cosa ne pensate.