Kaip sukurti puikiai atrodančius interaktyvius HTML el. Laiškus

Kai socialinės žiniasklaidos platformos ir komunikacijos kanalai tęsiasi, galite pradėti galvoti, ar HTML el. Paštas vis dar turi vietą šiame pasaulyje. Tačiau rinkodaros duomenų įmonė „Custoria“ praneša, kad nors klientų įsigijimo per „Facebook“ rodikliai išliko gana stabilūs, įsigijimo el. Paštu rodikliai per pastaruosius ketverius metus išaugo keturis kartus . Atrodo, kad sėkmingo el. Pašto gudrybė yra ta, kad naujienlaiškiai atrodytų gerai.

Peržiūrėkite pridedamą šios pamokos vaizdo įrašą:

Su tyrimais, kurie tai rodo 47 procentai el. Laiškų atidaromi mobiliuosiuose įrenginiuose , jūsų el. pašto adresas yra daug, kad padarytumėte gerą įspūdį mobiliajame telefone. Tačiau, turėdami esamus sprendimus, pastebėjome, kad stengiamės modifikuoti tikslinius šablonus arba išradome reagavimo metodus, specialiai pritaikytus šiai terpei. Be to, bet koks mūsų sukurtas sprendimas turėjo palaikyti „Microsoft Outlook“ - klientą, pagarsėjusį dėl to, kad, atrodo, jų nepaisė savo nuožiūra.



Supratome, kad šablonai nėra atsakymas, todėl nusprendėme kurti Rašalas , reaguojanti el. pašto sistema. Panašus į Fondas , mūsų reaguojanti žiniatinklio sistema „Ink“ suteikia mums patikimą, patikrintą pagrindą, kuriuo remdamiesi galime kurti reaguojančius el. laiškus, be to, pateikdami integruotus vartotojo sąsajos elementus, skirtus greitai kurti prototipus.

Mes pradedame nuo vizualinio dizaino, kai tik sukuriame naują rašalu pagrįstą el. Laišką. Dažnai tai yra tik paprastas „Sharpie“ ar lentos eskizas, tačiau prieš pradedant svarbu įsivaizduoti, ką statote.

Šioje pamokoje sukursime rinkodaros el. Laišką fiktyviam el. Prekybos startuoliui „Bootsies & Hat“ (B&H). Rinkodaros el. Laiške turėtų būti: prekės ženklo spalvos ir logotipas, kelios socialinės žiniasklaidos nuorodos, kad būtų galima tiksliai įvertinti ir fizinį adresą, ir nuoroda „atsisakyti prenumeratos“, kad būtų laikomasi CAN-SPAM akto.

kaip sendinti nuotrauką Photoshop
  • Žr. Šios pamokos demonstracinę versiją čia .

Mes norime suskirstyti rinkodaros sprogimą į tris turinio skiltis. El. Laiškas prasidės pranešimu ir sultingu herojaus atvaizdu, į kurį atkreipsite skaitytoją. Antrame skyriuje bus suasmenintas pasiūlymas. Trečiajame skyriuje bus pateikiamos naujausių mūsų produktų nuotraukos ir aprašymai.

Naujų produktų naujienlaiškio dalis, matoma darbalaukio kliente. Vaizdai žlunga ant teksto viršaus, žiūrint juos mobiliajame įrenginyje

Naujų produktų naujienlaiškio dalis, matoma darbalaukio kliente. Vaizdai žlunga ant teksto viršaus, žiūrint juos mobiliajame įrenginyje

Skaldyk ir užkariauk

Tada mes suskaidome dizainą į atskirus kodo komponentus. Rašalas turi tris pagrindines tam skirtas struktūras:

  • Konteineris : saugo el. laišką 580 taškų pločio turinio srityje ir sutelkia jį kūne.
  • Eilutė : suskirsto turinį vertikaliai ir į turinio sekcijas.
  • Stulpelis : padalija eiles horizontaliai. Darbalaukyje kiekviena eilutė yra padalinta į 12 stulpelių, o sekcija apima n stulpelių. Mobiliuosiuose įrenginiuose stulpelių sekcijos kiekviena tampa sava eilė ir išsiplečia iki 100% pločio.

Mes dažnai spausdiname vizualų dizainą ir piešiame tinklelio dalis su „Sharpies“. Stebėtinai naudingas komentuojamas struktūros žemėlapis, kurio reikia laikytis koduojant.

Rašalo nustatymas

Dabar, kai jau supratome, ką koduosime, atėjo laikas išspausdinti „Ink“. Rašalas išleidžiamas gana dažnai, todėl patariame tai padaryti patraukti naujausią versiją kai tik pradedate naują projektą. Atsisiuntę „Ink“, atidarykite ZIP failą ir nukopijuokite boilerplate.html į savo teksto rengyklę.

Katilo plokštės failas jau susiejamas su „Ink CSS“. Tai taip pat suteikia pagrindinį jūsų pranešimo pagrindą, pvz., Metažymas ir kai kurias pakavimo lenteles, kad jūsų el. Laiškas būtų jautrus.

Pirmiausia nustatome el. Pašto fono spalvą. Kai kurie pašto klientai pašalina kūno žymą, turėtumėte tai nustatyti .kūnas

taip pat ant faktinio kūno:

body, table.body { background: #002b36; }

Struktūrą pradedame a

konteineris su konteinerį laikyti antraštę. Pavyzdžiui:

Šio indo viduje gaminame a

su eilės ir a klase
su abiem vyniojamasis popierius ir paskutinis klasės. Paprastai yra kiekvienai eilutės stulpelio daliai, paskutinė klasė taikoma paskutinei eilėje. Kadangi yra tik viena stulpelio sekcija (12 stulpelių pločio), yra tik vienas apvalkalas, kuris turi gauti paskutinę klasę:

kaip gerai mokėti skaitmeninį meną

Vyniojimo viduje

, sukuriame stulpelį su nauju , šį kartą su klasėmis dvylika ir stulpeliai . Tačiau, be vieno turinio
, mums reikia antros, tuščios su klase išplėtėjas . Plėtiklis verčia stulpelio dalį tapti visu pločiu mažuose ekranuose:

Norėdami užpildyti naujienlaiškių skilties turinį, įdėkite etiketės viduje

Bootsies & Hat

stulpelio sekcijos pirmoje eilutėje, o kai kurie tekstai atskirti
arba

žymos antroje. Su , naudodami HTML atributus būtinai nurodykite tikslų aukštį ir plotį. Taip pat pateikite galiojantį dokumentą viskas atributas:

Amazing deals on bootsies and hats for the whole family!

Visi ūgio , pločio ir viskas atributai yra būtini, nes kai kurie klientai pagal numatytuosius nustatymus blokuoja vaizdus arba kitaip atsisako juos keisti pagal CSS. Konteinerių išskyrimas su fono spalva yra paprasta: pridėkite vieną klasę ir vieną fono spalva CSS taisyklė. Tačiau tinkamas paminkštinimas yra sudėtingesnis. Rašalas turi įmontuotą pagalbininkų klasę, teksto klaviatūra , kurį galima pritaikyti turiniui

stulpelių, kad tuo pasirūpintumėte.

Naujų produktų skiltis

Kaip ir naujienlaiškių skiltis, mes kuriame konteinerį

ir trys eilės
s skyriui „nauji produktai“. Kiekvienoje lentelės eilutėje yra dvi vyniojamasis popierius
s. Tik antrasis turi klasę paskutinis :



Įterpti naują stulpeliai stalas su klase keturi į pirmąjį įvyniojimą. Tada įdėkite produkto vaizdą į turinį

. Antrojo įvyniojimo viduje įdėkite a stulpeliai klasės lentelė aštuoni ir užpildykite turinį su aprašymo tekstu ir galbūt nuoroda į svetainę. Užuot naudoję teksto klaviatūra klasę šį kartą, mes naudosime kairysis teksto klaviatūra ant atvaizdo smėlis dešiniojo teksto klaviatūra ant teksto s. Kryptinio teksto užpildymo klasės dideliuose ekranuose užklijuoja tik išorinį kraštą, tačiau, kai mobiliuosiuose įrenginiuose stulpeliai tampa viso pločio, paminkštinamos abi pusės. „Naujienlaiškio“ ir „naujo produkto“ skilčių skyrius prasideda tuo pačiu konteineris> eilutė> pakuotė> stulpeliai struktūra. Tačiau ši skiltis atrodys kaip atskira produktų skyriaus eilutė, išskyrus trijų ir devynių stulpelių padalijimą.

Visas naujienlaiškio maketas suskaidomas į vieną stulpelį mobiliajame įrenginyje

Visas naujienlaiškio maketas suskaidomas į vieną stulpelį mobiliajame įrenginyje

Rašalo matomumo klasės leidžia pasirinktinai rodyti arba slėpti elementus skirtingose ​​platformose. Šiuo atveju norime tik atvaizdą (mūsų įsivaizduojamo kliento profilio nuotrauką) parodyti darbalaukyje, o antraštę norime sukeisti su kliento vardu mobiliuosiuose įrenginiuose. Norėdami paslėpti vaizdą:

Norėdami pakeisti antraštes, įdėkite dvi

žymos turinyje

, vienas su slėptuvė mažam klasės ir vienas su rodyti mažiems klasė:

Whoa, it's a deal just for you!

Hey Eric!

Poraštės eilutės žymėjimas reikalauja kelių pakeitimų, kad būtų užpildytas visas naršyklės plotis. Pirmiausia nustatykite skyrių, kaip įprasta, konteinerį už eilės ribų. Kitas jungiklis eilutė ir konteinerį klases, palikdami vyniotinį

ant vidinio stalo. Kitas, išoriniam stalui pridėkite klasę centre ir an sulygiuokite centrą atributas. Galiausiai pridėkite a centre žyma tarp dviejų lentelių.

Pavyzdžiui:

Dabar eilutė tęsiasi per visą kūno plotį, o tai reiškia, kad galite ją stilizuoti pridėdami fono spalvą. Turinys vis dar ribojamas 580 taškų konteinerį. Įvedę kodą, svarbu jį kruopščiai išbandyti.

Dabar turite įrankius, leidžiančius kurti reaguojančius el. Laiškus, kurie puikiai atrodys beveik bet kur.

Žodžiai : Erikas Morrisas

Šis straipsnis iš pradžių pasirodė tinklinis žurnalas 252 leidimas.