E-post foregår på nettet med rundt 10 år (avhengig av hvem du snakker med) og på den tiden har weben utviklet seg til en dynamisk, interaktiv enhet. Den mest spennende tingen du sannsynligvis vil se i en epost i disse dager er imidlertid en fin animert gif, og vi fikk de på 90-tallet.

Nå er alt forandret, dette er gryningen av interaktiv e-post. Hva om du kan bruke bildegallerier i e-post, flippede layouter eller flersideoppsett? Hva om du kan spille et spill, les en live twitter feed, eller til og med butikk, velg / rediger elementer og kassen direkte i din epost?

Har e-postklienter begynt å støtte JavaScript? Nei. Og dette er ikke en utvidelse, plugin-nedlasting eller til og med ny app. Dette er alt HTML og CSS! Og for det meste CSS2!

Punching-kortkoding

Så hvordan går det å oppdage brukerinteraksjoner og skape komplisert funksjonalitet uten JavaScript? Jeg opprettet en teknikk jeg kaller punched kortkoding. Dette bruker i utgangspunktet et stort antall radioknapper og utformer CSS basert på : merkede verdier av disse knappene. Et enkelt eksempel på dette er en tabb layout:

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;}

Se dette eksemplet på jobb: http://codepen.io/anon/pen/WQwagL

Når alternativknappen for # tab1 er merket, vises .tab1 . Når alternativknappen ikke er merket, går den tilbake til standardverdien. Fordi disse radioknappene er i samme rekkefølge, kan bare en av dem kontrolleres av gangen, dette stopper at flere faner blir vist samtidig.

Dette er ganske tilpasningsdyktig konsept. Erstatt fanens etikett med miniatyrbilder og innholdet med bilder, og du har et enkelt bildegalleri. Du kan også flytte kategoriene til et navigasjonslayout for å lage en falsk flersidig layout.

Når jeg fikset opp noen feil på en e-post jeg bygde, hadde jeg radioknappene satt til å vise , og la merke til en likhet med en gammel IBM-kortkort-radioknapp / stanset kortbilde. Når jeg forsto dette, tillot jeg meg å utvide min tenkning: det er bare en serie med kontrollerte eller standardverdier.

Du kan tenke på det som sant / falskt, eller en / null. Potensialet er stort.

Spill i e-post

Mitt første forsøk var å bygge et spill. Teorien er at spilleren må klikke på en etikett for å score et poeng. Når det er merket, viser det også etiketten for neste radioknapp og så videre.

Jeg har også lagt til en etikett for den forrige alternativknappen, slik at du også kan miste poeng. Så, for å gjøre det til et spill, animerte jeg etikettene for å bevege meg rundt, noe som gjorde dem vanskeligere å slå og stilte det til et whack-a-mole-type spill.

Spill spillet her: http://codepen.io/M_J_Robbins/full/jpCKH/

Handlekurv i en e-post

Det neste eksemplet er litt mer komplisert. Denne bruker 117 radioknapper og 2 boksene for å styre den. Noen av funksjonene inkluderer bildegallerier, flersidelayout, legge til / fjerne elementer, skjema validering, dynamiske prisberegninger på linje totalt, subtotal skatt, rabatter og totalpris. Alt er bygget i bare HTML og CSS.

RebelmailShoppingCart

Konseptet her er når du klikker på "KJØP NU", det fungerer som et skjema, og inneholder detaljene for alle de merkede radioknappene. Da blir det valgte kortet belastet og de valgte produktene sendes til den valgte adressen, uten å besøke nettstedet.

Støtte og begrensninger

Det er noen begrensninger for dette, som du forventer i e-post. For det første er det en begrensning på filstørrelsen. Hvis e-posten overstiger 102kb, blir den klippet i Gmail, Yahoo og Outlook.com. Også, det går mye høyere risiko for å bli flagget som spam.

Jeg bør merke at grensen bare er for HTML og CSS du sender. Nedlastede ressurser som bilder og skrifter er ikke inkludert i dette. For å hjelpe oss med å løse problemet, forklarer og bekrefter vi vår kode; men som i sin tur kan føre til noen feil, så vær forsiktig.

Deretter er det alle de varierende gjengivelsesproblemer på tvers av forskjellige e-postklienter, på forskjellige enheter, forskjellige operativsystemer og forskjellige nettlesere. For å forenkle alt dette, liker vi å bryte ned alle e-postklientene i 3 grupper, Static, Limited og Interactive.

Statiske klienter : Outlook (Windows), Outlook.com, Gmail app

Disse klientene fjerner funksjonell CSS, slik at e-posten bare kommer tilbake til et enkelt, statisk layout. Sluttbrukeren skal ikke merke noen forskjell mellom disse interaktive e-postene og de normale e-postene de mottar hver dag.

Begrensede klienter: Gmail (webmail), Yahoo, AOL

Disse kundene har varierende begrensninger på CSS. Noen av de mer avanserte tingene blir fjernet eller redigert av e-postklientens forprosessorer; men de støtter fortsatt noen interaksjoner.

Interaktive klienter: Applemail, iOS, Android, Postkasse

Disse har hele klokkene og fløyter. De støtter alt over, og noen veldig kule nye ideer jeg jobber med også. Den gode nyheten er basert på statistikk fra emailclientmarketshare.com , ut av 1,05 milliarder e-postmeldinger åpnet i august, ble 57% av e-postene åpnet i interaktive kunder, og ytterligere 20% på begrensede kunder.

Så, 77% av brukerne har muligheten til å se noe nivå av interaktiv e-post.

Så hva holder fremtiden?

Som du ser, har e-post potensialet til å være så mye mer enn statisk tekst og bilder. Vi har allerede sett selskaper som Nest og B & Q ved hjelp av gallerier i deres e-post, og Litmus har gjort en rekke flotte eksperimenter (eksperimenter som en video bakgrunn, live twitter feed og en "finne den gyldne billetten" giveaway).

Dette er en veldig spennende tid å være i e-post, vi er bare begrenset av dybden av vår fantasi ... og Outlook; Outlook er fortsatt en smerte å håndtere ... og tid; som du kan forestille deg, disse tar mye lenger tid å bygge enn en vanlig e-post.

Vi er bare begrenset av dybden av fantasien vår, rendingen av eldre e-postklienter, og tiden det tar å bygge e-postene.

Utvalgte bildebruk e-postbilde via Shutterstock.