Punched Card Coding: Secret of Interactive Email
E-post predates webben med cirka 10 år (beroende på vem du pratar med) och på den tiden har webben utvecklats till en dynamisk, interaktiv enhet. Men det mest spännande som du sannolikt kommer att se i ett mail idag är ett trevligt animerat gif, och vi fick dem på 90-talet.
Nåväl ändras allt, det här är gryningen av interaktivt mail. Vad händer om du kan använda bildgallerier i e-post, flikformatlayouter eller flera sidlayouter? Vad händer om du kan spela ett spel, läs ett live twitter-flöde, eller till och med butik, välj / redigera objekt och kassa direkt i din e-post?
Har e-postklienter börjat stödja JavaScript? Nej. Och det här är inte en förlängning, plugin-nedladdning eller till och med ny app. Det här är allt HTML och CSS! Och mestadels CSS2!
Kodkortkodning
Så hur går det att upptäcka användarinteraktioner och skapa komplex funktionalitet utan JavaScript? Jag skapade en teknik som jag kallar förkortad kortkodning. Detta använder i grunden ett stort antal radioknappar och utformar CSS baserat på : kontrollerade värden på dessa knappar. Ett enkelt exempel på detta är en tabblayout:
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 detta exempel på jobbet: http://codepen.io/anon/pen/WQwagL
När radioknappen för # tab1 är markerad visas .tab1 . När radioknappen inte är markerad återgår den till standardvärdet. Eftersom dessa radioknappar är alla i samma grupp kan endast en kontrolleras i taget, vilket hindrar att flera flikar visas samtidigt.
Detta är ett ganska anpassningsbart koncept. Byt fliketiketterna med miniatyrbilder och innehållet med bilder och du har ett enkelt bildgalleri. Eller flytta flikarna till en navigeringslayout för att skapa en falsk flersidig layout.
När jag fixade några buggar på ett e-postmeddelande som jag byggde hade jag radioknapparna inställda att visa och märkte likhet med en gammal IBM-punched-kortknapp / punched-kortbild. När jag förstod det så fick jag mig att expandera mitt tänkande: det är bara en serie kontrollerade eller standardvärden.
Du kan tänka på det som true / false, eller one / zero. Potentialen är enorm.
Spel i e-post
Mitt första experiment var att bygga ett spel. Teorin är att spelaren måste klicka på en etikett för att få poäng. När den är markerad visar det också etiketten för nästa radioknapp och så vidare.
Jag har också lagt till en etikett för föregående radioknapp så att du kan förlora poäng också. Sedan, för att göra det till ett spel, animerade jag etiketterna för att flytta runt, vilket gjorde dem svårare att träffa och utformade det till ett whack-a-mole-typspel.
Spela spelet här: http://codepen.io/M_J_Robbins/full/jpCKH/
Varukorg i ett e-postmeddelande
Nästa exempel är lite mer komplicerat. Den här använder 117 knappar och 2 kryssrutor för att styra den. Några av funktionerna inkluderar bildgallerier, flera sidlayout, lägg till / ta bort objekt, formulärvalidering, dynamiska prisberäkningar på rad totalt, subtotal skatt, rabatter och totalt pris. Allt är byggt i bara HTML och CSS.
Konceptet här är när du klickar på "KÖP NU", det fungerar som ett formulär skickar och innehåller detaljerna för alla kontrollerade radioknappar. Då laddas det valda kortet och de valda produkterna skickas till den valda adressen, alla utan att besöka webbplatsen.
Stöd och begränsningar
Det finns några begränsningar för detta, som du förväntar dig i e-post. För det första finns det en begränsning på filstorlek. Om e-postmeddelandet överstiger 102kb kommer det att klippas i Gmail, Yahoo och Outlook.com. Det löper också en mycket högre risk att bli flaggad som skräppost.
Jag bör notera att gränsen är bara för HTML och CSS du skickar. Nedladdade tillgångar som bilder och teckensnitt ingår inte i detta. För att hjälpa till med att lösa problemet, förklarar och beräknar vi vår kod. men som i sin tur kan leda till vissa fel, var så försiktig.
Då finns det alla de olika reningsproblemen i olika e-postklienter, på olika enheter, olika operativsystem och olika webbläsare. För att förenkla allt detta vill vi bryta ner alla e-postklienterna i tre grupper, Static, Limited och Interactive.
Statiska klienter : Outlook (Windows), Outlook.com, Gmail app
Dessa kunder tar bort funktionell CSS, så e-postmeddelandet kommer bara att falla tillbaka till en enkel, statisk layout. Slutanvändaren bör inte märka någon skillnad mellan dessa interaktiva e-postmeddelanden och de normala e-postmeddelandena de mottar varje dag.
Begränsade kunder: Gmail (webmail), Yahoo, AOL
Dessa kunder har olika begränsningar på CSS. Några av de mer avancerade sakerna tas bort eller redigeras av e-postklientens förprocessorer; men de stöder fortfarande vissa interaktioner.
Interaktiva klienter: Applemail, iOS, Android, Mailbox
Dessa har fulla klockor och visselpipor. De stöder allt ovan, och några väldigt coola nya idéer jag jobbar med. Den goda nyheten är baserad på statistik från emailclientmarketshare.com , av 1,05 miljarder e-postmeddelanden öppnade i augusti öppnades 57% av e-postmeddelanden i interaktiva kunder och ytterligare 20% på begränsade kunder.
Så, 77% av användarna har möjlighet att se någon nivå av interaktivt e-postmeddelande.
Så vad håller framtiden?
Som du kan se har e-post potential att vara så mycket mer än statisk text och bilder. Vi har redan sett företag som Nest och B & Q med hjälp av gallerier i sina e-postmeddelanden, och Litmus har gjort en massa stora experiment (experiment som en video bakgrund, live twitter feed och en "hitta den gyllene biljetten" giveaway).
Det här är en mycket spännande tid att vara i e-post, vi är bara begränsade av djupet av vår fantasi ... och Outlook; Utsikterna är fortfarande en smärta att hantera ... och tid; som du kan tänka dig, det tar mycket längre tid att bygga än en vanlig e-post.
Vi är bara begränsade av djupet av vår fantasi, rendringen av äldre e-postklienter och den tid det tar att bygga e-postmeddelandena.