Primul dvs. e-mail receptiv este construit cu fundația pentru e-mailuri

În acest tutorial vom avea o primă privire la cadrul Fundației pentru e-mailuri al ZURB. Vom instala, vom explica ce vine în pachet, apoi vom construi un simplu e-mail receptiv.

Am construit un ghid cuprinzător care vă ajută să învățați fundația, indiferent dacă începeți sau doriți să explorați subiecte mai avansate Aflați Fundația.

Cadrele

În ultima jumătate a anului am făcut cunoștință cu câțiva cadre și boilerplates pentru crearea de e-mailuri HTML. Înainte de aceste instrumente, dezvoltarea reală a fost întotdeauna greu de testat și repetat, să nu mai vorbim de a face răspunsurile e-mail-uri.

Codarea e-mailurilor HTML este un animal foarte diferit comparativ cu crearea unei pagini web obișnuite. Este ca și cum am călători înapoi în timp până în 1999. Trebuie să folosim layouts bazate pe tabele, stiluri inline și să le acceptăm clienților, cum ar fi aplicațiile desktop (Thunderbird, Outlook) și webmail-urile (Gmail, Yahoo).

Pentru a rezolva acest puzzle și a obține rezultate fiabile, avem două opțiuni:

urmați oricare dintre tutorialele lui Nicole Merlin
alegeți un cadru de e-mail modern, cum ar fi Fundația pentru e-mailuri

În scopul acestui tutorial, vom merge în mod evident cu a doua opțiune.

Ce e in cutie?

E-mailul ZURB grămadă oferă o soluție de pachete "all in one" pentru crearea de e-mailuri.

Se compune din:

Înghiţitură: un sistem de construire pentru automatizarea fluxului de lucru
Inky HTML: pentru conversia codului simplu în tabele
Sass: preprocesorul popular CSS
Inliner: pentru inscrierea stilurilor
BrowserSync: un server de testare pentru reîncărcare
Comprimarea imaginilor: pentru comprimarea automată a imaginilor

Fundația pentru e-mailuri va urmări în timp ce codificați, compilați, inscripționați, apoi minifiind rezultatul gata pentru producție. A fost testat pe scară largă în multe aplicații desktop și mobile; pentru lista completă a ceea ce este suportat, puteți verifica secțiunea de compatibilitate. Puteți, de asemenea, să vă referiți la ghidul oficial atunci când începeți cu cadrul.

Configurarea proiectului

Pentru întregul proces, folosesc Windows 10, versiunea pe 64 de biți. Dacă folosiți un alt sistem, veți putea să urmăriți în continuare.

Stackul funcționează cu Node.js și managerul de pachete npm. Pentru a instala Fundația pentru e-mailuri, ne deschidem terminalul, apoi folosim comanda:

npm install - fundație globală-cli

Apoi vom schimba directorul într-un director de proiect (oriunde doriți să executați acest proiect) folosind cd [calea dosarului proiectului]. În directorul de proiect, următoarea comandă trebuie să fie:

fundație noi - frazework e-mailuri

Veți fi întrebat "Ce se numește proiectul? (fără spații) ", moment în care introduceți un nume de proiect, apăsați enter, apoi stați înapoi pentru un moment în timp ce sunt instalate dependențele de proiect.

Porniți motoarele

Acum suntem configurați cu toate fișierele noastre de proiect, sunt instalate modulele Nodului și sunt instalate componentele noastre Bower. Pentru a porni cadrul și serverul, accesați folderul proiectului și utilizați comanda:

ceas de fundație

Adresa web implicită (de obicei http: // localhost: 3000 /) se va deschide direct în browserul dvs. de îndată ce faceți acest lucru. Veți vedea un nou șablon de e-mail, gata de plecare:

src

În dosarul proiectului veți găsi (printre altele) a src pliant. În acest dosar veți găsi:

bunuri, stiluri și imagini
aspecte, machete de ambalaj
pagini, baza de coduri HTML
amprente parțiale, părți reutilizabile HTML

Pagina de index poate fi găsită aici: src / pagini / index.html

Notă: dacă nu sunteți familiarizat cu Node.js, vă recomandăm să citiți ghidul pentru începători doar pentru a vă consolida ceea ce facem:

Grile

Fundația folosește o grilă pe 12 coloane. Merită menționat faptul că spațiul orizontal dintr-un e-mail este, de obicei, îngust, mai ales că atât de mult e-mail sa mutat la telefonul mobil, deci este recomandabil să folosiți doar una sau două coloane. Pentru cele mai bune practici, consultați următorul ghid:

Fundația pentru e-mailuri folosește Inky, propriul limbaj Templating, care are drept scop eliminarea marcajului complex pe care tabelele inevitabil le provoacă. Acestea sunt etichetele Inky care ne ajută să marcați grilele:

: elementul de înfășurare
: învelișul pentru rânduri
: elementul coloanei pentru conținutul real

De asemenea, putem specifica dimensiunea grilei cu atributele mic și mare.

Aceasta este o secțiune cu o coloană.

  Coloana 1

Acest marcaj simplu, când este compilat, ne dă următoarele:

          Coloana 1

Acest exemplu separat este un rând cu două coloane (fiecare coloană se prăbușește la 12 laturi la puncte de întrerupere mici, rămânând la 6 laturi pentru mari).

  Coloana 1 Coloana a doua

În esență, vom folosi unul element, cu o serie de și elemente pentru construirea structurii noastre.

Construirea e-mailului nostru

Acum înțelegem folosirea de bază a Inky, să schimbăm subiectul e-mailului. În pagini / index.html putem schimba următoarele detalii la capul documentului - puteți fi familiarizat cu această formă de "Frontală" dacă ați folosit vreodată YAML:

--- subiect: Turneul de vară Cake Poker ---

Zona Logo

Pentru inserarea unei imagini a logo-ului folosim HTML standard marcare în interiorul unui . Calea către imaginea logo-ului este relativă la document, în dosarul cu materiale. Am adăugat, de asemenea, o linie goală deasupra imaginii prin introducerea în altul cu un gol :

Intro Text

Apoi am adăugat încă câteva rânduri în cadrul , cu un text introductiv, un conținut de bun venit și mare premiu.

  Dragul nostru fan Poker! Avem vestea pentru tine: campionatul de vară vine în curând. Dacă doriți să participați, vă rugăm să vă înregistrați locația înainte de 5 iunie!
     Marele premiu este 1 milion de euro și timp de viață 10% rakeback online!

Mai multe imagini

Am adăugat o altă imagine despre orașul turneului, din nou față de document.

Observați eticheta este înfășurată în a

etichetă. Aceasta declanșează una dintre clasele de aliniere a lui Inky, centrându-ne imaginea fără să ne mai facem griji.

Detalii

Secțiunea detaliilor este puțin mai implicată, oferind mai multe informații despre eveniment. Pentru această secțiune am folosit două coloane pe rând, fiecare explicând o parte specifică. Din nou, fiecare jumătate se prăbușește într-o coloană pe ecranele mobile.

  Detalii despre turneu
     Londra, Royal Hall of Gamblers
   Locul perfect pentru un campionat modern de poker.
     Hotelul Markuee
   Cazare **** de patru stele, cu servicii complete și mâncare excelentă.
     Masaj
   Un serviciu gratuit pentru toți jucătorii din turnee.
     Cumpara
   500 + 50 GBP

Buton

În cele din urmă am adăugat a Inregistreaza-te pentru înscriere. Am folosit-o

Versiune compilată

Pe măsură ce construiți și schimbați lucrurile, proiectul dvs. va fi reînnoit continuu în browser. Codul compilat poate fi găsit în proiect dist directorul, fișierele principale fiind index.html și css / app.css.

Construirea e-mailului terminat

Când suntem mulțumiți de ceea ce avem, putem folosi această comandă pentru a introduce codul cu stiluri și pentru a comprima întregul lucru:

npm run build

După procesul de construire, ce veți găsi apoi în dist folder este o versiune miniatură, gata, potrivită pentru producție, dar cu siguranță nu este potrivită pentru orice editare!

Concluzie

Ați terminat prima sesiune, făcând un e-mail HTML receptiv cu cadrul Fundației pentru e-mailuri! Am făcut un aspect simplu, cu una și două rânduri de coloană, imagini, text bogat și a Inregistreaza-te buton la sfârșit.

Pentru inspirație, aruncăm o privire la categoria Șabloane de e-mail de pe Envato Market. Poate proiectați, construiți, apoi trimiteți-vă propriul!

Web design