Fw

Wordpress Creative Developer

Newsletter, Outlook e Tabelle

  • Html Css
  • -

Nel nostro lavoro può capitare di sviluppare qualsiasi cosa: siti, tab di facebook, landing page e newsletter.

Di recente ho sviluppato le prime newsletter e quando le ho aperte con Outlook è stato peggio di quando testo i siti su Internet Explorer.

Newsletter, Tabelle e Outlook

Provo a spiegarti in questo articolo cosa non si deve fare e cosa invece si deve fare per avere una massima compatibilità, con una particolare nota sugli sfondi sfumati.

Cosa non si deve fare

Mi danno la grafica della newsletter da sviluppatore e da bravo sviluppatore inizio a fare i div a creare gli stili css, ignaro di quello che sarebbe successo dopo.

Tutto fiero del lavoro fatto inizio a fare un po’ di testing:

  • la apro con Mail: perfetto;
  • la apro con Gmail: perfetto;
  • con libero: ottimo;
  • Outlook: …..

Prima di fare qualsiasi azione distruttiva (il gatto passa ignaro proprio in quel momento) mi documento un po’ sul web e scopro che:

  1. non si devono assolutamente utilizzare div, css, float e tutte quelle cose belle a cui siamo abitutati;
  2. devo usare le tabelle, si le tanto odiate tabelle.

Allibito guardo tutto il mio bel codice: seleziona tutto – CANC – lacrime.

Cosa si deve fare

Bisogna usare le tabelle. Non c’è alternativa se su vuole avere la massima compatibilità con tutti i client di posta elettronica.

Dato che in rete c’è già molto materiale a riguardo, ti invito a leggere questo articolo esaustivo di Rob Cubbon.

Però da nessuna parte non ho trovato un modo per risolvere il problema degli sfondi sfumati.

Sfondi sfumati

In questo caso c’è un accorgimento in più da adottare: infatti mettendo insieme le varie righe della tabella in modo da comporre lo sfondo, Outlook aggiunge uno spazio di un pixel tra una riga e l’altra.

Dopo aver perso quasi una giornata a capire come risolvere, ho assegnato la proprietà line-height con valore -1px a tutti i tag <td>

<td width="600" height="34" style="line-height:-1px;">
<img border="0" src="nl_01.jpg" alt="" style="display:block;border:0;"/>
</td>

In questo modo viene eliminato lo spazio di 1px tra le varie righe della tabella.

Come testare le newsletter

Ho utilizzato il servizio Mail Chimp, che consente di inviare delle newsletter di test, copiando e incollando direttamente il codice nell’editor.

Poi chiaramente bisogna avere i vari client di posta per poter testare il tutto.

Conclusioni

Con Internet Explorer pensavo di avere visto già tutto, ma Outlook si è rilevato un avversario ostico, che con gli accorgimenti visti sopra si riesce a domare senza grossi problemi. Utilizzando le tanto odiate tabelle.

Foto credits

Newsletter written on an old typewriter - Copyright: Beat Bieler

2 commenti

  1. css lo puoi usare ma non su un foglio di stile .css, apri nella head un il tag style e carichi tutto all’interno del tag e tutto funziona.

    Ciao

  2. Ciao Federico, ottimo articolo ;)
    ti segnalo quest’altro che è allo stesso modo molto interessante:
    http://www.laboratoriocss.it/email-e-css-approfondimento.html

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *