Come utilizzare il framework Foundation for Emails per creare design e-mail reattivi

Esistono molti strumenti di marketing che ti consentono di creare facilmente progetti di posta elettronica reattivi. Il fatto è che potresti preferire avere un maggiore controllo sull'aspetto delle tue e-mail e il modo migliore per farlo è progettarle da zero. L'utilizzo di un framework come Foundation for Emails offre un ottimo compromesso. Non avrete bisogno di progettare ogni singolo componente da zero, ma si ottiene il pieno controllo su come, quando e dove utilizzarli.

In questo articolo, spiegheremo innanzitutto cosa sono i framework di posta elettronica e come possono aiutarti. Quindi, passeremo a discutere di Foundation for Emails e di come puoi utilizzarlo per creare le tue campagne e-mail personalizzate e reattive. Andiamo a lavorare!

Cosa sono i framework email (e come possono aiutarti a creare email migliori)

I framework richiedono ancora la codifica, ma il processo è molto semplice per le e-mail.

In generale, un framework è una raccolta di pratiche, file e codice progettati per aiutare nello sviluppo di tipi specifici di prodotti. Considerali come elementi costitutivi del codice che possono aiutarti a creare progetti complessi più velocemente, consentendoti di non reinventare la ruota ogni volta.

Esistono anche framework per la posta elettronica, ed è di questo che parleremo in questo articolo. Esploriamo alcuni dei vantaggi:

• Gli elementi predefiniti ti aiutano a progettare le email più velocemente. Al giorno d'oggi, la maggior parte delle e-mail include elementi oltre a immagini e testo, come pulsanti e menu. L'inclusione di questi elementi può richiedere molto tempo, ma un framework consente di inserirli e personalizzarli all'istante.
• Reattivo fuori dagli schemi. Poiché sempre più persone si rivolgono ai dispositivi mobili, devi assicurarti che le tue e-mail vengano visualizzate bene sui loro schermi. La maggior parte dei framework moderni è reattiva per impostazione predefinita, il che significa che hai una cosa in meno di cui preoccuparti.
• I modelli possono aiutarti a dare il via ai tuoi progetti. Molti framework di posta elettronica moderni includono una varietà di modelli per aiutarti a creare rapidamente campagne.

Come puoi vedere, il tema comune qui è che i framework ti consentono di risparmiare tempo. Ci sono molti casi in cui vorrai codificare i tuoi progetti da zero, ma vale la pena usare un framework che ti consenta di fare le cose più velocemente con una qualità superiore.

Un'introduzione al framework Foundation for Emails

Prima di andare oltre, è importante notare che ci sono due framework Foundation disponibili online: Foundation for Sites e Foundation for Emails e ci concentreremo su quest'ultimo in questo articolo. Il principale punto di forza è la sua griglia reattiva. Questo tipo di sistema non è rivoluzionario, ma la popolarità di Foundation si basa sulla sua facilità d'uso.

La raccolta del framework è abbastanza semplice (anche se non hai alcuna esperienza di programmazione) e puoi scegliere tra due versioni: una basata su Cascading Stylesheets (CSS) e l'altra su Sass. Naturalmente, la versione Sass vi permette di risparmiare ancora più tempo, eliminando la necessità di ripetere stylings CSS, ma richiede una certa familiarità con Node.js.

Infine, Foundation for Email ti fornisce anche molti "schemi" come pulsanti e menu per rendere il tuo lavoro ancora più semplice. Per risparmiare più tempo, puoi persino utilizzare un modello invece di progettare un layout da zero.

Caratteristiche principali:

• Utilizza una griglia reattiva per creare moderne campagne di posta elettronica.
• Offre una versione CSS o Sass del framework.
• Ti consente di sfruttare i modelli per aggiungere rapidamente elementi comuni alle tue e-mail.
• Utilizza i layout per semplificare ulteriormente il processo di creazione delle e-mail.

Prezzo: gratuito | Maggiori informazioni

Come utilizzare Foundation for Email per creare design moderni (in 4 passaggi)

Come accennato, esistono due versioni di Foundation for Emails. Per questa sezione, utilizzeremo la variazione CSS poiché richiede meno lavoro per l'impostazione. Inoltre, i risultati finali dovrebbero essere gli stessi: tutto ciò che cambia è come ci si arriva.

Se vuoi vedere la versione Sass in azione o saperne di più su come usarla, puoi iniziare con questo fantastico tutorial.

Passaggio 1: scarica la base per i file di posta elettronica

Prima di tutto, vai alla pagina Foundation for Email Getting Started e fai clic sul pulsante Download Starter Kit sotto il sottotitolo Versione CSS :

Una volta ottenuto il file, decomprimilo ed estrai il suo contenuto in una nuova cartella. A questo punto, la tua cartella dovrebbe contenere un file index.html e due sottocartelle: una per il tuo CSS e un'altra per i tuoi modelli.

Per ora, esegui il tuo editor di testo preferito e apri il file index.html con esso. Dovrebbe essere piuttosto spoglio, ma lo sistemeremo tra un momento.

Passaggio 2: familiarizzare con il sistema di rete

La reattività di Foundation for Email si basa sul suo sistema a griglia flessibile. Se stai mettendo insieme un'email da zero, ti consigliamo di creare la tua griglia per segmentare le sezioni della tua email. Per farlo, utilizzeremo tre diversi componenti: contenitori, righe e colonne.

Apri il file index.html della tua Fondazione all'interno del tuo editor di testo e scorri verso il basso fino alla sezione del corpo :

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Come puoi vedere, il corpo della tua email contiene una tabella preimpostata che non toccheremo. Invece, aggiungeremo semplicemente i nostri elementi della griglia alla sezione in cui si legge <!– La tua griglia va qui –> . Iniziamo con il codice che devi usare per i tuoi contenitori:

<table class="container">
<tr>
<td></td>
</tr>
</table>

Ora aggiungiamo una riga lì dentro:

<table class="row"> <tr> <th></th> </tr> </table> 

Infine, possiamo dividere quella riga in colonne:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Tieni presente che ogni riga è composta da un massimo di 12 colonne. Il codice sopra indica al tuo client di posta elettronica che dovrebbe visualizzare i tuoi contenuti utilizzando le 12 colonne complete su schermi piccoli come i dispositivi mobili ( piccolo-12 ), ma occuparne solo sei sui desktop ( grande-6 ).

Il problema è che se la tua email viene visualizzata su uno schermo grande ci sono sei colonne vuote, quindi dobbiamo aggiungere una seconda tabella per risolverlo:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Come puoi vedere, entrambe le colonne sono sostanzialmente le stesse. Tuttavia, hanno due classi diverse, prime colonne e ultime colonne . Questi dicono al tuo client di posta elettronica quali sono la prima e l'ultima colonna della tua riga e le colonne intermedie non hanno bisogno di usarle.

Se dovessi ora aprire il tuo file index.html in un browser, ecco cosa vedresti:

È piuttosto spoglio, sì, ma la meccanica dovrebbe essere evidente in questa fase. Ogni email può avere tutte le righe che vuoi e puoi avere fino a 12 colonne per ogni riga. Per ora, continua a giocare con il sistema a griglia finché non trovi un layout che ti piace e usa i segnaposto di testo per aiutarti a identificarli finché non inizi ad aggiungere elementi.

Passaggio 3: aggiungi componenti alle tue e-mail

Foundation per pacchetti di posta elettronica in molti componenti e i più comunemente usati sono pulsanti, immagini di sfondo e sottotitoli. Sono piuttosto semplici, quindi esaminiamoli in ordine. Per aggiungere pulsanti, dovrai utilizzare il seguente codice all'interno di una o più colonne:

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Questo codice aggiunge un semplice piccolo pulsante con uno sfondo verde alla tua email. Gli elementi chiave qui sono le classi minuscole e di successo . Il primo regola la dimensione del tuo pulsante e il secondo il suo colore. Invece di aggiungere tutte le classi disponibili qui, ti collegheremo alla risorsa ufficiale della Fondazione sui pulsanti dove puoi sfogliarli a tuo piacimento.

Passiamo ora alle immagini di sfondo. Questi sono un po 'più complicati, perché devi usare la classe wrapper per farli occupare l'intera larghezza della tua riga e assegnare loro uno sfondo specifico usando i CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Ultimo ma non meno importante, parliamo di sottotitoli. Questi sono i più semplici del gruppo: tutto ciò che devi fare è avvolgere il testo all'interno dei tag richiesti:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

È così facile! L'utilizzo di questi tre elementi è sufficiente per creare delle email di bell'aspetto. Il segreto, ovviamente, è modellarli con CSS a piacimento, il che ci porta al nostro passaggio finale.

Passaggio 4: modella la tua email utilizzando CSS

Alcuni client di posta elettronica (come Microsoft Outlook) eliminano alcuni dei tag di stile dai file HTML. Questo viene fatto in modo che le e-mail vengano visualizzate senza problemi, nonché per rimuovere potenziali minacce alla sicurezza. Tuttavia, il risultato è che le tue e-mail sembreranno piuttosto noiose a meno che tu non aggiunga il tuo CSS direttamente al tuo HTML (o lo inlinei ).

In questo modo, sia il contenuto che lo stile verranno caricati come un singolo file e dovrebbero funzionare perfettamente sulla maggior parte dei client di posta elettronica moderni. Ecco come appare un elemento HTML con CSS inline:

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Questo può diventare un po' disordinato, quindi ti consigliamo di lavorare separatamente sui tuoi file HTML e CSS, quindi utilizzare uno strumento come Foundation Inliner per combinarli per te. Basta incollare il codice, fare clic su un pulsante e lui si occuperà del resto per te.

Una volta che hai il tuo file HTML in linea, puoi andare avanti e testarlo utilizzando uno strumento di email marketing, che è sempre una buona idea, prima di inviarlo ai tuoi abbonati.

Conclusione

Esistono molti modi per creare e-mail funzionali e reattive. Tuttavia, l'utilizzo di un framework come Foundation for Emails è un'ottima opzione se stai cercando flessibilità. Ti consente di progettare e-mail da zero utilizzando componenti predefiniti o di accelerare il processo utilizzando i modelli. Indipendentemente da ciò che scegli, dovrebbe ridurre drasticamente il tempo dedicato alla creazione di e-mail.

Per ricapitolare, ecco i quattro passaggi necessari per creare e-mail moderne con Foundation for Emails:

1. Scarica i file del framework.
2. Familiarizzare con il sistema a griglia.
3. Usa i componenti per le tue email.
4. Dai uno stile alla tua email usando i CSS.

Hai domande su come utilizzare il framework Foundation for Emails? Chiedi via nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo di Faberr Ink / shutterstock.com.