Share
I denne opplæringen skal vi ta en første titt på ZURBs Foundation for Emails rammeverk. Vi får det oppsett, forklare hva som kommer i pakken, og deretter bygge oss en enkel, responsiv e-post.
Vi har bygget en omfattende guide for å hjelpe deg med å lære Foundation, enten du er bare i gang eller du vil utforske mer avanserte emner, sjekk ut Lær Stiftelsen.
I det siste halvåret fikk jeg vite om et par rammer og boilerplates for å lage HTML-e-postmeldinger. Før disse verktøyene var den faktiske utviklingen alltid vanskelig å teste og fikse, for ikke å nevne å gjøre e-post responsive.
Koding HTML-e-post er et helt annet dyr i forhold til å lage en vanlig nettside. Det er som å reise tilbake i tiden til 1999. Vi må bruke tabellbaserte oppsett, inline-stiler og imøtekomme kunder som desktop-apper (Thunderbird, Outlook) og webmail (Gmail, Yahoo).
For å løse dette puslespillet og få pålitelige resultater, har vi to alternativer:
I forbindelse med denne opplæringen skal vi selvfølgelig gå med det andre alternativet.
ZURB-e-posten stable gir en alt i en pakke løsning for å lage e-post.
Det består av:
Stiftelsen for e-postmeldinger vil se som du koden, kompilere, legge inn, og deretter redusere resultatet klar til produksjon. Det har blitt mye testet i mange desktop og mobile apps; For hele listen over hva som støttes, kan du sjekke kompatibilitetsseksjonen. Du kan også ønske å referere til den offisielle veiledningen når du starter med rammen.
For hele denne prosessen bruker jeg Windows 10, 64-bitersversjonen. Hvis du bruker et annet system, vil du fortsatt kunne følge med.
Stakken fungerer med Node.js og pakkebehandling npm. For å installere Foundation for Emails åpner vi vår terminal, så bruker vi kommandoen:
npm install - global foundation-cli
Da endrer vi katalogen til en prosjektmappe (uansett hvor du vil kjøre dette prosjektet) ved hjelp av cd [prosjektmappebane]. I prosjektkatalogen bør neste kommando være:
grunnlag nye --framework e-post
Du blir spurt "Hva heter prosjektet? (ingen mellomrom) ", på hvilket tidspunkt du skriver inn et prosjektnavn, trykk enter, og sett deg tilbake et øyeblikk mens prosjektets avhengigheter er installert.
Nå er vi installert med alle våre prosjektfiler, våre Node-moduler er installert, og våre Bower-komponenter er installert. For å starte rammen og serveren, gå til prosjektmappen og bruk kommandoen:
fundament klokke
Standard webadresse (vanligvis http: // localhost: 3000 /) vil åpne direkte i nettleseren din så snart du gjør det. Du får se en helt ny e-postmal, klar til å gå:
I prosjektmappen finner du (blant annet) a src mappe. I denne mappen finner du:
Accentsconagua
eiendeler, stiler og bilderoppsett, innpakningsoppsettsider, basere HTML-koderpartials, gjenbrukbare HTML-delerIndekssiden finner du her: src / sider / index.html
Merk: Hvis du ikke er kjent med Node.js, vil du kanskje sjekke ut vår nybegynners guide bare for å styrke hva vi gjør:
Stiftelsen bruker et tolv kolonne rutenett. Det er verdt å merke seg at det horisontale rommet i en e-post er vanligvis smalt, spesielt ettersom så mye e-post har flyttet til mobil, så det er tilrådelig å bare bruke en eller to kolonner. For mer beste praksis, sjekk ut følgende veiledning:
Stiftelsen for e-post gjør bruk av Inky, sitt eget nye Templating Language, som tar sikte på å fjerne komplekse oppslag som tabeller uunngåelig forårsaker. Dette er Inky-kodene for å hjelpe oss med å merke nettene:
|
Vi kan også spesifisere størrelsen på rutenettet med attributter liten og stor.
Dette er en kolonneavdeling.
|
Kolonne En
Det enkle oppslaget, når det blir samlet, gir oss følgende:
|
Dette separate eksemplet er en to kolonnerad (hver kolonne kollapser til 12 bred ved små bruddpunkter, forblir 6 bredde for store).
|
Kolonne En Kolonne To
I utgangspunktet bruker vi en
Nå forstår vi grunnleggende bruk av Inky, la oss endre e-postfeltet. I sider / index.html Vi kan endre følgende detaljer i dokumentets hode - du kan være kjent med denne formen for "Front Matter" hvis du noen gang har brukt YAML:
--- emne: Cake Poker Summer Turnering ---
For å sette inn et logo bilde bruker vi standard HTML
Jeg la til et annet par rader i
|
Vår kjære poker fan! Vi har nyheter for deg: sommermesterskapet kommer snart. Hvis du vil delta, vennligst registrer din plass før 5. juni!
|
Grand Prize er 1 million euro og livstid 10% online rakeback!
Jeg har lagt til et annet bilde om turneringsbyen, igjen i forhold til dokumentet.
Legg merke til
Informasjonsdelen er litt mer involvert, og gir mer informasjon om arrangementet. For denne delen brukte jeg to kolonner per rad, hver forklarer en bestemt del. Igjen, hver halvdel kollapser inn i en kolonne på mobilskjermene.
|
Detaljer om turneringen
|
London, Royal Hall of Gamblers
Det perfekte stedet for et moderne pokermesterskap.
|
Markuee Hotel
Nærliggende firestjerners **** overnatting med full service og god mat.
|
Massasje
En gratis tjeneste for alle turneringsspillere.
|
Kjøpe inn
500 + 50 GBP
Til slutt la jeg til en Registrere knappen for påmelding. Jeg brukte den angitte komponent, sentrere den med
Når du bygger og forandrer ting, blir prosjektet kontinuerlig oppdatert i nettleseren. Den kompilerte koden finnes i prosjektets dist katalog, hovedfilene er index.html og css / app.css.
Når vi er fornøyd med det vi har, kan vi bruke denne kommandoen til å legge inn koden med stiler og komprimere hele greia:
npm kjøre bygge
Etter byggeprosessen, hva vil du da finne i dist mappen er en minifisert, klar versjon, egnet for produksjon, men absolutt ikke egnet for redigering!
Du har fullført din første økt, og gjør en responsiv HTML-e-post med Foundation for Emails-rammeverket! Vi laget et enkelt oppsett med en og to kolonne rader, bilder, rik tekst og a Registrere knappen på slutten.
For inspirasjon, ta en titt på kategorien E-postmaler på Envato Market. Kanskje design, bygge, og send inn din egen!
