Hvordan bygge en e-post med Foundation for e-post
Bygg e-postmaler er nede på riktig måte. Å bygge responsive e-poster er enda vanskeligere.
Heldigvis har de hyggelige folkene over på Zurb utviklet et fantastisk rammeverk som gjør prosessen med å bygge responsive e-poster enklere enn det som noen gang har vært før.
Stiftelsen for e-post (tidligere blekk) er en ramme skreddersydd passform for en moderne designer / utvikler som ønsker å bruke dagens verktøy og teknologier for å bygge responsive e-postmaler for i morgen.
Tallene Lie ikke
Ifølge Zurb åpnes 54% av e-postmeldinger på en mobil enhet, og dette tallet vil sannsynligvis øke. Med denne figuren på plass, er behovet for en responsiv e-postmal et must. Zurb sier også at 75% av Gmail-brukerne får tilgang til kontoen sin fra mobilenheten.
Uansett hvilken type e-post som er sendt, Foundation for Emails har du dekket. Faktisk, når du starter sin praktiske prosjektbygger, blir du møtt med eksempelmaler for å enten referanse eller tilpasse til ditt hjerte innhold.
Starter
Gjennom denne artikkelen vil jeg vise deg hvordan du går opp og går med Foundation for Emails ved hjelp av en tilpasset mal jeg har designet for min egen, små merkevarebygging. Som med alle rammer, er det viktig at du refererer til dokumentasjon . Jeg vil ikke gå over hver eneste detalj som Zurb har allerede men denne veiledningen vil være nok for deg å slå bakken i gang.
Kildekode
Du finner den endelige kildekoden til dette prosjektet på GitHub .
Installasjon
For å begynne kan du velge å bruke tradisjonelle CSS eller Sass . Jeg skal gjøre bruk av Sass .
Det er mange grunner jeg anbefaler å gå denne ruten, i motsetning til tradisjonelle CSS . Disse grunnene inkluderer:
- Mer kontroll over rammens visuelle stiler
- En fullbyggingsprosess, inkludert Sass-kompilering og bildekomprimering
- En skikk
HTMLspråk som kalles inky, noe som betyr at du ikke trenger å skrive tabellbaserte oppsett for hånd. - En innebygd inliner for distribusjon av CSS som inline CSS
- Live reloading
- Håndtakene templerer
Merk - The Sass versjonen krever node.js å løpe. Pass på å installere den før du går videre.
Installer Foundation CLI og opprett et nytt prosjekt
Installasjonsprosessen gjør bruk av Foundation CLI. For å gjøre bruk av det, åpner du kommandolinjeprogrammet ditt og skriver inn følgende:
Bash $ npm install --global foundation-cliHvis du går inn i noen tillatelsesfeil, kan du prøve å prefikse samme kommando med sudo . Du blir bedt om å angi systempassordet ditt.
Med Foundation CLI installert, kan du nå opprette et tomt Foundation for Emails-prosjekt. Sørg for å flytte til ( cdinto ) mappen du vil installere prosjektet i, og kjør deretter følgende kommando:
Bash $ foundation new --framework emailsCLI skal spørre deg om et prosjektnavn (jeg ringte mitt nyhetsbrev ). Dette navnet er hva mappen hele prosjektet vil bli merket som. Etter det er satt, vil en rekke avhengigheter installere. (Det kan ta litt tid å laste ned.)
Når nedlastingen er fullført, bør 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 inn i prosjektmappen din ved å skrive cd nyhetsbrev . Prosjektnavnet ditt kan variere i forhold til gruven, men hvis du følger med, bør du være klar til å gå.
Kjører server- og kompileringsaktiver
Fra terminalen løp kommandoen:
bash $ npm startDette vil brann av byggeprosessen jeg nevnte før. Byggeprosessen vil analysere HTML, kompilere Sass, komprimere bilder og starte en server. Standard nettleseren din skal åpne et nytt festepunkt index.html filen fra adressen til localhost: 3000 . Fra denne siden kan du besøke utvalgsmaler Foundation for Emails som følger med installasjonen.
Vurderer design
Med Foundation for Emails installert og prosjektet vårt kjører på serveren som leveres av rammen, er vi klare til å dykke litt dypere inn i håndteringen av designet vist nedenfor.
For det meste er designen minimal med plassholderinnhold for en nyhetsbrevsstil-epost. Fremover vil vi endre elementer i malen for å foreta endringer. Det er litt flere hender enn en WYSIWYG-e-postbygger som standard MailChimp-maler, for eksempel, men av hensyn til tilpasset merkevarebygging er det vel verdt tiden. Jeg tror de fleste brukere er enige. Du kan sikkert utvide dette til å utnytte redaktøren innen Mailchimp, men det er et emne for en annen gang.
Starter frisk
Forutsatt at du bruker Sass- versjonen, kommer Foundation for Emails sammen med Inky HTML, som er deres egen skapelse. Denne HTML-en er ansvarlig for å lage skrivebord og avanserte tabelloppsett en bris.
De dokumentasjon for Foundation fro E-post er det beste stedet å lære alt det er å vite om den egendefinerte Inky HTML du kan bruke i dine egne prosjekter. Husk å referere til det ofte.
Vi skal jobbe inni src mappe i vår prosjektmappe. Disse filene blir overvåket via gulp.js og noen inkludert plugins. Når endringer er gjort i vår malkode og / eller stiler, oppdateres alle filene i dist- mappen. Jeg vil ikke gå dypt inn i hvordan alt dette fungerer, men jeg husker da jeg var ny på det hele, virket det som magi!
Hovedsiden
Indekssiden du ser er funnet i src / layouts / index-layout.html . Stiftelsen for e-post gjør bruk av Styre som gjør at du kan templere i grunnleggende HTML sider. For eksempel kan du opprette en delvis HTML fil som blir inkludert i en annen fil dynamisk.
Legg merke til {{body}} taggen. Alt innholdet blir i hovedsak importert her, til slutt, takket være HTML-analysering tilgjengelig i rammen.
sider
Hver side du ser innenfor src / pages / er det som først blir vist når du kjører $ npm, starter for første gang. Hver side er en prøvemal levert av Zurb.
Kopier innholdet til newsletter.html og opprett en ny fil som heter branded-newsletter.html . Lim inn innholdet inni. Innenfor denne filen vil vi bygge merkemalen jeg delte før.
Inne i filen, bør du se mange utenlandske utseende HTML-koder. Disse er en del av Inky HTML. I hovedsak ved å bruke dem, kan du komme unna med aldri å fysisk kode tabelloppsett. (Du kan ikke bruke divs inne i e-postmeldinger som du ville websider, det samme gjelder for mange CSS egenskaper.)
Nedenfor er en kort oversikt over koder vi vil få mest mulig ut av:
- Et innpakningselement som har en innstilt bredde. - nødvendig for å pakke inn kolonner med innhold som ligner et flytende nett på nettsteder.
- der det meste av innholdet ditt vil leve Disse kan tilpasses ved hjelp av en 12 kolonne layout. De oppfører seg som en floated eller flexed div men involverer tabeller. - vertikal avstand for e-postmaler. Mange postklienter respekterer ikke margin eller polstring via CSS. Dette er en flott løsning for den. Angi hvilken som helst størrelse ved å legge til attributtet slik: . - - Lag en knapp med tabeller.
På toppen av disse kodene er det flere CSS-klasser du kan legge til, tilpasse og utvide via Sass.
Stillas Nyhetsbrevmalen
For korthetens skyld oppsummerer jeg kodingsprosessen og viser deg all HTML før jeg stiler den. Dette tillater meg å bygge et skjelett av sorter for malen og bekymre seg om stiler senere. Nedenfor er HTML Jeg endte med for designen. Denne malen lever med sidekartoteket og blir inkludert i layouten / index-layout.html- filen der du ser taggen {{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 som sin egen risus blandet sitt eneste ikke magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas seddi sin egen risus varius blandet sitt ikke-magna.
Nyere casestudie
Wildwood Family Tandpleie
Innbygger blandet tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Fra bloggen
Dette er en hylle til en ekstern lenke Innbygger blandet tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Kjæresten er dum og sitter, og er en avgjørende forfatter.
Innbygger blandet tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Kjæresten er dum og sitter, og er en avgjørende forfatter.
Innbygger blandet tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Kjæresten er dum og sitter, og er en avgjørende forfatter.
Se vår nyeste videoen
Innbygger blandet tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac kursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Kjæresten er dum og sitter, og er en avgjørende forfatter.
Følg oss på instagram
|
Trenger du markedsføring? Lei denne kreative duoen
Du har mottatt denne e-posten fordi du er registrert for å få oppdateringer fra oss. Klikk her for å avslutte abonnementet.
Inne i HTML Du vil se mange av de egendefinerte kodene som er nevnt før. De spacer element, for eksempel bruker jeg mye for å opprette vertikal avstand. Jeg gjør dette rett og slett fordi ikke alle e-postklienter ære margin og polstring. For å redde oppstyret hjelper spacerelementet enormt.
Legge til stilene
Siden jeg bruker Sass-versjonen av Foundation for Emails, kan jeg lage partikler og importere dem til master app.scss- filen som i sin tur blir kompilert til dist- mappen som app.css .
Jeg bruker en skrift som heter Ideelle Sans . Dessverre kan jeg bare bruke den på det angitte domenet mitt, noe som betyr at du ikke vil kunne bruke den til overskriftene på slutten din. Hvis du følger etter, vil overskriftene ha Arial som tilbakebetaling for basisfonten.
De fleste av de tilpasningene du kan gjøre med stilene som følger med i rammen, finnes i assets/scss/_settings.scss . Denne filen har en rekke variabler som er klare til å tilpasses for å matche din egen merkevarebygging.
I tillegg til å tilpasse disse innstillingene, har jeg opprettet noen deler av min egen. Jeg importerte disse filene til app.scss- filen.
Responsive Emails
Stiftelsen for e-post har støtte for responsive e-postmeldinger ut av boksen. Bruke buntet
html Column 1 Column 2
Basert på brukerens skjermstørrelse vil disse kolonnene vises på 50% bredde på større skjermer og 100% bredde på mindre skjermer. Hvis du er kjent med populære CSS-rammer som Bootstrap eller Foundation, bør dette være ganske enkelt å forstå.
Bruke bilder i e-post
Bilder må lastes fra en webserver ved hjelp av absolutte nettadresser og helst fra samme domene som personens e-post som sender den. Så hvis jeg skulle sende en e-post fra [e-postbeskyttet] {$lang_domain} til abonnentene mine ville bildene måtte leve under det samme {$lang_domain} domenenavn.
Å gjøre dette eliminerer sannsynligheten for at e-posten blir misdirected til en spammappe og også vises som mer profesjonell.
Alt Tags er et must
Hvis du vanligvis ikke bruker alt-koder (jeg vet ikke hvorfor du ikke ville), må du i e-postmeldinger. Mange postklienter laster ikke inn bilder som standard, og det er opp til brukeren. Alt-tagger kan bidra til å beskrive bildet før brukeren selv ser det. Dette er både bra for tilgjengelighet og en grasiøs tilbakebetaling for de som ikke er interessert i å laste bilder i e-postene de mottar.
Bygg produksjonsfiler og testing
Produksjonsbaserte e-poster må ha sitt CSS innfelt. Inlining er prosessen med å definere stilene på selve elementet i stedet for å koble fra et eksternt stilark. Foundation for Emails har en praktisk byggefunksjon som gjør dette for deg. De endelige filene blir samlet og minifisert i dist mappen.
For å bygge produksjonsfiler vil du drepe servere som allerede kjører ved å skrive ctrl + c i ditt terminalprogram. Derfra type:
Bash $ npm run buildNår e-posten åpnes i nettleseren, bør du se det samme som du gjorde før. Men, hvis du ser nøye på kilden til siden, vil du se et rot av kode. Dette er resultatet av byggeprosessen og antar at alt ser bra ut, er klart til bruk i naturen.
testing
Jeg kan ikke stress nok hvor viktig det er å teste på så mange e-postplattformer som mulig. Designet ditt vil sannsynligvis se annerledes ut på dem alle, men målet er å skape en løsning som i det minste ser konsekvent og lesbar på de fleste plattformer.
Du kan bruke et verktøy som heter lakmus for denne testen. Det er en gratis versjon av verktøyet som lar deg kopiere og lime inn koden din og sende en e-post til deg selv eller kollega. Pass på å gjøre dette trinnet. E-postmeldinger som blir sendt åpenbart, kan ikke redigeres etter det faktum.