Cum se folosește Fundația pentru cadru de e-mailuri pentru a crea modele de e-mail adaptabile

Există o mulțime de instrumente de marketing care vă permit să creați cu ușurință modele de e-mail receptive. Problema este că s-ar putea să preferați să aveți mai mult control asupra aspectului e-mailurilor dvs. și cel mai bun mod de a face acest lucru este să le proiectați de la zero. Folosirea unui cadru precum Foundation for Emails vă oferă un compromis superb. Nu va fi nevoie pentru a proiecta fiecare componentă de la zero, dar nu obține controlul deplin asupra modului, când și unde să le folosească.

În acest articol, vom explica mai întâi ce sunt cadrele de e-mail și cum vă pot ajuta. Apoi, vom trece la discutarea Fundației pentru e-mailuri și la modul în care o puteți folosi pentru a crea propriile campanii de e-mail personalizate și receptive. Sa trecem la treaba!

Ce sunt cadrele de e-mail (și cum vă pot ajuta să creați e-mailuri mai bune)

Cadrele necesită în continuare să faceți o codificare, dar procesul este foarte simplu pentru e-mailuri.

În general, un cadru este o compilație de practici, fișiere și cod concepute pentru a ajuta la dezvoltarea anumitor tipuri de produse. Gândiți-vă la ele ca la blocuri de cod care vă pot ajuta să creați proiecte complexe mai rapid, permițându-vă să nu reinventați roata de fiecare dată.

Există și cadre pentru e-mail și despre asta vom vorbi în acest articol. Să explorăm câteva dintre beneficii:

• Elementele pre-construite vă ajută să proiectați e-mailurile mai rapid. În zilele noastre, majoritatea e-mailurilor includ elemente dincolo de imagini și text, cum ar fi butoane și meniuri. Includerea acestor elemente poate consuma mult timp, dar un cadru vă permite să le inserați și să le personalizați instantaneu.
• Răspundeți din cutie. Pe măsură ce tot mai mulți oameni apelează la dispozitive mobile, trebuie să vă asigurați că e-mailurile dvs. se afișează bine pe ecranele lor. Majoritatea cadrelor moderne răspund în mod implicit, ceea ce înseamnă că aveți un lucru mai puțin de care să vă faceți griji.
• Șabloanele vă pot ajuta să începeți proiectele. O mulțime de cadre de e-mail moderne includ o varietate de șabloane pentru a vă ajuta să creați rapid campanii.

După cum puteți vedea, tema obișnuită aici este că cadrele vă permit să economisiți timp. Există o mulțime de cazuri în care veți dori să vă codificați proiectele de la zero, dar merită să utilizați un cadru care vă poate permite să faceți lucrurile mai repede la o calitate superioară.

Introducere în cadrul Foundation for Emails Framework

Înainte de a merge mai departe, este important să rețineți că există două cadre de fundație disponibile online - Fundația pentru site-uri și Fundația pentru e-mailuri - și ne vom concentra asupra acestora din urmă în acest articol. Principalul punct de vânzare este grila sa receptivă. Acest tip de sistem nu este revoluționar, dar popularitatea Fundației se bazează pe ușurința sa de utilizare.

Preluarea cadrului este destul de simplă (chiar dacă nu aveți nicio experiență de codificare) și puteți alege între două versiuni - una bazată pe Cascading Stylesheets (CSS) și cealaltă pe Sass. Desigur, versiunea Sass vă permite să economisi și mai mult timp prin eliminarea necesității de a repeta CSS stilului, dar are nevoie de unele familiaritate cu Node.js.

În cele din urmă, Fundația pentru e-mail vă oferă, de asemenea, o mulțime de „modele”, cum ar fi butoane și meniuri, pentru a vă simplifica munca. Pentru a economisi mai mult timp, puteți chiar să utilizați un șablon în loc să proiectați un aspect de la zero.

Caracteristici cheie:

• Folosește o grilă receptivă pentru a crea campanii moderne de e-mail.
• Oferă o versiune CSS sau Sass a cadrului.
• Vă permite să profitați de modele pentru a adăuga rapid elemente comune la e-mailurile dvs.
• Folosește aspectele pentru a simplifica și mai mult procesul de creare a e-mailurilor.

Preț: gratuit | Mai multe informatii

Cum se folosește fundația pentru e-mailuri pentru a crea modele moderne (în 4 pași)

După cum am menționat, există două versiuni ale Fundației pentru e-mailuri. Pentru această secțiune, vom folosi varianta CSS, deoarece necesită mai puțină muncă pentru configurare. În plus, rezultatele finale ar trebui să arate la fel - tot ceea ce se schimbă este modul în care ajungi acolo.

Dacă doriți să vedeți versiunea Sass în acțiune sau să aflați mai multe despre cum să o utilizați, puteți începe cu acest tutorial minunat.

Pasul 1: Descărcați Fundația pentru fișiere de e-mail

Mai întâi de toate, accesați pagina Fundație pentru e-mailuri și începeți să faceți clic pe butonul Descărcați kitul de pornire de sub subtitlul versiunii CSS :

După ce ați obținut fișierul, dezarhivați-l și extrageți conținutul acestuia într-un folder nou. În această etapă, folderul dvs. ar trebui să conțină un fișier index.html și două subfoldere - unul pentru CSS și altul pentru șabloane.

Deocamdată, rulați editorul de text preferat și deschideți fișierul index.html cu acesta. Ar trebui să fie destul de gol, dar vom remedia asta într-o clipă.

Pasul 2: Familiarizați-vă cu sistemul de rețea

Reacția Fundației pentru e-mail se bazează pe sistemul său de rețea flexibilă. Dacă creați un e-mail de la zero, veți dori să creați propria grilă pentru a segmenta secțiunile e-mailului. Pentru a face acest lucru, vom folosi trei componente diferite: containere, rânduri și coloane.

Deschideți fișierul index.html al fundației în editorul de text și derulați în jos până la secțiunea corp :

<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>

După cum puteți vedea, corpul e-mailului dvs. conține un tabel prestabilit pe care nu vom atinge. În schimb, vom adăuga propriile noastre elemente de grilă la secțiunea în care se citește <! - Grila ta merge aici -> . Să începem cu codul pe care trebuie să îl folosiți pentru containerele dvs.:

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

Acum, să adăugăm un rând acolo:

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

În cele din urmă, putem împărți acel rând în coloane:

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

Rețineți că fiecare rând este format din maximum 12 coloane. Codul de mai sus spune clientului dvs. de e-mail că acesta ar trebui să afișeze conținutul dvs. utilizând cele 12 coloane complete pe ecrane mici , cum ar fi dispozitivele mobile ( mici-12 ), dar să ocupe doar șase pe desktop-uri ( mare-6 ).

Problema este că, dacă e-mailul dvs. se afișează pe un ecran mare, există șase coloane goale, așa că trebuie să adăugăm un al doilea tabel pentru a remedia problema:

<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>

După cum puteți vedea, ambele coloane sunt practic aceleași. Cu toate acestea, acestea au două clase diferite, prima coloană și ultima coloană . Acestea îi spun clientului dvs. de e-mail care sunt prima și ultima coloană de pe rândul dvs. și orice coloane între ele nu trebuie să le folosească.

Dacă ar fi să deschideți acum fișierul index.html într-un browser, iată ce veți vedea:

Este destul de gol, da, dar mecanica ar trebui să fie evidentă în acest stadiu. Fiecare e-mail poate avea câte rânduri doriți și puteți avea până la 12 coloane pentru fiecare rând. Deocamdată, continuați să jucați cu sistemul de rețea până când găsiți un aspect care vă place și utilizați substituenți de text pentru a vă ajuta să îi identificați până când începeți să adăugați elemente.

Pasul 3: Adăugați componente la e-mailurile dvs.

Fundația pentru pachetele de e-mail în numeroase componente și cele mai utilizate sunt butoanele, imaginile de fundal și subtitlurile. Sunt destul de simple, așa că hai să le parcurgem în ordine. Pentru a adăuga butoane, va trebui să utilizați următorul cod în una sau mai multe coloane:

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

Acest cod adaugă un simplu buton mic cu un fundal verde la adresa dvs. de e-mail. Elementele cheie aici sunt clasele minuscule și de succes . Primul guvernează mărimea butonului dvs., iar al doilea culoarea acestuia. În loc să adăugăm toate clasele disponibile aici, vă vom conecta la resursa oficială a Fundației pe butoane unde le puteți examina în timp liber.

Acum să trecem la imaginile de fundal. Acestea sunt puțin mai complicate, deoarece trebuie să utilizați clasa wrapper pentru a le face să ocupe întreaga lățime a rândului și să le atribuie un fundal specific folosind CSS:

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

Nu în ultimul rând, să vorbim despre subpoziții. Acestea sunt cele mai simple din grup - tot ce trebuie să faceți este să vă înfășurați textul în etichetele necesare:

<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>

Este la fel de ușor ca asta! Folosirea acestor trei elemente este suficientă pentru a crea câteva e-mailuri frumoase. Secretul, desigur, este să le aranjezi cu CSS după conținutul inimii tale, ceea ce ne duce la ultimul nostru pas.

Pasul 4: stilizați-vă e-mailul utilizând CSS

Unii clienți de e-mail (cum ar fi Microsoft Outlook) elimină unele dintre etichetele de stil din fișierele dvs. HTML. Acest lucru se face astfel încât e-mailurile să fie redate fără probleme, precum și pentru a elimina potențialele amenințări la adresa securității. Cu toate acestea, rezultatul este că e - mailurile tale vor arata destul de plictisitor decât dacă adăugați CSS direct la codul HTML (sau inline - l).

În acest fel, atât conținutul, cât și stilul acestuia vor fi încărcate ca un singur fișier și ar trebui să funcționeze perfect pe majoritatea clienților de e-mail moderni. Iată cum arată un element HTML cu CSS înclinat:

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

Acest lucru poate deveni un pic dezordonat, așa că vă recomandăm să lucrați separat la fișierele dvs. HTML și CSS, apoi să utilizați un instrument precum Foundation Inliner pentru a le combina pentru dvs. Pur și simplu lipiți codul, faceți clic pe un buton și acesta se va ocupa de restul pentru dvs.

Odată ce aveți fișierul HTML încorporat, îl puteți continua și testa cu ajutorul unui instrument de marketing prin e-mail, care este întotdeauna o idee bună, înainte de a-l trimite abonaților dvs.

Concluzie

Există o mulțime de moduri de a crea e-mailuri funcționale și receptive. Cu toate acestea, utilizarea unui cadru precum Foundation for Emails este o opțiune excelentă dacă doriți flexibilitate. Vă permite fie să proiectați e-mailuri de la zero folosind componente pre-construite, fie să accelerați procesul utilizând șabloane. Indiferent de ceea ce alegeți, acesta ar trebui să vă reducă drastic timpul petrecut creând e-mailuri.

Pentru a recapitula, iată cei patru pași de care aveți nevoie pentru a crea e-mailuri moderne cu Foundation for Emails:

1. Descărcați fișierele cadrului.
2. Familiarizați-vă cu sistemul de rețea.
3. Utilizați componente pentru e-mailurile dvs.
4. Stilizați-vă e-mailul folosind CSS.

Aveți întrebări despre cum să utilizați cadrul Foundation for Emails? Întrebați în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de Faberr Ink / shutterstock.com.