Punched kort kóðun: leyndarmál gagnvirka tölvupósts

Netfangið predates á vefnum um það bil 10 ár (eftir því hver þú talar við) og á þeim tíma hefur vefurinn þróast í dynamic, gagnvirka aðila. Hins vegar er mest spennandi hlutur sem þú ert líklegri til að sjá í tölvupósti þessa dagana, það er gott líflegur gif, og við fengum þau á 90s.

Jæja núna breytist allt, þetta er dögun gagnvirkra tölvupósts. Hvað ef þú gætir notað myndasafn í tölvupósti, flipaútgáfum eða fjölbreyttum síðuuppsetningum? Hvað ef þú gætir spilað leik, lestu live twitter fæða, eða jafnvel búð, veldu / breyttu atriði og afpöntun beint í tölvupóstinum þínum?

Hafa tölvupóstþjónar byrjað að styðja JavaScript? Nei. Og þetta er ekki viðbót, viðbót við tappi eða jafnvel ný forrit. Þetta er allt HTML og CSS! Og að mestu leyti CSS2!

Punched kort kóðun

Svo hvernig ferðu að því að uppgötva notendaviðskipti og skapa flókna virkni án JavaScript? Ég bjó til tækni sem ég hringi í kóðað kortakóðun. Þetta notar í grundvallaratriðum fjölda fjarskiptahnappa og stíll CSS byggt á : köflóttum gildum þessara hnappa. Einfalt dæmi um þetta er flipinn skipulag:

HTML

Tab 1Tab 2Tab 3Tab 4Content 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;}

Sjá þetta dæmi í vinnunni: http://codepen.io/anon/pen/WQwagL

Þegar hnappurinn fyrir # flipann 1 er valinn er þá sýnt .tab1 . Þegar ekki er hakað við útvarpshnappinn fer það aftur í sjálfgefið gildi. Vegna þess að þessi útvarpshnappar eru allt í sama fylki er aðeins hægt að athuga einn í einu, þetta truflar að margar flipar séu sýndir í einu.

Þetta er alveg aðlögunarhæft hugtak. Skiptu um flipann með smámyndum og efni með myndum og þú hefur einfaldan myndasafn. Eða, flettu flipunum í leiðsöguútgáfu til að búa til falsa margföldunarútlit.

Þegar ég lagði upp smá galla á tölvupósti sem ég var að byggja upp, hafði ég útvarpstakkana sett á skjánum og tekið eftir líkingu við gömlu, stafrænu kortaútvarpshnappa / hlaðinn kortafyrirtæki. Þegar ég skildi þetta, leyfði ég mér að auka hugsun mína: það er bara röð af merktum eða sjálfgefnum gildum.

Þú gætir hugsað um það sem satt / false, eða einn / núll. Möguleiki er gríðarlegur.

Leikir í tölvupósti

Fyrsta tilraunin mín var að byggja upp leik. Kenningin er sú að leikmaðurinn þarf að smella á merki til að skora stig. Þegar það er valið sýnir það einnig merki fyrir næstu útvarpshnappinn og svo framvegis.

Ég bætti líka við merki fyrir fyrri hnappinn svo að þú gætir tapað stigum líka. Þá, til að gera það í leik ég hreyfði merkiin til að hreyfa sig, gera þeim erfiðara að lemja og stilla það í aðgerð sem gerðist á svipaðan hátt.

Spila leikinn hér: http://codepen.io/M_J_Robbins/full/jpCKH/

Innkaupakörfu í tölvupósti

Næsta dæmi er svolítið flóknara. Þessi notar 117 útvarpshnappar og 2 gátreitir til að stjórna því. Sumir af the lögun fela í sér myndasöfn, multi blaðsíðu skipulag, bæta við / fjarlægja atriði, formi staðfestingu, dynamic verð útreikninga á heildar lína, subtotal skatta, afslætti og heildarverð. Allt það er byggt á bara HTML og CSS.

Hugmyndin hérna er þegar þú smellir á "BUY NOW", það virkar sem eyðublaði og sendir upplýsingar um öll hakað útvarpstakkana. Þá verður valið kort aflað og völdu vörur sendar, á völdu netfangið, allt án þess að heimsækja vefsíðuna.

Stuðningur og takmarkanir

Það eru nokkur takmörk á þessu, eins og þú myndir búast við í tölvupósti. Í fyrsta lagi er takmörkun á skráarstærð. Ef tölvupósturinn fer yfir 102kb verður hann klipptur í Gmail, Yahoo og Outlook.com. Einnig er það miklu meiri hætta á að fá merki sem ruslpóstur.

Ég ætti að hafa í huga að takmörk eru bara fyrir HTML og CSS sem þú sendir. Sóttar eignir, svo sem myndir og leturgerðir, eru ekki innifalin í þessu. Til að hjálpa til við að komast í vandræðið ljúka við og minnka kóðann okkar; en það getur aftur leitt til nokkrar villur, svo vertu varkár.

Þá eru öll mismunandi flutningsvandamál milli mismunandi tölvupóstþjóna, á mismunandi tækjum, mismunandi stýrikerfum og mismunandi vöfrum. Til að einfalda þetta allt, viljum við brjóta niður alla tölvupóst viðskiptavini í 3 hópa, Static, Limited og Interactive.

Static viðskiptavinir : Outlook (Windows), Outlook.com, Gmail app

Þessir viðskiptavinir ræma hagnýtur CSS, þannig að tölvupósturinn muni bara falla aftur í einfaldan, truflanir skipulag. Endanotandinn ætti ekki að taka eftir neinum munum á milli þessara gagnvirka tölvupósts og venjulegs tölvupósts sem þeir fá á hverjum degi.

Takmarkaðar viðskiptavinir: Gmail (vefpóstur), Yahoo, AOL

Þessir viðskiptavinir hafa mismunandi takmarkanir á CSS. Sumir af the fleiri háþróaður hluti er fjarlægt eða breytt af tölvupósti viðskiptavinur preprocessors; en þeir styðja ennþá nokkrar milliverkanir.

Gagnvirkir viðskiptavinir: Applemail, IOS, Android, Pósthólf

Þessir hafa fullt bjalla og flaut. Þeir styðja allt hér að ofan, og sumir mjög flottar nýjar hugmyndir sem ég er að vinna að líka. Góðu fréttirnar eru byggðar á tölum frá emailclientmarketshare.com , af 1.05 milljörðum tölvupósti opnað í ágúst, var 57% af tölvupósti opnað í gagnvirkum viðskiptavinum og 20% fleiri á takmörkuðum viðskiptavinum.

Þannig hafa 77% notenda getu til að sjá nokkra gagnvirka tölvupóst.

Svo hvað heldur framtíðinni?

Eins og þú sérð hefur tölvupóstur möguleika á að vera svo mikið meira en truflanir textar og myndir. Við höfum nú þegar séð fyrirtæki eins og Nest og B & Q með galleríum í tölvupósti þeirra og Litmus hefur gert mikið af frábærum tilraunum (tilraunir eins og myndbandsmynd, lifandi twitter fæða og "finna gullna miðann" uppljóstrun).

Þetta er mjög spennandi tími til að vera í tölvupósti, við erum aðeins takmarkaðir við dýpt ímyndunarafls okkar ... og Outlook; Útsýni er ennþá sársauki til að takast á við ... og tíma; eins og þú getur ímyndað þér, þetta tekur miklu lengri tíma að byggja en venjulegur tölvupóstur.

Við erum aðeins takmörkuð við dýpt ímyndunarafls okkar, rás eldri tölvupóstþjóna og þann tíma sem það tekur að byggja upp tölvupóstinn.

Valin mynd notar tölvupóstsmynd um Shutterstock.

css email hönnun gagnvirkt tölvupóstur css fyrir tölvupóst tilrauna tölvupóst hönnun rebelemail

Punched Card Coding: Leyndarmál Interactive Email