La tua prima e-mail reattiva Build with Foundation for Email

In questo tutorial daremo una prima occhiata al framework Foundation for Emails di ZURB. Lo prepareremo, spiegheremo cosa viene incluso nel pacchetto, quindi costruiremo una semplice e-mail reattiva.

Abbiamo creato una guida completa per aiutarti a imparare Foundation, sia che tu stia appena iniziando o che desideri esplorare argomenti più avanzati Scopri la Fondazione.

Frameworks

Nell'ultimo semestre ho avuto la possibilità di conoscerne un paio quadri e boilerplates per creare email HTML. Prima di questi strumenti, lo sviluppo effettivo era sempre difficile da testare e correggere, per non parlare di rendere le e-mail reattive.

Codificare le email HTML è un animale molto diverso rispetto alla creazione di una normale pagina web. È come viaggiare indietro nel tempo fino al 1999. Abbiamo bisogno di utilizzare layout basati su tabelle, stili in linea e ospitare client come app desktop (Thunderbird, Outlook) e webmail (Gmail, Yahoo). 

Per risolvere questo puzzle e ottenere risultati affidabili, abbiamo due opzioni:

• segui tutti i tutorial di Nicole Merlin
• scegli un moderno sistema di email HTML come Foundation for Emails

Ai fini di questo tutorial, ovviamente andremo con la seconda opzione.

Cosa c'è nella scatola?

L'email di ZURB pila fornisce una soluzione tutto in uno per la creazione di e-mail.

Esso consiste in:

• Sorso: un sistema di compilazione per automatizzare il flusso di lavoro
• HTML Inky: per convertire codice semplice in tabelle
• insolenza: il popolare preprocessore CSS
• Inliner: per integrare gli stili
• BrowserSync: un server di test per il ricaricamento
• Compressione dell'immagine: per la compressione automatica delle immagini

Foundation for Email guarderà il codice, la compilazione, l'inlining, quindi il completamento del risultato pronto per la produzione. È stato ampiamente testato in molte app desktop e mobili; per l'elenco completo di ciò che è supportato puoi controllare la sezione di compatibilità. Si consiglia inoltre di fare riferimento alla guida ufficiale quando si inizia con la struttura.

Impostazione del progetto

Per questo intero processo, utilizzo Windows 10, la versione a 64 bit. Se usi un sistema diverso, sarai comunque in grado di seguirlo.

Lo stack funziona con Node.js e il suo gestore di pacchetti npm. Per installare Foundation for Email, apriamo il nostro terminale, quindi usiamo il comando:

installazione npm --global foundation-cli

Quindi cambiamo directory in una cartella del progetto (ovunque tu voglia eseguire questo progetto) usando cd [percorso cartella progetto]. Nella directory del progetto il prossimo comando dovrebbe essere:

nuova fondazione - email di lavoro

Ti verrà chiesto "Come si chiama il progetto? (senza spazi) ", a questo punto inserisci il nome di un progetto, premi invio, quindi siediti per un momento mentre sono installate le dipendenze del progetto.

Avvia i tuoi motori

Ora siamo impostati con tutti i nostri file di progetto, i nostri moduli Node sono installati e i nostri componenti Bower sono installati. Per avviare il framework e il server, vai alla cartella del progetto e usa il comando:

orologio di base

L'indirizzo web predefinito (di solito http: // localhost: 3000 /) si aprirà direttamente nel tuo browser non appena lo fai. Vedrai un modello di email nuovo di zecca, pronto all'uso:

src

Nella cartella del tuo progetto troverai (tra le altre cose) a src cartella. In questa cartella troverai:

• risorse, stili e immagini
• layout, layout del wrapper
• pagine, codici HTML di base
• parziali, parti HTML riutilizzabili

La pagina indice può essere trovata qui: src / pages / index.html

Nota: se non conosci Node.js, puoi consultare la nostra guida per principianti solo per rafforzare ciò che stiamo facendo:

griglie

La Fondazione utilizza una griglia di dodici colonne. Vale la pena notare che lo spazio orizzontale in un'e-mail è solitamente limitato, tanto più che la posta elettronica è stata spostata sui dispositivi mobili, quindi è consigliabile utilizzare solo una o due colonne. Per ulteriori best practice, consulta la seguente guida:

Foundation for Emails fa uso di Inky, il suo nuovo Templating Language, che mira a rimuovere la marcatura complessa che le tabelle inevitabilmente causano. Questi sono i tag Inky per aiutarci a contrassegnare le griglie:

• : l'elemento wrapper
• : il wrapper per le righe
• : l'elemento colonna per il contenuto attuale

Possiamo anche specificare la dimensione della griglia con gli attributi piccolo e grande.

Questa è una sezione di una colonna.

  Colonna uno  

Quel semplice markup, quando compilato, ci dà il seguente:

 
 
 
 
 
 
 
 
 
 
Colonna uno
 
 
 
 
 
 
 
 
 
 
 

Questo esempio separato è una riga a due colonne (ogni colonna collassa a 12 in larghezza a punti di interruzione piccoli, rimanendo 6 largamente per grande).

  Colonna uno Colonna due  

In sostanza, ne useremo uno elemento, con una serie di  e  elementi per costruire la nostra struttura.

Costruire la nostra email

Ora comprendiamo l'uso di base di Inky, cambiamo l'oggetto dell'email. Nel pagine / index.html possiamo modificare i seguenti dettagli all'inizio del documento: potresti avere familiarità con questo tipo di "Materia frontale" se hai mai utilizzato YAML:

--- subject: Torneo estivo di Cake Poker ---

Area del logo

Per inserire un'immagine del logo usiamo HTML standard markup all'interno di a . Il percorso dell'immagine del logo è relativo al documento, nella cartella delle risorse. Ho anche aggiunto una linea vuota sopra l'immagine inserendone un'altra con un vuoto :

Intro Text

Ho quindi aggiunto un altro paio di righe all'interno del , con alcuni testi introduttivi, un contenuto di benvenuto e un grande premio.

  
Il nostro caro fan del poker! Abbiamo notizie per voi: il campionato estivo è in arrivo. Se vuoi partecipare, ti preghiamo di registrare il tuo posto prima del 5 giugno!
     
Il gran premio è 1 milione di euro e tempo di vita 10% di rakeback online!
  

Altre immagini

Ho aggiunto un'altra immagine sulla città del torneo, sempre relativa al documento.

Notare il il tag è avvolto in a

  
Dettagli sul torneo
     
Londra, Royal Hall of Gamblers
   
Il posto perfetto per un moderno campionato di poker.
     
Markuee Hotel
   
Nelle vicinanze quattro stelle **** sistemazione con servizio completo e ottimo cibo.
     
Massaggio
   
Un servizio gratuito per tutti i giocatori del torneo.
     
Buy-in
   
500 + 50 GBP
   

Versione compilata

Mentre costruisci e modifichi le cose, il tuo progetto verrà continuamente aggiornato nel browser. Il codice compilato può essere trovato nel progetto dist directory, essendo i file principali index.html e css / app.css.

Costruire l'email finita

Quando siamo soddisfatti di ciò che abbiamo, possiamo usare questo comando per allineare il codice con gli stili e comprimere il tutto:

npm esegue build

Dopo il processo di compilazione, cosa troverai in dist la cartella è una versione minifatta e pronta, adatta alla produzione ma sicuramente non adatta ad alcuna modifica!

Conclusione

Hai completato la tua prima sessione, creando un email HTML reattivo con il framework Foundation for Emails! Abbiamo creato un layout semplice, con una e due righe di colonna, immagini, rich text e a Registrare pulsante alla fine.

Per l'ispirazione, dai un'occhiata alla categoria Modelli e-mail su Envato Market. Forse progetta, costruisci e poi invia il tuo!