Realizzare un template con un HTML a prova di Outlook

Hai creato la tua newsletter ed è perfetta. Tutti i link funzionano e hai superato il controllo anti-spam. Fai un invio di test e…sorpresa! Su Outlook è un casino! I testi sono fuori posto, alcune immagini non si vedono. Perché?

Ogni provider interpreta diversamente il codice HTML delle mail, Outlook in particolare ha difficoltà ad interpretare alcuni tag, come quello delle immagini di background che non vengono visualizzate.

Le newsletter realizzate con il nostro editor K-Bricks riescono a superare nella maggior parte dei casi i limiti principali di Outlook, ma in ogni caso chi scrive il codice deve stare attento ad evitare gli errori più comuni.

Ecco perché abbiamo pensato di darti alcuni consigli per realizzare un HTML a prova di Outlook!

Il CSS
  • Gli stili presenti all’interno del tag <head> vengono ignorati, quindi ti consigliamo di tenere sempre lo stile in-line.
  • Il <padding-top> viene applicato a tutte le colonne <td> dell’HTML, l’unico modo per ovviare al problema è specificare lo spazio tra gli elementi e il margine superiore delle celle con la forma contratta (margin: 20px 0 0 0), perché la forma estesa (margin-top: 20px) crea problemi con Hotmail.
  • Outlook, quando si aggiunge un ‘a capo’ all’interno delle tabelle, inserisce in modo automatico dello spazio per separare gli elementi: consigliamo sempre di fare un test della newsletter sul client Outlook prima di procedere con l’invio alle liste.
  • L’interlinea da problemi quando si imposta a numeri come 1.3. Inoltre, se imposti un numero inferiore a uno, Outlook taglia a suo piacimento la tipografia, creando linee di testo incomprensibili.

Le immagini

  • Le immagini animate sono bloccate al primo frame, quindi valuta se inserirle nella tua newsletter.
  • Outlook blocca nella maggior parte dei casi le immagini di background. Per evitare questo problema applica una tonalità monocromatica al background. Nelle immagini sottostanti potete vedere la stessa e-mail visualizzata su Gmail e su Outlook
  • Nelle tabelle, per immagini inferiori ai 12 pixel, bisogna sempre specificare l’attributo <height>, altrimenti non verranno visualizzate.
  • Alcune versioni non supportano immagini con spazi nel nome del file, quindi utilizza il simbolo “underscore” in sostituzione allo spazio, ad esempio “immagine_senza_spazi.png”.

 

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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