Punched Card Coding: Secret of Interactive Email
E-mail foregår på nettet omkring 10 år (afhængigt af hvem du snakker med) og på den tid har internettet udviklet sig til en dynamisk, interaktiv enhed. Men det mest spændende, du sandsynligvis vil se i en e-mail i disse dage, er et dejligt animeret gif, og vi fik dem i 90'erne.
Nå er alt ved at ændre sig, dette er begyndelsen til interaktiv email. Hvad hvis du kunne bruge billedgallerier i e-mail, fanebladelayouter eller multi-sidelayout? Hvad hvis du kunne spille et spil, læse et live twitter-feed eller endda shop, vælg / rediger elementer og checkout direkte i din email?
Har e-mail-klienter begyndt at støtte JavaScript? Nej. Og dette er ikke en udvidelse, plugin download eller endda ny app. Dette er alt HTML og CSS! Og for det meste CSS2!
Punched-kort kodning
Så hvordan går du til at registrere brugerinteraktioner og skabe kompleks funktionalitet uden JavaScript? Jeg lavede en teknik, jeg kalder stansekodning. Dette bruger grundlæggende et stort antal radioknapper og formaterer CSS baseret på : kontrollerede værdier for disse knapper. Et simpelt eksempel på dette er et faneblad layout:
HTML
Content for tab 1Content for tab 2Content for tab 3Content 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;}Se dette eksempel på arbejde: http://codepen.io/anon/pen/WQwagL
Når radioknappen til # tab1 er markeret, vises .tab1 . Når radioknappen ikke er markeret, vender den tilbage til standardværdien. Fordi disse radioknapper er alle i samme array, kan kun en afkrydses ad gangen, hvilket forhindrer at flere faner vises samtidigt.
Dette er ret et tilpasningsbegreb. Udskift fanebladet med miniaturebilleder og indholdet med billeder, og du har et simpelt billedgalleri. Du kan også flytte fanerne til et navigationslayout for at oprette et falsk flersidelayout.
Når jeg fik oprettet nogle fejl på en e-mail, jeg var ved at opbygge, havde jeg radioknapperne indstillet til at vise , og bemærkede en lighed med en gammel IBM-punched-radio-knapper / stempelkortbillede. Når jeg forstod det, tillod det mig at udvide min tænkning: det er bare en række kontrollerede eller standardværdier.
Du kan tænke på det som sandt / falsk eller en / nul. Potentialet er enormt.
Spil i email
Mit første forsøg var at opbygge et spil. Teorien er, at spilleren skal klikke på en etiket for at score et punkt. Når det er markeret, viser det også etiketten for den næste radioknap og så videre.
Jeg har også tilføjet en etiket til den forrige radioknap, så du kan også miste point. Derefter for at gøre det til et spil, animerede jeg etiketterne for at flytte rundt, hvilket gjorde dem sværere at ramme og stilte det til et whack-a-mole type spil.
Spil spillet her: http://codepen.io/M_J_Robbins/full/jpCKH/
Indkøbskurv i en e-mail
Det næste eksempel er lidt mere kompliceret. Denne bruger 117 knapper og 2 afkrydsningsfelter til at styre den. Nogle af funktionerne omfatter billedgallerier, multi side layout, tilføj / fjern elementer, form validering, dynamiske prisberegninger på linie total, subtotal skat, rabatter og den samlede pris. Alt er bygget i bare HTML og CSS.
Konceptet her er, når du klikker på "KØB NU", fungerer det som en formular, der indsendes og bærer detaljerne for alle de markerede radioknapper. Så bliver det valgte kort opladet og de udvalgte produkter sendes til den valgte adresse, alt uden at besøge hjemmesiden.
Støtte og begrænsninger
Der er et par begrænsninger til dette, som du ville forvente i e-mail. For det første er der en begrænsning på filstørrelsen. Hvis e-mailen overstiger 102 kb, bliver den klippet i Gmail, Yahoo og Outlook.com. Det løber også en meget højere risiko for at blive markeret som spam.
Jeg skal bemærke, at grænsen kun er til HTML og CSS, du sender. Downloadede aktiver som billeder og skrifttyper er ikke inkluderet i dette. For at hjælpe med at løse problemet, forklarer og reducerer vi vores kode; men det kan igen føre til nogle fejl, så vær forsigtig.
Så er der alle de forskellige renderingsproblemer på tværs af forskellige e-mail-klienter, forskellige enheder, forskellige operativsystemer og forskellige browsere. For at forenkle alt dette kan vi nedbryde alle e-mail-klienterne i 3 grupper, Static, Limited og Interactive.
Statiske klienter : Outlook (Windows), Outlook.com, Gmail app
Disse klienter striper den funktionelle CSS, så e-mailen vil bare falde tilbage til et simpelt statisk layout. Slutbrugeren skal ikke mærke nogen forskel mellem disse interaktive e-mails og de normale e-mails, de modtager hver dag.
Begrænsede klienter: Gmail (webmail), Yahoo, AOL
Disse kunder har forskellige begrænsninger på CSS. Nogle af de mere avancerede ting fjernes eller redigeres af e-mail-klientens forprocessorer; men de understøtter stadig nogle interaktioner.
Interaktive klienter: Applemail, iOS, Android, Postkasse
Disse har de fulde klokker og fløjter. De støtter alt ovenfor, og nogle meget seje nye ideer, jeg også arbejder på. Den gode nyhed er baseret på statistikker fra emailclientmarketshare.com , ud af 1,05 milliarder e-mails åbnet i august blev 57% af e-mails åbnet i interaktive kunder og yderligere 20% på begrænsede kunder.
Så 77% af brugerne har evnen til at se noget niveau af interaktiv email.
Så hvad holder fremtiden for?
Som du kan se, har e-mail mulighed for at være så meget mere end statisk tekst og billeder. Vi har allerede set virksomheder som Nest og B & Q ved hjælp af gallerier i deres e-mails, og Litmus har lavet en masse gode eksperimenter (eksperimenter som en video baggrund, live twitter feed og en "find den gyldne billet" giveaway).
Dette er en meget spændende tid at være i e-mail, vi er kun begrænset af dybden af vores fantasi ... og Outlook; Outlook er stadig en smerte at håndtere ... og tid; som du kan forestille dig, at disse tager meget længere tid at bygge end en almindelig e-mail.
Vi er kun begrænset af dybden af vores fantasi, udbredelsen af ældre email klienter og den tid det tager at bygge e-mails.