Κωδικοποίηση διατρητικής κάρτας: το μυστικό της αλληλεπιδραστικής ηλεκτρονικής αλληλογραφίας
Το ηλεκτρονικό ταχυδρομείο προηγείται του Web περίπου 10 χρόνια (ανάλογα με το ποιοι μιλάτε) και την εποχή εκείνη ο ιστός έχει εξελιχθεί σε μια δυναμική, αλληλεπιδραστική οντότητα. Ωστόσο, το πιο συναρπαστικό πράγμα που μπορείτε να δείτε σε ένα ηλεκτρονικό ταχυδρομείο αυτές τις μέρες είναι ένα ωραίο ζωντανό GIF, και πήραμε εκείνους της δεκαετίας του '90.
Τώρα όλα αλλάζουν, αυτή είναι η αυγή του αλληλεπιδραστικού μηνύματος ηλεκτρονικού ταχυδρομείου. Τι γίνεται αν θα μπορούσατε να χρησιμοποιήσετε γκαλερί εικόνων σε μηνύματα ηλεκτρονικού ταχυδρομείου, σε καρτέλες ή σε διατάξεις πολλαπλών σελίδων; Τι γίνεται αν θα μπορούσατε να παίξετε ένα παιχνίδι, να διαβάσετε μια ζωντανή ροή twitter ή ακόμα και να ψωνίσετε, να επιλέξετε / επεξεργαστείτε στοιχεία και να τακτοποιήσετε απευθείας στο email σας;
Έχουν αρχίσει οι πελάτες ηλεκτρονικού ταχυδρομείου να υποστηρίζουν το JavaScript; Όχι. Και αυτό δεν είναι επέκταση, λήψη plugin, ή ακόμα και νέα εφαρμογή. Αυτό είναι όλα HTML και CSS! Και ως επί το πλείστον CSS2!
Κωδικοποίηση διατρητικής κάρτας
Λοιπόν, πώς να εντοπίσετε τις αλληλεπιδράσεις των χρηστών και να δημιουργήσετε πολύπλοκες λειτουργίες χωρίς JavaScript; Δημιούργησα μια τεχνική που καλώ την κωδικοποίηση της διάτρητης κάρτας. Αυτό βασικά χρησιμοποιεί μεγάλο αριθμό ραδιοφωνικών κουμπιών και στυλ CSS βάσει των : ελεγχόμενων τιμών αυτών των κουμπιών. Ένα απλό παράδειγμα είναι η διάταξη με καρτέλες:
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;}Δείτε αυτό το παράδειγμα στην εργασία: http://codepen.io/anon/pen/WQwagL
Όταν είναι επιλεγμένο το κουμπί επιλογής για # tab1 , εμφανίζεται το .tab1 . Όταν το κουμπί επιλογής δεν είναι επιλεγμένο, επανέρχεται στην προεπιλεγμένη τιμή. Επειδή αυτά τα κουμπιά επιλογής είναι όλα στην ίδια συστοιχία, μόνο μία μπορεί να ελεγχθεί κάθε φορά, αυτό σταματά να εμφανίζονται ταυτόχρονα πολλές καρτέλες.
Αυτή είναι μια αρκετά προσαρμόσιμη ιδέα. Αντικαταστήστε τις ετικέτες καρτελών με μικρογραφίες και το περιεχόμενο με εικόνες και έχετε μια απλή συλλογή εικόνων. Ή, μετακινήστε τις καρτέλες σε μια διάταξη πλοήγησης για να δημιουργήσετε μια ψεύτικη διάταξη πολλαπλών σελίδων.
Κατά την επιδιόρθωση ορισμένων σφαλμάτων σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου που χτίζω, είχα τα ραδιοφωνικά κουμπιά που ορίστηκαν για εμφάνιση και παρατήρησα μια ομοιότητα με παλιά ραδιοφωνικά κουμπιά / διάτρητη κάρτα IBM. Μόλις το κατάλαβα αυτό, μου επέτρεψε να επεκτείνω τη σκέψη μου: είναι απλά μια σειρά από ελεγμένες ή προεπιλεγμένες τιμές.
Θα μπορούσατε να το θεωρήσετε ως αληθινό / ψευδές, ή ένα / μηδέν. Το δυναμικό είναι τεράστιο.
Παιχνίδια στο ηλεκτρονικό ταχυδρομείο
Το πρώτο μου πείραμα ήταν η οικοδόμηση ενός παιχνιδιού. Η θεωρία είναι ότι ο παίκτης πρέπει να κάνει κλικ σε μια ετικέτα για να σημειώσει ένα σημείο. Όταν είναι επιλεγμένο, αυτό εμφανίζει επίσης την ετικέτα για το επόμενο κουμπί επιλογής και ούτω καθεξής.
Επίσης, πρόσθεσα μια ετικέτα για το προηγούμενο κουμπί επιλογής, ώστε να χάσετε και πόντους. Στη συνέχεια, για να το καταφέρω σε ένα παιχνίδι, έκανα κινούμενες ετικέτες για να κυκλοφορήσω, καθιστώντας τους πιο δύσκολο να χτυπήσουν και να το στυλ σε ένα παιχνίδι τύχης.
Παίξτε το παιχνίδι εδώ: http://codepen.io/M_J_Robbins/full/jpCKH/
Καλάθι αγορών μέσω ηλεκτρονικού ταχυδρομείου
Το επόμενο παράδειγμα είναι λίγο πιο περίπλοκο. Αυτός χρησιμοποιεί 117 κουμπιά επιλογής και 2 πλαίσια ελέγχου για να τον ελέγξει. Ορισμένες από τις λειτουργίες περιλαμβάνουν γκαλερί εικόνων, διάταξη πολλαπλών σελίδων, προσθήκη / αφαίρεση στοιχείων, επικύρωση φόρμας, δυναμικοί υπολογισμοί τιμών για το σύνολο των γραμμών, υποσύνολο φόρου, εκπτώσεις και συνολική τιμή. Όλα είναι χτισμένα σε HTML και CSS.
Η ιδέα εδώ είναι όταν κάνετε κλικ στο "ΑΓΟΡΑΣΤΕ ΤΩΡΑ", λειτουργεί ως φόρμα υποβολής και μεταφέρει τις λεπτομέρειες όλων των κουμπιών ελέγχου. Στη συνέχεια, η επιλεγμένη κάρτα θα χρεωθεί και τα επιλεγμένα προϊόντα θα αποσταλούν στην επιλεγμένη διεύθυνση, όλα χωρίς να επισκέπτονται τον ιστότοπο.
Υποστήριξη και περιορισμοί
Υπάρχουν ορισμένοι περιορισμοί σε αυτό, όπως θα περιμένατε από το ηλεκτρονικό ταχυδρομείο. Πρώτον, υπάρχει περιορισμός στο μέγεθος του αρχείου. Εάν το μήνυμα ηλεκτρονικού ταχυδρομείου υπερβαίνει τα 102kb, θα περικοπούν στο Gmail, στο Yahoo και στο Outlook.com. Επίσης, διατρέχει πολύ μεγαλύτερο κίνδυνο να επισημανθεί ως ανεπιθύμητο.
Θα πρέπει να σημειώσω ότι το όριο είναι μόνο για το HTML και το CSS που στέλνετε. Τα ληφθέντα στοιχεία, όπως εικόνες και γραμματοσειρές, δεν περιλαμβάνονται σε αυτό. Για να αντιμετωπίσουμε το πρόβλημα, παραβλέπουμε και ελαττώνουμε τον κώδικα μας. αλλά αυτό με τη σειρά του μπορεί να οδηγήσει σε κάποια λάθη, οπότε προσέξτε.
Στη συνέχεια, υπάρχουν όλα τα διαφορετικά ζητήματα απόδοσης σε διαφορετικά προγράμματα-πελάτες ηλεκτρονικού ταχυδρομείου, σε διαφορετικές συσκευές, σε διαφορετικά λειτουργικά συστήματα και σε διαφορετικά προγράμματα περιήγησης. Για να απλοποιήσουμε όλα αυτά, θέλουμε να καταργήσουμε όλους τους πελάτες ηλεκτρονικού ταχυδρομείου σε 3 ομάδες, Static, Limited και Interactive.
Στατικοί πελάτες : Outlook (Windows), Outlook.com, Gmail app
Αυτοί οι πελάτες απογυμνώνουν το λειτουργικό CSS, οπότε το ηλεκτρονικό ταχυδρομείο απλώς θα επιστρέψει σε μια απλή, στατική διάταξη. Ο τελικός χρήστης δεν πρέπει να παρατηρεί καμία διαφορά μεταξύ αυτών των αλληλεπιδραστικών μηνυμάτων ηλεκτρονικού ταχυδρομείου και των κανονικών μηνυμάτων ηλεκτρονικού ταχυδρομείου που λαμβάνουν καθημερινά.
Περιορισμένοι πελάτες: Gmail (webmail), Yahoo, AOL
Αυτοί οι πελάτες έχουν διαφορετικούς περιορισμούς στο CSS. Μερικά από τα πιο προχωρημένα πράγματα αποσπάται ή επεξεργάζεται από τους προεπεξεργαστές του προγράμματος-πελάτη ηλεκτρονικού ταχυδρομείου. αλλά εξακολουθούν να υποστηρίζουν κάποιες αλληλεπιδράσεις.
Διαδραστικοί πελάτες: Applemail, iOS, Android, γραμματοκιβώτιο
Αυτά έχουν τις πλήρεις καμπάνες και σφυρίχτρες. Υποστηρίζουν όλα τα παραπάνω και μερικές πολύ δροσερές νέες ιδέες στις οποίες εργάζομαι και εγώ. Τα καλά νέα είναι, με βάση τα στατιστικά στοιχεία από emailclientmarketshare.com , από 1,05 δισ. μηνύματα ηλεκτρονικού ταχυδρομείου που ανοίχτηκαν τον Αύγουστο, το 57% των μηνυμάτων ηλεκτρονικού ταχυδρομείου ανοίχτηκαν σε διαδραστικούς πελάτες και ένα επιπλέον 20% σε περιορισμένους πελάτες.
Έτσι, το 77% των χρηστών έχει τη δυνατότητα να βλέπει κάποιο επίπεδο αλληλεπιδραστικού μηνύματος ηλεκτρονικού ταχυδρομείου.
Τι έχει λοιπόν το μέλλον;
Όπως μπορείτε να δείτε, το ηλεκτρονικό ταχυδρομείο έχει τη δυνατότητα να είναι πολύ περισσότερο από το στατικό κείμενο και τις εικόνες. Έχουμε ήδη δει εταιρείες όπως το Nest και το B & Q χρησιμοποιώντας γκαλερί στα ηλεκτρονικά τους μηνύματα και ο Litmus έχει κάνει ένα μεγάλο φορτίο πειραμάτων (πειράματα όπως βίντεο φόντου, live twitter feed και ένα "find the golden ticket" giveaway).
Αυτή είναι μια πολύ συναρπαστική στιγμή για να είμαστε στο ηλεκτρονικό ταχυδρομείο, είμαστε περιορισμένοι μόνο από το βάθος της φαντασίας μας ... και το Outlook? Το Outlook εξακολουθεί να αποτελεί πόνο για την αντιμετώπιση ... και του χρόνου. όπως μπορείτε να φανταστείτε, αυτά χρειάζονται πολύ περισσότερο χρόνο για να οικοδομήσουμε από ένα κανονικό μήνυμα ηλεκτρονικού ταχυδρομείου.
Είμαστε περιορισμένοι μόνο από το βάθος της φαντασίας μας, την ανατροπή παλαιότερων πελατών ηλεκτρονικού ταχυδρομείου και το χρόνο που χρειάζεται για την κατασκευή των ηλεκτρονικών μηνυμάτων.
Προτεινόμενη χρήση εικόνας εικόνα ηλεκτρονικού ταχυδρομείου μέσω Shutterstock.