Share
I denna handledning kommer vi att ta en första titt på ZURBs Foundation for Emails Framework. Vi får det att installera, förklara vad som kommer i paketet och bygga oss sedan ett enkelt lyhörd e-postmeddelande.
Vi har byggt en omfattande guide för att hjälpa dig att lära dig Foundation, oavsett om du bara har börjat eller om du vill utforska mer avancerade ämnen, kolla in Lär dig grunden.
Under det senaste halvåret fick jag bekanta mig med ett par ramar och boilerplates för att skapa HTML-e-postmeddelanden. Före dessa verktyg var den faktiska utvecklingen alltid svår att testa och fixa, för att inte tala om att e-postmeddelanden ska reagera.
Kodning av HTML-e-post är ett mycket annat djur jämfört med att skapa en vanlig webbsida. Det är som att åka tillbaka i tiden till 1999. Vi behöver använda tabellbaserade layouter, inline-stilar och rymma kunder som skrivbordsprogram (Thunderbird, Outlook) och webbmail (Gmail, Yahoo).
För att lösa detta pussel och få pålitliga resultat har vi två alternativ:
För syftet med denna handledning kommer vi självklart att gå med det andra alternativet.
ZURB-e-posten stack ger en allt i en paketlösning för att skapa e-postmeddelanden.
Den består av:
Stiftelsen för e-postmeddelanden kommer att se som du kodar, sammanställer, inlining, och sedan minskar resultatet redo för produktion. Det har testats allmänt i många stationära och mobila appar. För en fullständig lista över vad som stöds kan du kolla kompatibilitetsdelen. Du kan också vilja hänvisa till den officiella guiden när du börjar med ramverket.
För hela processen använder jag Windows 10, 64 bitarsversionen. Om du använder ett annat system kan du fortfarande följa med.
Stacken arbetar med Node.js och dess paketchef npm. För att installera Foundation for Emails öppnar vi vår terminal, då använder vi kommandot:
npm installera - globala foundation-cli
Då byter vi katalogen till en projektmapp (vart du vill köra detta projekt) med cd [projektmappsbanan]. I projektkatalogen ska nästa kommando vara:
grunda nya - ramar e-post
Du kommer att bli frågad "Vad heter projektet? (inga mellanslag) ", där du anger ett projektnamn, slår du in och sedan luta dig tillbaka ett ögonblick medan projektberoende är installerade.
Nu är vi installerade med alla våra projektfiler, våra Node-moduler är installerade, och våra Bower-komponenter installeras. För att starta ramverket och servern, gå till projektmappen och använd kommandot:
grundvakt
Standardwebbadressen (vanligtvis http: // localhost: 3000 /) öppnas direkt i din webbläsare så snart du gör det. Du får se en helt ny e-postmall, redo att gå:
I din projektmapp hittar du (bland annat) a src mapp. I den här mappen hittar du:
Accentsconagua
tillgångar, stilar och bilderlayouter, wrapper layoutssidor, bas HTML-koderpartials, återanvändbara HTML-delarIndex sidan finns här: src / pages / index.html
Notera: Om du inte är bekant med Node.js, kan du kolla in vår nybörjarguide bara för att förstärka vad vi gör:
Stiftelsen använder ett tolv kolonnät. Det är värt att notera att det horisontella utrymmet i ett e-postmeddelande oftast är smalt, särskilt eftersom så mycket e-post har flyttats till mobilen, så det är lämpligt att bara använda en eller två kolumner. För mer bästa praxis, kolla in följande guide:
Stiftelsen för e-post använder sig av Inky, sitt eget nya Templating Language, som syftar till att avlägsna komplexa markup vilka tabeller oundvikligen orsakar. Det här är Inky-taggarna som hjälper oss att markera nätet:
|
Vi kan också ange storleken på rutnätet med attributen små och stor.
Detta är en kolonnavsnitt.
|
Kolumn En
Den enkla markeringen, när den sammanställs, ger oss följande:
|
Detta separata exempel är en kolonnrad (varje kolumn kollapsar till 12 bred vid små brytpunkter, håller sig 6 bred för stor).
|
Kolumn En Kolumn två
I huvudsak använder vi en
Nu förstår vi den grundläggande användningen av Inky, låt oss ändra e-postämnet. I sidor / index.html Vi kan ändra följande detaljer i dokumentets huvud - du kan vara bekant med denna form av "Front Matter" om du någonsin har använt YAML:
--- ämne: Cake Poker Summer Tournament ---
För att infoga en logo-bild använder vi standard HTML
Sedan lade jag till ett annat par rader inom
|
Vår Kära Poker fan! Vi har nyheter för dig: sommar mästerskapet kommer snart. Om du vill delta, var god registrera din plats före den 5 juni!
|
Storslaget är 1 miljon euro och livstid 10% online rakeback!
Jag lade till en annan bild om turneringsstaden, igen i förhållande till dokumentet.
Lägg märke till
Detaljerna är lite mer involverade och ger mer information om evenemanget. För det här avsnittet använde jag två kolumner per rad, var och en förklarar en viss del. Återigen sammanfaller varje halv i en kolonn på mobilskärmar.
|
Detaljer om turneringen
|
London, Royal Hall of Gamblers
Den perfekta platsen för ett modernt pokermästerskap.
|
Markuee Hotel
Närliggande fyra stjärnigt **** boende med full service och bra mat.
|
Massage
En gratis tjänst för alla turneringsspelare.
|
Köpa in
500 + 50 GBP
Till sist lade jag till en Registrera knappen för anmälan. Jag använde den tillhandahållna komponent, centrera den med
När du bygger och byter saker, kommer ditt projekt att uppdateras kontinuerligt i webbläsaren. Den sammanställda koden finns i projektets dist katalog, huvudfilerna är index.html och css / app.css.
När vi är nöjda med vad vi har kan vi använda det här kommandot för att inline koden med stilar och komprimera hela saken:
npm kör byggnad
Efter byggprocessen, vad hittar du då i dist mappen är en förminskad, färdig version, lämplig för produktion men säkerligen inte lämplig för redigering!
Du har slutfört din första session och gjort en responsiv HTML-e-post med Foundation for Emails Framework! Vi gjorde en enkel layout med en och två kolumnrader, bilder, rik text och a Registrera knappen i slutet.
För inspiration, ta en titt på kategorin E-postmallar på Envato Market. Kanske design, bygga och skicka in din egen!
