Sähköposti kestää verkkoa jo noin 10 vuoden ajan (riippuen siitä, kenen kanssa puhut) ja tuolloin Web on kehittynyt dynaamiseksi, interaktiiviseksi kokonaisuudeksi. Kuitenkin jännittävin asia, jonka todennäköisesti näet sähköpostissa näinä päivinä, on mukava animoitu gif, ja saimme ne 90-luvulla.

No nyt kaikki muuttuu, tämä on vuorovaikutteisen sähköpostin aamunopeus. Mitä jos voit käyttää kuvagallerioita sähköpostissa, välilehtinäkymissä tai monisivuisissa asetteluissa? Entä jos voit pelata peliä, lukea live-twitter-syötteen tai jopa tehdä ostoksia, valita / muokata kohteita ja kassalla suoraan sähköpostiisi?

Onko sähköpostiasiakkaat alkanut tukea JavaScriptia? Ei. Tämä ei ole laajennus, laajennus tai jopa uusi sovellus. Tämä on kaikki HTML ja CSS! Ja enimmäkseen CSS2!

Reikäkorttikoodaus

Joten miten aiot havaita käyttäjän vuorovaikutusta ja luoda monimutkaisia ​​toimintoja ilman JavaScriptia? Luin tekniikan, jota kutsuin rei'itettyyn korttikoodaukseen. Tämä periaatteessa käyttää suurta määrää valintanäppäimiä ja tyylejä CSS, joka perustuu näiden painikkeiden tarkistettuihin arvoihin. Yksinkertainen esimerkki tästä on välilehdet:

HTML

Content for tab 1
Content for tab 2
Content for tab 3
Content for tab 4

CSS

input { display:none; }label {display:block;float:left;width:148px;border:1px solid #ccc;text-align:center;padding:1em 0;}.tab{width:598px;height:1em;padding:2em 0;border:1px solid #ccc;text-align:center;display:none;clear:both;}#tab1:checked ~ .tab1,#tab2:checked ~ .tab2,#tab3:checked ~ .tab3,#tab4:checked ~ .tab4 {display:block;}

Katso tämä esimerkki työssä: http://codepen.io/anon/pen/WQwagL

Kun # -välilehden valintanappi on valittuna, näkyviin tulee .tab1 . Kun valintanäppäintä ei ole valittu, se palaa oletusarvoonsa. Koska nämä valintanäppäimet ovat samassa ryhmässä, vain yksi voidaan tarkistaa kerrallaan, tämä estää useiden välilehtien näyttämisen kerralla.

Tämä on varsin mukautuva käsite. Vaihda välilehtien tarrat pikkukuvien ja sisältöjen kanssa kuvilla ja sinulla on yksinkertainen kuvagalleria. Voit myös siirtää välilehdet navigointiasemaan, jotta voit luoda väärän monisivuisen ulkoasun.

Vahvistettaessa joitain vikoja sähköpostissa rakennettiin, minulla oli valintanäppäimet asetettu näyttämään ja huomannut muistutuksen vanhaan IBM: n rei'itettyyn korttipainikkeeseen / rei'itettyyn korttikuvaan. Kun ymmärsin tämän, se antoi minun laajentaa ajatteluani: se on vain sarja tarkistettuja tai oletusarvoja.

Voisit kuvitella sen olevan totta / epätosi tai yksi / nolla. Mahdollisuus on valtava.

Pelit sähköpostissa

Ensimmäinen kokeiluni oli pelin rakentaminen. Teoria on, että pelaajan on napsautettava etiketti pisteet pisteeseen. Kun se on valittuna, se näyttää myös seuraavan valintanäppäimen etiketin ja niin edelleen.

Olen myös lisännyt etiketin edelliseen valintanappiin, jotta voit myös menettää pisteitä. Sitten, jotta voisin tehdä pelin, animoin tarroja liikkumaan, mikä teki niistä vaikeammaksi lyödä ja muotoilemaan sen möhkäin-tyyppiseen peliin.

Pelaa peliä täältä: http://codepen.io/M_J_Robbins/full/jpCKH/

Ostoskori sähköpostilla

Seuraava esimerkki on hieman monimutkaisempi. Tämä käyttää 117 valintanäppäintä ja 2 valintaruutua sen hallitsemiseksi. Joitakin ominaisuuksia ovat kuvagalleria, monisivuinen ulkoasu, lisäys / poistaminen, lomakkeen validointi, dynaamiset hintalaskelmat rivillä yhteensä, veronalennukset, alennukset ja kokonaishinta. Kaikki se on rakennettu vain HTML ja CSS.

RebelmailShoppingCart

Konsepti on tässä, kun napsautat "OSTA NYT", se toimii lomakkeen lähetyksessä ja sisältää kaikki tarkistetut valintanäppäimet. Sitten valittu kortti veloitetaan ja valitut tuotteet lähetetään valittuun osoitteeseen, kaikki vierailematta verkkosivuilla.

Tuki ja rajoitukset

Tähän on muutamia rajoituksia, kuten sähköpostissasi odotettaisiin. Ensinnäkin tiedostokoko on rajoitettu. Jos sähköposti ylittää 102 kt: n, se leikataan Gmailissa, Yahooessa ja Outlook.comissa. Lisäksi sillä on paljon suurempi riski saada liput roskapostiksi.

Minun pitäisi huomata, että raja on vain HTML ja CSS lähetät. Ladatut aineistot, kuten kuvat ja fontit, eivät sisälly tähän. Jotta voisimme kiertää ongelman, heikentää ja minimoida koodimme. mutta se voi johtaa virheisiin, joten ole varovainen.

Tällöin kaikki eri sähköpostiasiakkaat, erilaiset laitteet, erilaiset käyttöjärjestelmät ja erilaiset selaimet vaihtelevat. Tämän yksinkertaistamiseksi haluamme jakaa kaikki sähköpostiasiakkaat 3 ryhmään, Static, Limited ja Interactive.

Staattiset asiakkaat : Outlook (Windows), Outlook.com, Gmail-sovellus

Nämä asiakkaat poistavat toiminnallisen CSS: n, joten sähköposti palaa yksinkertaiseen, staattiseen ulkoasuun. Loppukäyttäjän ei pitäisi huomata eroa näiden vuorovaikutteisten sähköpostiviestien ja tavanomaisten sähköpostiviestien välillä, joita he saavat päivittäin.

Rajoitetut asiakkaat: Gmail (webmail), Yahoo, AOL

Näillä asiakkailla on vaihtelevia rajoituksia CSS: ssä. E-mail-asiakkaan esikäsittelyohjelmat poistavat tai muokkaavat joitain kehittyneistä asioista; mutta he edelleen tukevat joitakin vuorovaikutuksia.

Interaktiiviset asiakkaat: Applemail, iOS, Android, postilaatikko

Näillä on täydet kelloja ja pillejä. He tukevat kaiken edellä, ja joitakin hienoja uusia ideoita, joita teen myös. Hyvä uutinen perustuu tilastoihin emailclientmarketshare.com , elokuussa avatuista 1,05 miljardista sähköposteista 57 prosenttia sähköpostista avattiin vuorovaikutteisissa asiakkaissa ja vielä 20 prosenttia rajoitetuissa asiakkaissa.

Joten 77% käyttäjistä kykenee näkemään interaktiivisen sähköpostin tasoa.

Joten mitä tulevaisuus pitää?

Kuten näet, sähköpostilla voi olla paljon enemmän kuin staattinen teksti ja kuvat. Olemme jo nähneet Nest: n ja B & Q: n käyttäjiä gallerioissa sähköpostissaan, ja Litmus on tehnyt paljon kokeiluja (kokeilut kuten videotausta, live-twitter-syöte ja "löytää kultainen lippu" -luovutus).

Tämä on erittäin jännittävä aika olla sähköpostissa, meitä rajoittaa vain mielikuvituksen syvyys ... ja Outlook; Näkymät ovat edelleen kipu käsitellä ... ja aikaa; kuten voitte kuvitella, nämä rakentavat paljon kauemmin kuin tavalliset sähköpostit.

Meidät vain rajoittavat mielikuvituksen syvyyttä, vanhempien sähköpostiasiakkaiden höyryttämistä ja aikaa, jonka avulla sähköpostin rakentaminen kestää.

Esitetty kuva käyttää sähköpostikuva kautta Shutterstock.