Inviare email di risposta automatica responsive

Negli ultimi anni abbiamo visto una enorme diffusione di smartphone e tablet, con accesso alla rete. Di conseguenza l'accesso ai siti internet ha visto una aumento esponenziale di visite dai dispositivi mobile, ma non solo, le app dedicate alla lettura della propria casella di posta elettronica ci permettono di accedere alle nostre email da periferiche dallo schermo molto più piccolo rispetto ai nostri computer.

Vediamo quindi oggi come far inviare al nostro sito Wordpress delle email che si adattino ai diversi dispositivi, utilizzando un layout responsive.

Come far inviare una email di risposta automatica con Wordpress

Prima di procedere a creare una email adattabile ai diversi dispositivi è opportuno configurare i nostri form di contatto su Wordpress, per far si che invino una email di risposta automatica all'utente che ha compilato il modulo.
Per far questo è necessario utilizzare un plugin per creare dei form che supporti le risposte automatiche in formato HTML.

Alcuni di questi plugin per Wordpress con questa funzionalità sono:

• Formidable Forms
• Contact Form 7
• Ninja Form
• Gravity Form

Nel mio caso utilizzo da anni Formidable Pro, dopo averne acquistato licenza, per tutta una serie di motivi che, se interessati spiegherò in un futuro articolo. Questo plugin permette di creare infinite email di risposta ad un form, formattabili in HTML.

Come creare un layout email responsive

Vediamo insieme come costruire un layout HTML per le email adattabile a qualunque dispositivo, di cui troverete un esempio completo da scaricare in coda a questo articolo.

Prima di incominciare alcune regole basilari da tenere a mente prima di creare il codice di markup:

• i client email NON sono un browser e di conseguenza non sono aggiornati agli ultimi standard HTML, per cui non utilizziamo CSS3 o HTML5 ed anzi, se possibile costruiamo il nostro layout con le tabelle, al posto che con i DIV.
• Non utilizziamo troppi CSS, cercando di inglobare gli stili direttamente come attributo dei tag HTML che andremo ad utilizzare.
• Non inseriamo gli stili in un file CSS esterno, ma inseriamoli tra i tag HEAD, utilizzando il tag STYLE, in testa al nostro template
• Nel caso volessimo utilizzare delle immagini è consigliabile caricarle sul nostro server con accesso in lettura e ottimizzate in termini di dimensioni, in modo da non rendere la nostra email pesante, in fase di apertura.

Per prima cosa creiamo il nostro template HTML facendo attenzione ad utilizzare il meta tag viewport e impostandolo in modo tale da obbligare il client email a settare la larghezza della pagina in relazione alla larghezza dello schermo.

<meta name="viewport" content="width=device-width" />

Prepariamo quindi lo scheletro della nostra email, come si faceva una volta, con una "bellissima" tabella in HTML, nidificandone due una dentro all'altra.

<table>
    <tr>
        <td></td>
        <td>
            <table>
                <tr>
                    <td>HEADER</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>CORPO</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>FOOTER</td>
                <tr>
            </table>
        </td>
        <td></td>
    </tr>
</table>

La prima è quella generale, che ha una riga e tre colonne. Nella seconda colonna di questa tabella inseriremo una nuova tabella che avrà tre righe: una per la testata (header), una per il corpo del messaggio e una per il piè di pagina (footer).

Alla prima tabella ho assegnato una classe body-wrap che, via CSS, ho impostato per avere sempre una larghezza pari al 100% del monitor e ho assegnato alla tabella nidificata dentro alla prima tabella una classe generale, che ho denominato .container, definendo via CSS una largezza massima (600px) e la visualizzazione come blocco in modo che tenderà automaticamente a quella larghezza, ma nel contempo che si potrà ridurre una volta visualizzata su uno smartphone.

Ho poi aggiunto una regola specifica alla tabella principale, sempre mediante CSS, impostando un padding di 20px alla classe .container contenuta nella classe .body-wrap, in modo da ottenere compatibilità con la visualizzazione su un client di posta eletronica come Outlook.

La seconda tabella sarà racchiusa all'interno di un DIV, a cui ho assegnato una classe .content e ho, mediante CSS, impostato che questa classe dovrà essere essere un elemento blocco, in modo che possa riempire il 100% del .container e che la tabella nell'area contenuti dovrà essere larga il 100%.

In sostanza avremo quindi impostato degli stili CSS più o meno così:

.container {
    display: block!important;
    max-width: 600px!important;
    margin: 0 auto!important; /* imposta la tabella al centro */
    clear: both!important;
}

.body-wrap .container {
    padding: 20px;
}

.content {
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

.content table {
    width: 100%;
}

e l'HTML della nostra email sarà più o meno il seguente:

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container">
            <div class="content">
                <table>
                    <tr>
                        <td>HEADER</td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td>CORPO</td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td>FOOTER</td>
                    <tr>
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>

Ho poi impostato, via CSS, che tutte le immagini all'interno della mia email in HTML avessero una dimensione pari al 100% della larghezza del display, per automatizzare la loro visualizzazione in funzione della larghezza del monitor su cui verrà visualizzata l'email e inserire così una immagine di testata, in alto nell'header del documento HTML, visualizzabile anche su smartphone.

Una volta aggiunte alcune regole CSS per formattare meglio il documento, personalizzabili a piacere in funzione della propria immagine coordinata, il nostro layout EMAIL sarà pronto e completo.

Un esempio di email visualizzabile su tutti i disposivi

Per tutti gli interessati lascio a disposizione, previo download gratuito, il codice di esempio per incominciare a creare la propria email di risposta automatica responsive.

Questo documento html ha all'interno dei link e, mediante tag img, richiama delle immagini sul server di www.posizionamento-seo.com, che potrete scaricare seguento dil link nella mail e utilizzare come modello di dimensione, per poterle poi personalizzare a seconda dei vostri bisogni.

Vi ricordo che, utilizzando questo layout email, le immagini non saranno inglobate all'interno delle mail e per questo prima di venire visualizzate il client vi chiederà l'autorizzazione.