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.

 

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 *