Miten rakentaa mukautetun sähköpostin säätiö sähköpostit
Sähköpostimallien rakentaminen on kovaa. Sähköpostiviestien rakentaminen on vielä vaikeampaa.
Onneksi Zurbin kaltaiset kaverit ovat kehittäneet fantastisen kehyksen, joka tekee prosessin rakentavasta sähköpostiviestinnästä helpompaa kuin koskaan aikaisemmin.
Säätiö sähköposteille (aiemmin Ink) on räätälöity räätälöinti moderniin suunnittelijoihin / kehittäjiin, jotka haluavat käyttää nykyisiä työkaluja ja teknologioita rakentamaan vastaavia sähköpostiohjelmia huomiselle.
Numbers Do not Lie
Zurbin mukaan 54% sähköposteista avautuu mobiililaitteelle ja tämä määrä todennäköisesti nousee. Kun kyseinen luku on paikallaan, tarve saada reagoiva sähköpostimalli on välttämätön. Zurb toteaa myös, että 75% Gmail-käyttäjistä käyttää tiliään mobiililaitteestansa.
Ei ole väliä, minkä tyyppistä sähköpostiviestiä olet lähettänyt, Säätiö sähköpostiviestejä varten. Itse asiassa, kun käynnistät kätevän projektin rakentajasi, tervehdit näytepohjalla joko viittaukseksi tai muokata sydämesi sisältöä.
Päästä alkuun
Tämän artikkelin kautta näytän sinulle, miten pääset alkuun ja käytät säätiöä sähköpostiviesteissä käyttäen omia pieniä brändäysorganisaatiooni suunniteltua mallia. Kuten minkä tahansa kehyksen kanssa, on välttämätöntä viitata siihen dokumentointi . En aio mennä yli jokaisen yksityiskohdan Zurb jo on mutta tämä opas riittää siihen, että pääset maahan.
Lähdekoodi
Löydät viimeisen lähdekoodin tähän projektiin GitHub .
Asennus
Aloittaaksesi voit päättää käyttää perinteistä CSS tai Sass . Käytän Sass .
On monia syitä, jotka suosittelen menemään tällä reitillä perinteisen sijasta CSS . Näistä syistä ovat:
- Parempi ohjaus puun visuaalisiin tyyleihin
- Täysi kokoaminen sisältäen Sass-kokoonpanon ja kuvan pakkaamisen
- Muoto
HTMLkieli, joka tunnetaan nimellä inky, joten sinun ei tarvitse kirjoittaa pöytäkokoonpanoja käsin. - Sisäänrakennettu inliner CSS: n jakelemiseen sisäisenä CSS: ksi
- Live uudelleenlataus
- Kädensijamallinnus
Huomaa - Sass versio vaatii Node.js juosta. Asenna se ennen siirtymistä eteenpäin.
Asenna Foundation CLI ja luo uusi projekti
Asennusprosessi hyödyntää säätiön CLI: tä. Käytä sitä avaamalla haluamasi komentorivivalitsin ja kirjoita seuraava:
Bash $ npm install --global foundation-cliJos käytät lupavihjeitä, yritä etukäteen sama komento sudo-ohjelmalla . Sinua pyydetään syöttämään järjestelmän salasana.
Kun säätiön CLI on asennettu, voit luoda tyhjästä Säätiö sähköpostit -hankkeelle. Muista siirtää ( cdinto ) kansio, johon haluat asentaa projektin, ja suorittaa sitten seuraava komento:
Bash $ foundation new --framework emailsCLI: n tulisi pyytää projektin nimi (soitan minulle uutiskirjeeksi ). Tämä nimi on se, minkä kansion koko projekti on merkitty nimellä. Tämän jälkeen asetetaan useita riippuvuuksia. (Lataaminen voi kestää jonkin aikaa.)
Kun lataus on valmis, sinun pitäisi nähdä seuraavat:
Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the folder. cd-levylle projektikansioon kirjoittamalla cd-uutiskirjeen . Projektin nimi voi vaihdella verrattuna minun, mutta jos seuraat pitkin, sinun pitäisi asettaa mennä.
Palvelimen suorittaminen ja omaisuuden kääntäminen
Suorita terminaalin sisällä komento:
bash $ npm startTämä sammuttaa rakentamisprosessin, jonka mainitsin aiemmin. Rakentamisprosessi jäsentää HTML: ää, kääntää Sassin, pakkaa kuvia ja käynnistää palvelimen. Sinun oletusselaimen pitäisi avata uusi välilehti osoittamalla index.html- tiedosto osoitteeseen localhost: 3000 . Tästä sivusta voit tarkastella näytepohjat -säätiön sähköposteja, jotka on liitetty asennukseen.
Suunnittelun arviointi
Kun olet asentanut säätiön sähköposteja ja projektimme, joka toimii kehyksen tarjoamassa palvelimessa, olemme valmiit sukellamaan hieman syvemmälle alla olevan mallin käsittelyyn.
Suurin osa suunnittelusta on minimaalinen, jossa on paikkamerkkien sisältö uutiskirjeen tyyliä varten. Jatkossa eteenpäin muokkaamme elementtejä mallissa muutosten tekemiseksi. Se on hieman enemmän käsiä kuin WYSIWYG-sähköpostin rakentaja, kuten esim. Oletusarvoisia MailChimp-malleja, mutta mukautetun brändäyksen vuoksi se kannattaa. Uskon, että useimmat käyttäjät ovat samaa mieltä. Voit varmasti laajentaa tätä käyttämään editorissa Mailchimpissä, mutta se on aihe toisen kerran.
Aloita tuore
Olettaen, että käytät Sass- versiota, Säätiön sähköpostit -sivustolle tulee Inky HTML, joka on heidän oma luomuksesi. Tämä HTML on vastuussa kirjoitustaulukoiden ja kehittyneiden taulukkoasettelujen luomisesta.
documentation dokumentointi Säätiö Sähköpostit ovat paras paikka oppia kaikki, mitä on tiedossa Custom Inky HTML voit käyttää omissa projekteissa. Muista viitata siihen usein.
Toimimme sisällä src kansio projektikansioon. Näitä tiedostoja katsellaan gulp.js: n ja joidenkin lisäosien avulla. Kun mallikoodiin ja / tai tyyleihin tehdään muutoksia, kaikki dist- kansion tiedostot päivitetään vastaavasti. En pääse syvälle siihen, miten tämä kaikki toimii, mutta muistan, kun olin uusi kaikki, se tuntui taikuudelta!
Indeksi
Näkyvä hakemistosivu löytyy src / layouts / index-layout.html -sivulta . Säätiö käyttää sähköposteja Ohjaustanko jonka avulla voit mallinnuttaa perusasetuksen sisällä HTML sivuja. Voit esimerkiksi luoda osittaisen HTML tiedosto, joka sisällytetään toiseen tiedostoon dynaamisesti.
Huomaa {{> body}} -tunniste. Kaikki sisältö tuodaan pääosin täällä, lopulta HTML-jäsentelyn ansiosta.
sivut
Jokainen sivu, jonka näet src / pages / -sivulla, on alun perin näkyvissä, kun suoritat $ npm aloittaa ensimmäisen kerran. Jokainen sivu on Zurbin tarjoama mallipohja.
Kopioi uutiskirje.html ja luo uusi tiedosto nimeltä branded-newsletter.html . Liitä sisältö sisälle. Tässä tiedostossa rakennamme aiemmin jakamaa merkkimaalausta.
Tiedoston sisällä sinun pitäisi nähdä paljon ulkomaalaisia HTML-tunnisteita. Nämä ovat osa Inky HTML. Pohjimmiltaan käyttämällä niitä, voit päästä eroon ei koskaan tarvitse fyysisesti koodata taulukon asettelua. (Et voi käyttää divs sisällä sähköposteja, kuten sinulla olisi verkkosivuja, sama pätee monille CSS ominaisuudet.)
Seuraavassa on lyhyt katsaus tunnisteisiin, joista voimme käyttää eniten:
- Käärintäelementti, jolla on asetettu leveys. - on välttämätöntä kääriä sisällön sarakkeita, jotka ovat samanlaisia kuin uivalla verkkoon verkkosivustoilla.
- jos suurin osa sisällöstäsi asuu. Näitä voidaan räätälöidä 12 sarakkeen ulkoasun avulla. He käyttäytyvät kuin kelluva tai taivutettu div, mutta niihin liittyy taulukoita. - sähköpostimallien pystysuuntainen etäisyys. Monet sähköpostiasiakkaat eivät kunnioita marginaalia tai täyttöä CSS: n kautta. Tämä on erinomainen ratkaisu siihen. Määritä kaikki koot lisäämällä tämän tyyppinen attribuutti niin: . - - luo painike taulukkoineen.
Näiden tunnisteiden lisäksi on lisä CSS-luokkia, joita voit lisätä, muokata ja laajentaa Sassin kautta.
Uutiskirjeen mallin telineet
Lyhyyden vuoksi yhteenvedon koodausprosessista ja näytän sinulle kaiken HTML: n ennen sitä tyylistä. Tämä sallii minun rakentaa luuranko lajitella mallille ja huolehtia tyyleistä myöhemmin. Alla on HTML Päädyin suunnitteluun. Tämä malli elää sivun hakemistosta ja se sisältyy sisällysluetteloon / index-layout.html -tiedostoon, jossa näet {{> body}} -tunnisteen.
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 diam eget risus varius blandit sit amet ei magna.Macenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varus blandit sit amet non magna.
Viimeaikaiset tapaustutkimukset
Wildwood Family Dentistry
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod aina. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, mahalaukun massa justo sit amet risus.
Blogista
Tämä on ulkoinen linkki Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod aina. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, mahalaukun massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod aina. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, mahalaukun massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod aina. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, mahalaukun massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Katso uusin video
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod aina. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, mahalaukun massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Seuraa meitä instagramilla
|
Tarvitsetko markkinointia? Vuokraa tämä luova duo
Sait tämän sähköpostiviestin, koska olet kirjautunut saadaksesi päivitykset meiltä. Peruuta tilaus napsauttamalla tätä.
Sisällä HTML näet paljon aiemmin mainituista mukautetuista tunnisteista. spacer element, for example, I utilize a lot to create vertical spacing. elementti, esimerkiksi, käytän paljon luomaan pystysuuntaisia välilyöntejä. Tein tämän yksinkertaisesti, koska kaikki sähköpostiasiakkaat eivät kunnioita marginaalia ja pehmusteita. Välikappaleen säästämiseksi säästää valtavasti.
Tyylien lisääminen
Koska käytän Sass-versiota Foundation for Emailsille, voin luoda osia ja tuoda ne master- app.scss- tiedostoon, joka puolestaan kootaan dist- kansioon app.css: ksi .
Käytän nimettyä kirjasinta Ideal Sans . Valitettavasti voin vain käyttää sitä määritetyllä verkkotunnuksellani, mikä tarkoittaa sitä, ettet voi käyttää sitä otsikon otsakkeissa. Jos seuraat otsikoita pitkin, Arial on perushakemiston varalle.
Suurin osa räätälöityjä räätälöityjä räätälöityjä tyylejä varten löytyy assets/scss/_settings.scss . Tässä tiedostomuodossa on useita muuttujia, jotka ovat valmiita muokkaamaan oman brändäyksen mukaiseksi.
Näiden asetusten muokkaamisen lisäksi luotiin joitain osia omasta. Tuon nämä tiedostot app.scss- tiedostoon.
Vastaavat sähköpostit
Sähköpostien säätiö tukee vastaavia sähköpostiviestejä laatikon ulkopuolelle. Yhdistetty käyttö
html Column 1 Column 2
Käyttäjän näytön perusteella nämä sarakkeet näkyvät 50% leveydellä suuremmilla näytöillä ja 100% leveydellä pienillä näytöillä. Jos tunnet suosittuja CSS-kehyksiä, kuten Bootstrap tai Foundation, tämän pitäisi olla melko helppo ymmärtää.
Kuvien käyttö sähköpostissa
Kuvat on ladattava web-palvelimelta käyttäen absoluuttisia url-polkuja ja mieluiten samasta verkkotunnuksesta kuin henkilön sähköpostiosoite, joka lähettää sen. Joten jos lähetän sähköpostia [email suojattu] {$lang_domain} minun tilaajieni kuvia olisi elettävä saman alla {$lang_domain} verkkotunnus.
Tämä estää todennäköisyyden, että sähköpostiosoitteesi on harhaanjohtava roskapostikansioon, ja se näyttää myös ammattimaisemmalta.
Alt Tunnisteet on oltava
Jos et käytä tavallisesti tunnisteita (en tiedä miksi et halua), tarvitset sähköpostia. Monet sähköpostiasiakkaat eivät lataa kuvia oletuksena, ja ne ovat käyttäjän yläpuolelle. Alt-tunnisteet voivat auttaa kuvaamaan kuvaa ennen kuin käyttäjä näkee sen. Tämä on sekä helppokäyttöisyys että graceful backback niille, jotka eivät ole kiinnostuneita lataamaan kuvia heidän vastaanottamissaan sähköposteissa.
Rakennustuotedat ja testaus
Tuotantopohjaisiin sähköposteihin on sisällytettävä CSS-koodinsa. Upottaminen on prosessi, jossa määritetään tyylit itse elementissä sen sijaan, että linkitään ulkoisesta tyylitaulukosta. Säätiö sähköpostilla on kätevä rakentaa ominaisuus, joka tekee tämän sinulle. Lopulliset tiedostot kootaan ja minimoidaan dist- kansion sisällä.
Tuotantotiedostojen luomiseksi kannattaa tappaa kaikki jo käynnissä olevat palvelimet kirjoittamalla ctrl + c pääteohjelmasi. Sieltä kirjoita:
Bash $ npm run buildKun selaimessa avautuu sähköpostiviesti, sinun pitäisi nähdä sama kuin aiemmin. Mutta, jos tarkastelet tarkasti sivun lähdettä, näet koodin sekaan. Tämä on seurausta rakentaa prosessi ja olettaen, että kaikki näyttää hyvältä, on valmis käytettäväksi luonnossa.
Testaus
En voi korostaa tarpeeksi, kuinka tärkeää on testata mahdollisimman monta sähköpostiympäristöä kuin mahdollista. Suunnittelu näyttää todennäköisesti erilaiselta, mutta tavoitteena on luoda ratkaisu, joka näyttää ainakin yhdenmukaiselta ja luettavalta useimmilta alustoilta.
Voit käyttää kutsuttua työkalua Litmus testiä varten. Siellä ilmainen työkalun versio jonka avulla voit kopioida ja liittää koodisi ja lähettää sähköpostia itsellesi tai kollegallesi. Muista tehdä tämä vaihe. Lähetettyjä sähköpostiviestejä ei voida muokata sen jälkeen.