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”.

 

Realizzare un template con codice HTML

Ecco di seguito la sezione per realizzare un template con codice html e la sezione Kloudytemplate.

– Utilizza il codice HTML per creare una comunicazione in completa libertà

Se hai già pronto il codice html della tua newsletter, copialo e incollalo nella relativa sezione. In questo modo non avrai alcun vincolo grafico da rispettare. Potrai poi modificare i contenuti utilizzando l’editor visuale. Puoi passare dalla modalità di modifica “EDITOR” alla modalità di modifica “HTML” semplicemente cliccando sulle apposite TAB.

Template con codice HTML

 

Ecco alcuni consigli pratici per realizzare un HTML:

<table>

Innanzitutto ricorda sempre che il codice HTML deve essere il più semplice possibile. È fondamentale costruire il layout della newsletter, unicamente utilizzando le “antiquate” tabelle. Questo perchè molti client di posta non sono in grado di leggere i tag <div> e le relative caratteristiche. Ti consigliamo di assegnare alla tua newsletter una larghezza di 600 pixel, in tale modo avrai la certezza che il contenuto venga visualizzato correttamente anche sui dispositivi mobile.

<td>

Per impostare correttamente la larghezza della tabella che contiene la newsletter, ti consigliamo di assegnare ad ogni <td> la relativa larghezza in pixel. Evita quindi di combinare larghezza della tabella, del <td> e il padding del <td> altrimenti rischi che su ogni client di posta venga visualizzata una newsletter differente.

Ecco un esempio di un’applicazione corretta del tag:

<table>
    <tr>
        <td width="100">Hello!</td>
        <td width="500">I love Kloudymail!<td>
    </tr>
</table>

Strutture complesse?

Il metodo più affidabile  per realizzare l’HTML di una struttura complessa è utilizzare l’annidamento delle tabelle poichè tale metodo darà i migliori risultati sui principali client di posta.

CSS

Dimentica fogli di stile esterni o posizionati nel tag <head>! Purtroppo, se vuoi essere sicuro che tutti gli stili della tua newsletter vengano interpretati correttamente, devi scrivere tutti gli stili in linea e per ogni tag presente nel codice. Si… un lavoraccio! 🙁

Style “font”

Non utilizzare i CSS contratti per definire lo stile del font. Ogni proprietà del font deve essere dichiarata separatamente, come nel seguente esempio:

<p style="font-family: Arial, sans-seif; font-size: 11px; font-weight: bold; line-height: 1em; color: #FF0055;"> …

Style “color”

Anche i colori non possono essere contratti ma devono contenere sempre i caratteri esadecimali che li identificano (usare #FF0055 invece di #F05).

Links

Molti client di posta applicano un colore di default ai link testuali presenti nella newsletter. Tale colore di default potrebbe quindi disturbare l’armonia dello stile grafico. Per ovviare a questo problema ti consigliamo di applicare gli stili in linea sia al tag <a> che al tag <span> appositamente posto all’interno del tag <a>, come nel seguente esempio:

<a href="http://www.kloudymail.com" style="color: #88ff55;">
  <span style="color: #88ff55;">
    Visita il sito di Kloudymail!
  </span>
</a>

Inoltre, per evitare di andare in SPAM, controlla che:
1) i link inseriti siano validi;
2) non usare il nome del dominio nel testo del link poiché questo potrebbe essere incoerente con il dominio effettivo di invio e destare sospetti da parte del client di posta.

Immagini

Non dimenticare mai che le immagini non vengono sempre visualizzate da tutti gli iscritti alla tua newsletter. Quindi assicurati che i contenuti importanti non vengano mostrati unicamente all’interno di un’immagine. Per questo motivo cerca di sostituire il significato dell’immagine attraverso l’inserimento della relativa descrizione utilizzando i tag “alt” e “title”: il tag alt conterrà una breve descrizione, mentre il title potrà contenere una descrizione più esaustiva.
Ti consigliamo di assegnare sempre una dimensione all’immagine utilizzando l’attributo “width” altrimenti alcuni client di posta potrebbero “inventare” delle dimensioni sbagliate. Inoltre assicurati sempre che le immagini abbiano la corretta dimensione. Per esempio, non inserire all’interno della newsletter un’immagine con una larghezza reale di 2500 pixel per poi ridimensionarla a 600px attraverso l’attributo “width”.

Ti segnaliamo che Outlook assegna alcuni pixel di padding alle immagini. Per ovviare a questo problema è necessario definire lo stile “display: block;”.

Esempio:

 <img src="kloudymail.jpg" width="150" alt="Kloudymail" title="Kloudymail, limitless like sky" style="display: block;">

Usa immagini in formato JPG e GIF. Le immagini in format PNG non vengono visualizzate su tutti i client di posta. Inoltre non inserire mai gli spazi nel nome dell’immagine poiché potrebbero creare dei problemi di visualizzazione.

Video

Per il momento l’unico modo per “animare” la tua newsletter è inserire all’interno di essa una GIF animata, poiché è l’unico formato “video” supportato dai client di posta.

 

Come creare newsletter con la piattaforma Kloudymail

Ho le credenziali di accesso alla piattaforma Kloudymail, ho importato le liste dei miei clienti, ho scelto il contenuto della mia prima comunicazione… ma come faccio a creare la newsletter?

Hai ben tre possibilità tra le quali scegliere per procedere, le trovi tutte nella sezione template:

  1. K-Bricks: accedendo a questa sezione entri nell’editor di creazione di Kloudymail. Funziona con la modalità drag&drop: ti basta trascinare gli elementi nel posto desiderato e il gioco è fatto. Leggi qui per sapere come crearli. (per accedere alla sezione dedicata clicca qui)
  2. Template vuoto: se hai già realizzato il codice HTML qui puoi inserirlo e trovare pronta la tua newsletter (per accedere alla sezione dedicata clicca qui)
  3. Kloudy template: Kloudymail ha realizzato più di 50 template già pronti. Puoi utilizzarli a tuo piacimento, devi solo scrivere i testi e cambiare le immagini e sei pronto per l’invio (per accedere alla sezione dedicata clicca qui)
  4. I tuoi template: qui, invece, trovi tutti i template che hai utilizzato e salvato nelle precedenti campagne di email marketing. In questo modo puoi riutilizzare la stessa grafica per le tue newsletter semplicemente cambiando i contenuti

Vuoi una comunicazione perfetta e sempre originale? Rivolgiti a noi, il nostro reparto di comunicazione è quello che fa per te! Scopri Hook, clicca qui!

 

sezione template

 

– Personalizza i Kloudy template già pronti per te

Inizia la creazione della tua newsletter partendo da uno dei nostri modelli predefiniti. Per aiutarti nella scelta li abbiamo classificati suddividendoli per categoria, colore e struttura. Potrai poi personalizzarli a seconda di cosa vuoi comunicare.

Una volta preparata la tua newsletter non dovrai far altro che inviarla alla lista desiderata. Senza dimenticare nei giorni successivi di monitorare i risultati!

sezione template

 

 

Creare una newsletter con l’editor K-Bricks

Per utilizzare l’editor K-bricks non è richiesta alcuna competenza tecnica… solo un po’ di pratica e tanta creatività! Per facilitarti ulteriormente nel processo di progettazione della tua newsletter abbiamo pensato di farti iniziare scegliendo il layout dal quale partire: standard, una colonna, due colonne, tre colonne, etc.

Non ti preoccupare, il layout non è fisso: potrai cambiare il numero delle colonne e delle righe e aggiungere contenuti a piacimento. Dai sfogo alla tua creatività!

creare newsletter

 

Grazie alla funzione drag & drop potrai poi personalizzare la tua newsletter trascinando i blocchi nella posizione desiderata e andando poi a lavorare su ciascun blocco. Personalizza il layout aggiungendo colori e immagini e libera la creatività! Ecco un video esemplificativo che spiega come fare:

Vuoi una comunicazione perfetta e sempre originale ma non sai come farla? Rivolgiti a noi, il nostro reparto di comunicazione è quello che fa per te! Scopri Hook, clicca qui!