Uw eerste responsieve e-mail die wordt gebouwd met een stichting voor e-mails

In deze tutorial gaan we een eerste blik werpen op ZURB's Fundament voor e-mails. We zullen het instellen, uitleggen wat er in het pakket zit en vervolgens een eenvoudige responsieve e-mail opbouwen.

We hebben een uitgebreide handleiding samengesteld om u te helpen bij het leren van de Foundation, of u nu net begint of als u meer geavanceerde onderwerpen wilt verkennen Leer Foundation.

frameworks

In het laatste half jaar maakte ik kennis met een aantal frameworks en boilerplates voor het maken van HTML-e-mails. Vóór deze hulpprogramma's was de feitelijke ontwikkeling altijd moeilijk om te testen en op te lossen, om nog maar te zwijgen van het reageren op e-mails.

HTML-e-mails coderen is een heel ander dier in vergelijking met het maken van een normale webpagina. Het is net alsof we teruggaan in de tijd naar 1999. We moeten tabelgebaseerde lay-outs, inline-stijlen gebruiken en tegemoet komen aan clients zoals desktop-apps (Thunderbird, Outlook) en webmails (Gmail, Yahoo). 

Om deze puzzel op te lossen en betrouwbare resultaten te krijgen, hebben we twee opties:

• volg een van de handleidingen van Nicole Merlin
• kies een modern HTML-e-mailraamwerk zoals Stichting voor e-mails

Voor de doeleinden van deze zelfstudie gaan we uiteraard met de tweede optie akkoord.

Wat zit er in de doos?

De ZURB-e-mail stack biedt een alles-in-een pakketoplossing voor het maken van e-mails.

Het bestaat uit:

• Slok: een build-systeem voor het automatiseren van de workflow
• Inkt HTML: voor het converteren van eenvoudige code naar tabellen
• Sass: de populaire CSS-preprocessor
• inliner: voor het inlinken van de stijlen
• BrowserSync: een testserver voor herladen
• Beeldcompressie: voor het automatisch comprimeren van afbeeldingen

De basis voor e-mails wordt bekeken terwijl u het resultaat codeert, compileert, inlining en verkleint voor productie. Het is uitgebreid getest in veel desktop- en mobiele apps; voor de volledige lijst van wat wordt ondersteund, kunt u het gedeelte compatibiliteit controleren. U kunt ook de officiële gids raadplegen als u begint met het kader.

Het opzetten van het project

Voor dit hele proces gebruik ik Windows 10, de 64-bits versie. Als je een ander systeem gebruikt, kun je nog steeds meegaan.

De stack werkt met Node.js en zijn pakketbeheerder npm. Om Stichting voor e-mails te installeren, openen we onze terminal en gebruiken we de opdracht:

npm install --global foundation-cli

Vervolgens veranderen we de map in een projectmap (waar je dit project ook wilt uitvoeren) met cd [pad projectmap]. In de projectdirectory zou de volgende opdracht moeten zijn:

stichting nieuwe - framewerk-e-mails

Je wordt gevraagd "Hoe heet het project? (geen spaties) ", waarna u een projectnaam invoert, op enter drukt en een ogenblik achterover leunt terwijl de projectafhankelijkheden zijn geïnstalleerd.

Start je motoren

Nu zijn we ingesteld met al onze projectbestanden, onze knooppuntmodules zijn geïnstalleerd en onze Bower-componenten zijn geïnstalleerd. Om het framework en de server te starten, gaat u naar de projectmap en gebruikt u de opdracht:

stichting horloge

Het standaardwebadres (gewoonlijk http: // localhost: 3000 /) wordt direct in uw browser geopend zodra u dit doet. U ziet een geheel nieuwe e-mailsjabloon, klaar om te gaan:

src

In je projectmap vind je (onder andere) een src map. In deze map vind je:

• middelen, stijlen en afbeeldingen
• lay-outs, wrapper lay-outs
• pagina's, HTML-codes baseren
• partials, herbruikbare HTML-onderdelen

De indexpagina is hier te vinden: src / pages / index.html

Notitie: als je onbekend bent met Node.js, wil je misschien onze beginnersgids eens lezen om te benadrukken wat we doen:

grids

Foundation maakt gebruik van een raster met twaalf kolommen. Het is vermeldenswaard dat de horizontale ruimte in een e-mail meestal smal is, vooral omdat zoveel e-mail naar mobiel is verplaatst. Het is daarom raadzaam om slechts één of twee kolommen te gebruiken. Raadpleeg de volgende gids voor meer praktische tips:

Foundation for Emails maakt gebruik van Inky, zijn eigen nieuwe Templating-taal die tot doel heeft de complexe markup te verwijderen die tabellen onvermijdelijk veroorzaken. Dit zijn de Inky-tags om ons te helpen de rasters op te maken:

• : het wikkelelement
• : de wrapper voor rijen
• : het kolomelement voor daadwerkelijke inhoud

We kunnen ook de grootte van het raster met de attributen specificeren klein en groot.

Dit is een sectie met één kolom.

  Kolom één  

Die simpele opmaak geeft ons, als het is samengesteld, het volgende:

 
 
 
 
 
 
 
 
 
 
Kolom één
 
 
 
 
 
 
 
 
 
 
 

Dit afzonderlijke voorbeeld is een rij met twee kolommen (elke kolom vouwt samen tot 12 breed bij kleine breekpunten, waarbij 6 breed blijft voor groot).

  Kolom één Kolom twee  

In essentie zullen we er een gebruiken element, met een reeks  en  elementen om onze structuur te bouwen.

Onze e-mail bouwen

Nu begrijpen we het basisgebruik van Inky, laten we het e-mailonderwerp wijzigen. In pages / index.html we kunnen de volgende details aan het begin van het document wijzigen - wellicht kent u deze vorm van "Voorhoofd" als u ooit YAML hebt gebruikt:

--- onderwerp: Cake Poker Summer Tournament ---

Logo gebied

Voor het invoegen van een logo-afbeelding gebruiken we standaard HTML opmaak binnen een . Het pad naar de afbeelding van het logo is relatief ten opzichte van het document, in de map met items. Ik heb ook een lege regel boven de afbeelding toegevoegd door een andere in te voegen met een leeg :

Intro tekst

Ik heb toen nog een paar rijen toegevoegd binnen de , met wat intro-tekst, een welkomst- en grote prijs inhoud.

  
Onze beste pokerfan! We hebben nieuws voor je: het kampioenschap voor de zomer komt eraan. Als u wilt deelnemen, registreer dan uw plaats vóór 5 juni!
     
De hoofdprijs is 1 miljoen euro en levensduur 10% online rakeback!
  

Meer afbeeldingen

Ik heb nog een afbeelding toegevoegd over de toernooistad, opnieuw ten opzichte van het document.

Let op de tag is ingepakt in a

  
Details over het toernooi
     
Londen, Royal Hall of Gamblers
   
De perfecte plek voor een modern pokerkampioenschap.
     
Markuee Hotel
   
In de omgeving viersterren **** accommodatie met volledige service en heerlijk eten.
     
Massage
   
Een gratis service voor alle toernooispelers.
     
Inkopen
   
500 + 50 GBP
   

Gecompileerde versie

Terwijl u dingen bouwt en verandert, wordt uw project voortdurend vernieuwd in de browser. De gecompileerde code is te vinden in het project dist map, de belangrijkste bestanden zijn index.html en css / app.css.

De afgewerkte e-mail bouwen

Als we tevreden zijn met wat we hebben, kunnen we dit commando gebruiken om de code in stijlen in te voegen en het geheel te comprimeren:

npm run build

Na het bouwproces, wat je dan zult vinden in de dist map is een verkleinde, kant-en-klare versie, geschikt voor productie maar zeker niet geschikt voor bewerking!

Conclusie

U hebt uw eerste sessie voltooid en een responsieve HTML-e-mail met het kader voor e-mailadressen gemaakt! We hebben een eenvoudige lay-out gemaakt met rijen met één en twee kolommen, afbeeldingen, rich-text en a Registreren knop aan het einde.

Bekijk voor inspiratie eens de categorie Email Templates op Envato Market. Misschien ontwerp, bouw, dan verzend uw!