La piattaforma Contactlab Marketing Cloud offre tutti gli strumenti per gestire piani di comunicazione email automatizzati, in grado di raggiungere i contatti corretti, nel momento più opportuno e con messaggi personalizzati e ritagliati sui bisogni e sui reali desideri di ognuno dei vostri clienti.
E’ sufficiente tutto questo per avere successo e creare esperienze indimenticabili od occorre qualcosa d’altro?
A questo proposito, abbiamo previsto la pubblicazione di due articoli che riteniamo di utile lettura per iniziare a rispondere a domande di questo tipo. Abbiamo già condiviso con voi alcuni importanti suggerimenti da seguire per ottenere HTML visualizzabili correttamente, ora proponiamo alcuni consigli da valutare, per creare email non solo visualizzabili correttamente ma anche fruibili velocemente da ogni dispositivo, anche mobile.
CONSIGLI per una email di successo
- Immagini incorporate
- Come creare un’email responsive
- Non dimenticarti l’ottimizzazione mobile
- Limiti invalicabili
- Testare le email prima dell’invio
1. Immagini incorporate
Normalmente una email in HTML prevede che le immagini contenute nel messaggio siano messe su un server esterno e poi caricate quando l’utente legge la comunicazione. In alternativa a questo procedimento standard, è possibile incorporare (da qui immagini embedded) le immagini nel messaggio: non sono più caricate da un server esterno ma sono già incluse all’interno dell’email.
Pro e Contro
Il principale motivo per cui si può scegliere di avere immagini embedded nell’email è evitare il blocco delle immagini, che la maggior parte dei client di posta e delle caselle webmail attuano. In questo modo il messaggio è subito visualizzato correttamente da chiunque, con tutte le immagini al proprio posto. Dall’altro lato però, le immagini embedded aumentano di parecchio il rischio che il messaggio sia considerato come spam perché aumenta il peso della email. Il peso delle immagini si somma infatti a quello dell’html.
Nota: l’immagine spia usata per tracciare le aperture delle email non può essere incorporata perché è inserita in automatico dal sistema.
Come procedere su Send
- La base di partenza è un HTML standard in cui le immagini sono caricate su un server esterno del tipo: <img src=”http://server.it/img/foto.jpg”>
- A questo punto modificare manualmente i tag inserendo prima dell’indirizzo (URL) dell’immagine @( e subito dopo l’URL )@
- Una volta modificati tutti i tag del testo come indicato nel punto 2 qui sopra, salvare l’HTML modificato sul pc
- Accedere quindi alla piattaforma e andare su Send nella sezione Crea > Nuova spedizione > (nome gruppo) > Contenuto del messaggio
- Arrivati alla schermata del contenuto del messaggio, caricare il file con l’HTML modificato utilizzando il pulsante “Carica da: un file sul mio computer” o incollare direttamente il codice nella Text-Area
- Ora l’HTML modificato è stato caricato all’interno di Send. Terminare la creazione della spedizione normalmente, procedendo col pulsante avanti. Le immagini saranno incluse all’interno del <body> del messaggio.
- Effettuare un test per verificare che le immagini embedded si visualizzino correttamente.
Nota: se non si modificano i percorsi nei tag <img> con la sintassi @(http://…)@ non sarà generato alcun errore; semplicemente quelle immagini saranno ancora caricate dal server su cui si trovano, al momento dell’apertura dell’email, e quindi potranno essere bloccate da eventuali dispositivi di blocco-immagini del client o della casella webmail.
2. Come creare un’email responsive
Esistono diverse tecniche per sviluppare una email responsive:
- con layout fluido, dichiarando i valori delle tabelle in percentuale o utilizzando max-width e min-width
- con layout adaptive, sviluppando un html ad-hoc in modo che la struttura si adatti al viewport (es. con l’incolonnamento stacking dei vari box)
- con la dichiarazione CSS: media query che permette di variare stili e dimensioni in base alla dimensione del display sul quale viene visualizzata la newsletter.
Tutte le tecniche hanno dei limiti di supporto imposti dai diversi client/app/device e vanno valutati in base al layout. Di seguito, qualche indicazione di base.
- Nell’head aggiungere il seguente codice:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1, minimum-
scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta name=”x-apple-disable-message-reformatting”>
- Dichiarare nello stile i media query, in questo modo:
@media screen and (max-device-width: 568px), screen and (max-width: 568px) { CSS* }
- Dove 568px è la larghezza massima del viewport sul quale saranno applicati gli stili *CSS dichiarare le classi utilizzate nell’html utilizzate per la visualizzazione mobile
Es: Per non visualizzare un contenuto su mobile utilizzare la seguente classe:
.onlydesktop {display:none !important; width:0 !important;}
- Utilizzare commenti condizionali (if mso) per assicurarsi una corretta visualizzazione su Outlook
Es: <!–[if mso]></td><td style=”padding-top:0;padding-bottom:0;padding-right:0;padding- left:0;vertical-align:top;” ><![endif]–>
Inserire in ogni td style=”padding: 0px; vertical-align:top;”per prevenire spaziature aggiuntive.
3. Non dimenticarti l’ottimizzazione mobile
Il mobile rappresenta oggi uno dei canali maggiormente usati per la comunicazione, e non solo per quanto riguarda SMS e Instant Messaging, ma anche per la ricezione delle email. Assicurarsi sempre che le proprie comunicazioni vengano ricevute in modo corretto, rispettando il design stabilito in fase di progettazione e con un elevato livello qualitativo è quindi oggi fondamentale.
Per sviluppare un layout fruibile su dispositivi mobile occorre ripensare la struttura in ottica “mobile first” e seguire alcuni semplice suggerimenti:
-
- Testi superiori ai 14px
- Bottoni grandi almeno 40px per dispositivi touch
- Spazio tra i vari elementi cliccabili di almeno 10/15px
- Immagini di dimensioni doppie e medesime proporzioni per una resa corretta su display retina/hd
- Elementi fissi non superiori ai 320px
- Eliminare contenuti di bassa priorità, pesanti e inutili
- Dare un buon contrasto agli elementi
4. Limiti invalicabili
Quanto sopra indicato permette una corretta visualizzazione nella maggioranza delle webmail e dei programmi di posta attualmente in uso. Ovviamente, ci sono dei limiti imposti dalle politiche dei singoli provider o produttori di software, che non si possono risolvere. Problemi di visualizzazione si segnalano spesso anche con il programma di posta della suite Lotus.
5. Testare le email prima dell’invio
Il modo migliore per controllare la corretta visualizzazione di un’email e il funzionamento dei suoi elementi è comunque quello di inviare un test prima della spedizione effettiva.
Send dà la possibilità di creare un filtro di test per ogni database (cfr. “Configura –> DB utenti”) e di inviare una spedizione di test (cfr. “Crea –> Spedizione Email”). Si consiglia di inserire nel test diversi indirizzi, in modo da poterli controllare con diversi programmi di posta e con diverse webmail.
Quindi, come abbiamo visto tanti e diversi sono gli accorgimenti che si possono o meglip, devono mettere in atto per creare email di successo in grado di essere visualizzate correttamente e scatenare interesse nei tuoi contatti.
Seguendo questi consigli potresti essere in grado di realizzare email di qualità superiore, che si visualizzano in modo chiaro e completo su ogni tipo di browser e per questo motivo di facile lettura.
In caso di dubbi e domande non esitare a contattare il nostro Servizio Clienti, sempre a tua disposizione.