Milioni di persone leggono le mail con i loro dispositivi mobili, Iphone, Android, tablet etc. Una campagna via mail non può più ignorare questo fattore e deve essere visibile su tutti i dispositivi.
Come risolvere questo problema?
Ecco un esempio che utilizza Joomla, Foundation Framework ed il componente più utilizzato per l'invio di newsletter, Acymailing.
La procedura è stata testata solo su Joomla 2.5, quindi non saprei dire se funziona anche su Joomla 3.x.
Come condizione necessaria dovremo aver installato sul nostro sito Joomla il componente Acymailing (va benissimo la versione gratuita).
Dopodichè utilizzeremo i template responsive per newsletter creati da Zurb, gli ideatori di Foundation Framework, uno dei migliori framework responsive in circolazione. Andiamo quindi su questa pagina http://www.zurb.com/playground/responsive-email-templates e scarichiamo uno dei template disponibili.
Per la nostra prova abbiamo scaricato il template Newsletter.
Una volta scaricato sul vostro pc, scompattate il file, dentro ci troverete:
- il file newsletter.html
- la cartella stylesheets con dentro il file email.css, cioè il foglio di stile del template.
PREMESSA
Chi ha già provato a creare ed inviare newletters, sia responsive che normali, sa quanto questa attività possa diventare un mezzo incubo, a causa dei diversi comportamenti dei client email in circolazione. Infatti, alcuni non accettano fogli di stile interni, altri non accettano quelli esterni, altri ancora non si sa bene come funzionino e la nostra newsletter rischia così di non essere leggibile. L'unica soluzione che sembra essere accettata da tutti (o quasi) è quella dei css inline.
I migliori applicativi per l'invio di newsletters sono stati quindi realizzati con questa caratteristica: noi gli diamo in pasto un file css esterno e loro inseriscono le classi nel file html come css inline. Acymailing non fa eccezione ed è dotato di questa utilissima caratteristica.
Fatta questa premessa, vediamo come procedere.
1) Per prima cosa, prepariamo il foglio di stile. Andate nella cartella stylesheets ed aprite il file email.css. Vedrete che ci sono dei commenti per ogni sezione, eliminateli tutti, ad Acymailing non piacciono.
2) Salvate il file senza commenti e poi copiatene tutto il contenuto;
3) ora andate nel vostro pannello di amministrazione di Joomla, componenti --> acymailing --> modelli e cliccate su Nuovo.
4) Nella pagina che si apre, in alto a destra trovate la sezione dei fogli di stile: selezionate la scheda foglio di stile (figura qui sotto) ed incollate il ccs senza commenti che avete precedentemente copiato.
Ora seguite questi passaggi:
5) aprite con il vostro editor preferito il file newsletter.html;
6) copiate tutto il codice presente ed incollatelo, mi raccomando, nella finestra html dell'editor (figura sotto). Qundi se usate Tinymce cliccate sul pulsante HTML e incollate il codice, se usate JCE cliccate su Toggle editor per avere la versione html ed incollate.
A questo punto, se passate alla visualizzazione wysiwyg nella finestra dell'editor, comparirà la newsletter formattata con i vari segnaposto per le immagini, i loghi e del testo di esempio, come nell'immagine qui sotto:
Bene, ora compilate anche il modulo delle informazioni che trovate in alto a sinistra nella finestra, cioè questo:
Salvate il tutto e avrete creato il vostro modello di newsletter responsive, con il quale realizzare le newsletters e personalizzarle a vostro piacimento.
Potete fare una prova di invio direttamente con il modello, oppure creare una nuova newsletter a partire proprio da questo modello, inserendo informazioni e immagini vere al posto del testo di prova e dei segnaposto.
Avvertenza importante
Dai nostri test abbiamo rilevato che in alcuni client email o applicativi webmail la newsletter non carica il foglio di stile. Per ovviare a questo inconveniente è necessario inserire nel codice html della newsletter il link al foglio di stile che avremo precedentemente caricato sul server in questa cartella:
media/com_acymailing/templates/css
il link da inserire nel codice della newsletter sarà quindi:
Fate però attenzione che passando dalla modalità html a quella wysiwyg, questo link viene cancellato dall'editor di Joomla. Quindi dovrete procedere così: passate alla modalità html, inserite il link, salvate e chiudete senza passare alla modalità wysiwyg.
Ora potete procedere all'invio.
