Sådan opbygges en brugerdefineret e-mail med Foundation for Emails
Opbygning af e-mail-skabeloner er nede højre. At opbygge lydhøre e-mails er endnu sværere.
Heldigvis har de hyggelige mennesker over på Zurb udviklet en fantastisk ramme, der gør processen med at opbygge lydhide e-mails lettere end det nogensinde har været før.
Stiftelsen for e-mails (tidligere Ink) er en ramme skræddersyet til en moderne designer / udvikler, der søger at bruge dagens værktøjer og teknologier til at opbygge lydhørige e-mail-skabeloner til i morgen.
Numrene ligger ikke
Ifølge Zurb åbnes 54% af e-mails på en mobil enhed, og dette tal vil sandsynligvis stige. Med denne figur på plads er behovet for en responsiv email-skabelon et must. Zurb siger også, at 75% af Gmail-brugere får adgang til deres konto fra deres mobilenhed.
Ligegyldigt hvilken type email, der er sendt, Foundation for Emails har du dækket. Faktisk, når du lancerer deres praktiske projektbygger, bliver du mødt med eksempler skabeloner til enten reference eller tilpasse til dit hjertes indhold.
Kom i gang
I hele denne artikel vil jeg vise dig, hvordan du kommer i gang med Foundation for Emails ved hjælp af en brugerdefineret skabelon, jeg har designet til mit eget små branding agentur. Som med enhver ramme er det afgørende for dig at henvise til dokumentation . Jeg vil ikke gå over hver detalje som Zurb har allerede men denne vejledning er nok til at ramme jorden.
Kildekode
Du kan finde den endelige kildekode til dette projekt på GitHub .
Installation
For at begynde kan du vælge at bruge traditionelle CSS eller Sass . Jeg vil gøre brug af Sass .
Der er mange grunde, jeg anbefaler at gå denne rute i modsætning til traditionelle CSS . Disse grunde omfatter:
- Mere kontrol over rammens visuelle stilarter
- En komplet byggeproces, herunder Sass-kompilering og billedkomprimering
- En brugerdefineret
HTMLsprog kaldet inky hvilket betyder at du ikke behøver at skrive bordbaserede layouter for hånden. - En indbygget inliner til distribution af dit CSS som inline CSS
- Live genindlæsning
- Håndbjælker templerende
Bemærk - The Sass version kræver node.js at løbe. Sørg for at installere det, inden du går videre.
Installer Foundation CLI og opret et nyt projekt
Installationsprocessen gør brug af Foundation CLI. For at gøre brug af det, åbner du dit kommandolinieprogram og vælger følgende:
Bash $ npm install --global foundation-cliHvis du løber ind i eventuelle tilladelsesfejl, skal du forsøge at prefikse den samme kommando med sudo . Du bliver bedt om at indtaste dit systemadgangskode.
Med Foundation CLI installeret, kan du nu oprette et tomt Foundation for Emails-projekt. Sørg for at flytte til ( cdinto ) den mappe, du vil installere projektet i, og kør derefter følgende kommando:
Bash $ foundation new --framework emailsCLI skal bede dig om et projektnavn (jeg ringede til min nyhedsbrev ). Dette navn er, hvilken mappe hele projektet bliver mærket som. Derefter installeres en række afhængigheder. (Det kan tage et stykke tid at downloade.)
Når downloadet er færdigt, skal du se følgende:
Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the folder. cd i din projektmappe ved at skrive cd nyhedsbrev . Dit projektnavn kan variere i forhold til min, men hvis du følger med, skal du indstilles til at gå.
Kørsel af serveren og kompilering af aktiver
Fra terminalen køre kommandoen:
bash $ npm startDette vil slukke for den byggeproces, jeg nævnte før. Byggeprocessen vil parse HTML, kompilere Sass, komprimere billeder og starte en server. Din standardbrowser skal åbne et nyt fane punkt din index.html fil fra adressen til localhost: 3000 . Fra denne side kan du besøge eksempelmalerne Foundation for Emails, der følger med installationen.
Vurdering af designet
Med Foundation for Emails installeret og vores projekt kører på serveren leveres af rammen, er vi klar til at dykke lidt dybere ind i håndteringen af designet vist nedenfor.
For det meste er designet minimalt med pladsholderindhold til en nyhedsbrev-mail. Fremadrettet vil vi ændre elementer i skabelonen for at foretage ændringer. Det er lidt flere hænder end en WYSIWYG-mailbygger som f.eks. Standard MailChimp-skabeloner, men det er værd for tiden af hensyn til brugerdefineret branding. Jeg tror, at de fleste brugere vil være enige. Du kan helt sikkert udvide dette til at udnytte redaktøren inden for Mailchimp, men det er et emne for en anden gang.
Starter frisk
Forudsat at du bruger Sass- versionen, kommer Foundation for Emails sammen med Inky HTML, som er deres egen oprettelse. Denne HTML er ansvarlig for at lave skriveborde og avancerede tabel layouter en brise.
Det dokumentation for Foundation fro E-mails er det bedste sted at lære alt, hvad der er at vide om den brugerdefinerede Inky HTML, du kan bruge i dine egne projekter. Husk at henvise til det ofte.
Vi vil arbejde inde i src mappe i vores projektmappe. Disse filer overvåges via gulp.js og nogle medfølgende plugins. Når der foretages ændringer til vores skabelonkode og / eller stilarter, opdateres alle filerne i dist- mappen i overensstemmelse hermed. Jeg vil ikke gå dybt ind i, hvordan alt dette virker, men jeg husker, da jeg var ny på det hele, det virket som magi!
Indeks
Indekssiden, du ser, findes inden for src / layouts / index-layout.html . Stiftelsen til e-mails gør brug af styr som giver dig mulighed for at gøre templering indenfor grundlæggende HTML sider. For eksempel kan du oprette en delvis HTML fil, der bliver inkluderet dynamisk i en anden fil.
Bemærk mærket {{body}} . Alt indhold bliver i det væsentlige importeret her, til sidst takket være HTML-parsing til rådighed inden for rammerne.
sider
Hver side du ser inden for src / sider / er, hvad der oprindeligt bliver vist, når du kører $ npm, start for første gang. Hver side er en prøve skabelon, der leveres af Zurb.
Kopier indholdet af newsletter.html og opret en ny fil kaldet branded-newsletter.html . Indsæt indholdet indeni. Inden for denne fil vil vi bygge den mærkede skabelon, jeg tidligere delte.
Inde i filen skal du se en masse fremmede HTML-tags. Disse er en del af Inky HTML. Vigtigt ved at bruge dem, kan du komme væk med aldrig at fysisk kode tabel layout. (Du kan ikke bruge divs inde i e-mails som du ville websider, det samme gælder for mange CSS ejendomme.)
Nedenfor er et kort overblik over tags, vi vil gøre mest muligt ud af:
- Et indpakningselement med en indstillet bredde. - nødvendigt til indpakning af kolonner af indhold svarende til et flydende net på websteder.
- hvor det meste af dit indhold vil leve Disse kan tilpasses ved hjælp af et 12 kolonne layout. De opfører sig som en floated eller flexed div men involverer tabeller. - Lodret afstand for e-mail skabeloner. Mange mailklienter respekterer ikke margen eller polstring via CSS. Dette er en fantastisk løsning til det. Indstil enhver størrelse ved at tilføje attributten som denne så: . - - Opret en knap med tabeller.
På toppen af disse tags er yderligere CSS-klasser, du kan tilføje, tilpasse og udvide via Sass.
Stilladser nyhedsbrevet skabelon
For korthedens skyld opsummerer jeg kodningsprocessen og viser dig hele HTML'en, før jeg stilker den. Dette giver mig mulighed for at bygge et skelet af sorter til skabelonen og bekymre mig om stilarter senere. Nedenfor er HTML Jeg endte med designet. Denne skabelon lever sammen med sidekataloget og bliver inkluderet i layout / index-layout.html- filen, hvor du ser tagget {{body}} .
html
Email not displaying correctly? https://coupleofcreatives.com" class=logo>
|
Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed er egen risus varius blandet sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed di egen risus varius blandet sit amet non magna.
Seneste casestudie
Wildwood Family Tandlægning
Curabitur bland tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ud fermentum masse justo sit amet risus.
Fra bloggen
Dette er et overskud til et eksternt link Curabitur bland tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ud fermentum masse justo sit amet risus. Der er ikke noget for dig, der giver dig et godt råd.
Curabitur bland tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ud fermentum masse justo sit amet risus. Der er ikke noget for dig, der giver dig et godt råd.
Curabitur bland tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ud fermentum masse justo sit amet risus. Der er ikke noget for dig, der giver dig et godt råd.
Se vores nyeste video
Curabitur bland tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ud fermentum masse justo sit amet risus. Der er ikke noget for dig, der giver dig et godt råd.
Følg os på instagram
|
Har du brug for markedsføring? Lej denne kreative duo
Du har modtaget denne email, fordi du er tilmeldt for at få opdateringer fra os. Klik her for at afmelde.
Inde i HTML Du vil se mange af de brugerdefinerede tags, der er nævnt før. Det spacer element, for eksempel bruger jeg meget for at skabe vertikal afstand. Jeg gør det simpelthen fordi ikke alle e-mail-kunder ærer margen og polstring. For at spare på besværet hjælper spacerelementet enormt.
Tilføjelse af stilarter
Da jeg bruger Sass-versionen af Foundation for Emails, kan jeg lave partikler og importere dem til master app.scss- filen, som til gengæld bliver kompileret til dist mappen som app.css .
Jeg bruger en skrifttype kaldet Ideelle Sans . Desværre kan jeg kun bruge det på mit specificerede domæne, hvilket betyder, at du ikke kan bruge den til overskrifterne på din ende. Hvis du følger langs overskrifterne, vil du have Arial som tilbagesendelsen til basisfonten.
De fleste af de tilpasninger, du kan lave til de stilarter, der er bundtet inden for rammerne, findes i assets/scss/_settings.scss . Denne fil har en række variabler, der er klar til at blive tilpasset for at matche din egen branding.
Udover at tilpasse disse indstillinger skabte jeg nogle delvist af mine egne. Jeg importerede disse filer til app.scss- filen.
Responsive Emails
Stiftelsen for e-mails har støtte til lydhøre emails ude af kassen. Brug af bundtet
html Column 1 Column 2
Baseret på brugerens skærmstørrelse vises disse kolonner med 50% bredde på større skærme og 100% bredde på mindre skærme. Hvis du er bekendt med populære CSS-rammer som Bootstrap eller Foundation, bør det være ret nemt at forstå.
Brug af billeder i e-mails
Billeder skal indlæses fra en webserver ved hjælp af absolutte url-stier og helst fra samme domæne som personens email, der sender det. Så hvis jeg skulle sende en mail fra [email protected] {$lang_domain} mine abonnenter vil billederne skulle leve under det samme {$lang_domain} domænenavn.
Gør dette eliminerer sandsynligheden for, at din e-mail bliver misdirected til en spammappe og også vises som mere professionel.
Alt Tags er et must
Hvis du normalt ikke bruger alt-tags (jeg ved ikke, hvorfor du ikke ville), skal du i e-mails. Mange mailklienter lægger ikke billeder som standard, og det er op til brugeren. Alt-tags kan hjælpe med at beskrive billedet, før brugeren selv ser det. Dette er både godt for tilgængelighed og en yndefuld tilbagegang for dem, der ikke er interesserede i at indlæse billeder i de e-mails, de modtager.
Opbygning af produktionsfiler og testning
Produktionsbaserede emails skal have deres CSS indlejret. Inlining er processen med at definere stilarterne på selve elementet snarere end at forbinde fra et eksternt stilark. Stiftelsen for e-mails har en praktisk byggefunktion, der gør dette til dig. De endelige filer samles og formindskes i dist mappen.
For at opbygge produktionsfiler vil du gerne dræbe servere, der allerede kører, ved at skrive ctrl + c i dit terminalprogram. Derfra type:
Bash $ npm run buildNår e-mailen åbnes i browseren, skal du se det samme som du gjorde før. Men, hvis du ser tæt på kilden til siden, vil du se et rod af kode. Dette er resultatet af byggeprocessen, og hvis alt ser godt ud, er det klart at bruge i naturen.
Test
Jeg kan ikke understrege nok, hvor vigtigt det er at teste på så mange e-mail-platforme som muligt. Dit design vil sandsynligvis se anderledes ut på dem alle, men målet er at skabe en løsning, som i det mindste ser konsekvent og læselig på tværs af de fleste platforme.
Du kan bruge et kaldet værktøj lakmus til denne test. Der er en gratis version af værktøjet som giver dig mulighed for at kopiere og indsætte din kode og sende en email til dig selv eller kollega. Sørg for at gøre dette trin. E-mails, der sendes tydeligvis, kan ikke redigeres efter faktum.