Newsletter, Outlook e Tabelle

Scritto da fedeweb il 20 maggio 2013 con 3 Commenti | Pubblicato in 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

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

3 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

  3. vintage cigarette case Newsletter, Outlook e Tabelle | Fedeweb

Lascia un commento