Martino Scanferlato Web designer logo mobile

WEB...ZONE

Blog di notizie dal mondo di Internet

15

08/2016

Email o una newsletter in HTML: MJML.io!!!

Categorie: html, seo

Email o una newsletter in HTML: MJML.io!!!

Sará capitato anche a Voi di dover scrivere una newsletter.
Certo, esistono molti ottimi servizi che facilitano le cose (Mailchimp ad esempio é uno di questi), ma vuoi mettere fare tutto da solo…

Dov'é il problema Martino, direte Voi, basta usare HTML E CSS... Sicuri?
I passi avanti fatti dalla programmazione web non sono minimamente stati recepiti dai gestori delle mail che sono ancora all’etá della pietra: per avere qualche probabilità di veder pubblicato correttamente il proprio lavoro bisogna incasellare tutto con tabelle annidate fra loro!!!

In piú bisogna considerare che ogni server mail ha una sua programmazione; c’è quello che riconosce il CSS (ma solo se é in linea), quello che non vuol mostrare le immagini, quello che compone arbitrariamente il messaggio affidatogli…
Una situazione da incubo!!!

Ma c’é una soluzione:MJML.
Si tratta di un framework che permette, con poca fatica, di costruire email responsive visualizzabili praticamente su qualsiasi dispositivo.
Il binario é disponibile solo per mac e linux, ma se, come nel mio caso, lavorate con Windows potete tranquillamente sfruttare il compilatore on-line.

Per creare la struttura basta conoscere i tag HTML. Attenzione, al posto di <html> e relativa chiusura andranno usati <mjml> e </mjml>; a quasi tutti gli altri tag basterá anteporre “mj-“; ecco che <body> diventa <mj-body>, <section> diventa <mj-section>, <image> diventa <mj-image>. A questi si affiancano dei tag specifici di MJML: <mj-column>, <mj-text>, <mj-button> e altri.

La struttura di base prevede che ogni sezione della mail sia contenuta in una <mj-section> suddivisa in tante <mj-column> quante sono le colonne del ns. progetto (di default é una).
All’interno della colonna possiamo aggiungere immagini -<mj-image> -, testo - <mj-text> -, bottoni di call - <mj-button> - e quant’altro vogliamo.
La documentazione ampia e chiara ma esclusivamente in inglese ci aiuta moltissimo nel farci trovare i tag che ci servono.

Per formattare il tutto utilizzeremo i comandi CSS all’interno dei relativi tag. Non sono supportati tutti i comandi CSS, ma anche qui la documentazione ci viene in aiuto.
Se, per esempio, vogliamo una immagine 100x100 dovremo scrivere <mj-image width=”100” height=”100” src=”indirizzo dell’immagine”></mj-image> (la chiusura del tag deve essere sempre effettuata). Stesso principio vale per i testi, i bottoni, e tutti gli altri elementi.

Mentre scriviamo, sulla parte destra dell’editor online viene visualizzata la ns. mail così possiamo immediatamente prendere coscienza del risultato grafico e di eventuali errori. Un consiglio: scaricate le immagini sul server del Vs. sito e fate riferimento a quelle nell’indicare l’url in src.

Una volta finita la composizione andremo a schiacciare View HTML nell’angolo in alto a dx ed ecco che al posto dell’anteprima comparirà il codice HTML da incollare nell’apposita sezione del ns. programma di posta preferito (ad esempio in Thunderbird, posizionando il cursore nel testo della mail bisogna selezionare Inserisci -> HTML).

Semplice e veloce.

Ultimamente ho trovato molto utile questo servizio, ecco quindi perché lo segnalo in questo spazio.

Buone mail a tutti!!!

Torna al blog
Torna all'inizio