Come creare delle newsletter responsive

Come creare newsletter responsive

Secondo gli ultimi dati presenti sul web in merito alle aperture delle email in Italia si nota che oltre il 48% delle email ricevute è visualizzato su smartphone. Nel 2011 era solo l’8% (fonte Litmus).

Tutte le comunicazioni vai mail dovranno essere email responsive che siano bene visibili e consultabili su ogni dispositivo disponibile sul mercato.

Utilizzare un template per renderlo adattivo a ogni tipo di device richiede modifiche, spesso significative, sul codice con cui è stato progettato il template. Questa attività richiede tempo anche se hai padronanza dei linguaggi HTML e CSS: noi abbiamo gli strumenti per aiutarti.

La nostra piattaforma di email marketing, AltosMail, consente di creare newsletter responsive con un interfaccia davvero semplice ed intuitiva e mette a disposizione alcuni template già pronti all’uso.

Il nostro reparto grafico può anche realizzare nuovi template custom per te così potrai dedicarti alla comunicazione più efficace.

Se invece possiedi conoscenze di HTML e CSS ed hai esperienza nella creazione di newsletter, puoi seguire alcuni dei seguenti consigli:

Utilizzare le Media Queries

Le media queries sono istruzioni relativa al linguaggio CSS e ti permettono di dichiarare istruzioni specifiche in base alla larghezza del dispositivo su cui vengono viste.

@media screen and (max-width: 640px)

In questo modo possiamo scrivere istruzioni CSS specifiche dedicate solo ai dispositivi che hanno una dimensione inferiore a 641px e disporre di una tabella da due colonne a una dichiarando l’istruzione display: block ad esempio, applicata al tag .

@media screen and (max-width: 640px {
    td {display: block !important;}
}

Un’ altra tecnica che possiamo utilizzare nel caso avessimo sviluppato un template con tabelle nidificate ad una sola colonna che risultano affiancate nella versione desktop, è quella di definire una larghezza per gli elementi contenuti al suo interno come e

Nel caso di immagini ipotizziamo di avere nel codice della newsletter un tag con all’interno una classe: “responsive-image”.

@media screen and (max-width: 640px {
    img[class="responsive-image"]{
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

L’elemento necessario per rendere un email responsive è quello di utilizzare le Media Queries e dichiarare le regole per adattare gli elementi al device.
Per il miglior adattamento è spesso necessario inserire le classi ai vari tag, e lasciare lo style inline per i client di posta che non interpretano le classi, tipo Outlook.

Una volta implementato il codice CSS è necessario verificare sul campo che il layout sia corretto sui vari dispositivi. Il metodo di verifica più immediato consiste nell’inviare la newsletter sul tuo device. Dovresti possederne tanti tipi diversi anche quelle ormai un po’ obsoleti e mantenerti sempre pronto ad acquistare tutti i modelli appena usciti.

Una alternativa valida – semplice, immediata, sempre aggiornata – è l’utilizzo del Device Emulator di AltosMail e con il quale potrai verificare immediatamente, semplicemente il risultato (wysiwyg) effettivo su ogni dispositivo. Con la nostra piattaforma puoi testare fino a 50 client di posta in una volta sola e controllarne l’aspetto grafico immediatamente.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn