Πώς να σχεδιάσετε ένα ανταποκρινόμενο μήνυμα HTML
Τα τελευταία χρόνια, η αυξανόμενη χρήση των κινητών έχει προκαλέσει μια εξέλιξη, ή ίσως επανάσταση, με τον τρόπο που προσεγγίζουμε την προσφορά περιεχομένου στους χρήστες του διαδικτύου. Ο απώτερος στόχος είναι ένας υγρός, κινητός και μηχανισμός-agnostic ιστός, και ένα σχολείο σκέψης έχει αναδειχθεί ως το ευρύτερα ευνοημένο μέσο για το σκοπό αυτό: ανταποκρινόμενο σχεδιασμό. Ωστόσο, ενώ ο υπεύθυνος θεματοφύλακας έχει συγκεντρώσει ατμό, ο σχεδιασμός και η ανάπτυξη ηλεκτρονικού ταχυδρομείου έχει αγωνιστεί για να κρατήσει το ρυθμό.
Αυτό οφείλεται, εν μέρει, στο γεγονός ότι τα μηνύματα ηλεκτρονικού ταχυδρομείου HTML είναι ένα notoriously δύσκολο μέσο για να συνεργαστούν οι προγραμματιστές. Η αρχαϊκή τεχνολογία ηλεκτρονικού ταχυδρομείου πελάτη και η έλλειψη προτύπων έχουν καταστήσει άχρηστους πολλούς από τους κανόνες του σύγχρονου, σημασιολογικού κώδικα. Αλλά το ηλεκτρονικό ταχυδρομείο εξακολουθεί να είναι ένα σημαντικό κανάλι μάρκετινγκ πολύ σημαντικό για να το παραβλέψουμε: σε μια περίοδο έξι μηνών το 2012, ο Litmus ανέφερε ότι η αύξηση των μηνυμάτων ηλεκτρονικού ταχυδρομείου κατά 80% ανοίγει σε κινητές συσκευές. Την ίδια χρονιά, η παρακολούθηση της καμπάνιας αποκάλυψε ότι, για πρώτη φορά, η ανοιχτή ισοτιμία κινητού ηλεκτρονικού ταχυδρομείου τους είχε ξεπεράσει πραγματικά το desktop και το webmail.
Είναι προφανές ότι είναι σημαντικό να διεξάγετε την κατάλληλη ανάλυση του ακροατηρίου σας πριν λάβετε την απόφαση να επενδύσετε στη βελτιστοποίηση για κινητά. Αλλά ένα καλά εκτελούμενο σχεδιασμό ηλεκτρονικού ταχυδρομείου που ανταποκρίνεται μπορεί να εξασφαλίσει μια άριστη εμπειρία χρήστη τόσο για επιτραπέζιους όσο και για κινητούς χρήστες - και με ευρέως διαδεδομένη 4G ακριβώς πίσω από τη γωνία, η τάση προς το κινητό είναι αμείλικτη, οπότε γιατί να μην είναι απόδειξη;
Τετραγωνικό στύλο, στρογγυλή τρύπα
Εάν είχατε ποτέ την ατυχία να ανοίξετε ένα e-mail σταθερού πλάτους σε μια κινητή συσκευή τότε θα καταλάβετε την ανάγκη για ανταποκρινόμενο σχεδιασμό ηλεκτρονικού ταχυδρομείου. Οι διαστάσεις της έκρηξης οθόνης και των πολλών στηλών μπορούν να εμφανιστούν με σμίκρυνση, ώστε τα μεγέθη των γραμματοσειρών να μειωθούν στο σημείο της δυσανάγνωσης. Οι χρήστες μπορούν να μεγεθύνουν, αλλά στη συνέχεια απαιτούν συνεχώς και έντονα να μετακινηθούν οριζόντια από αριστερά προς τα δεξιά και πάλι πίσω για να διαβάσουν το περιεχόμενο. Οι συνδέσεις εμφανίζονται μικρές και συμφορημένες, χωρίς να λαμβάνονται υπόψη τα δάχτυλα λίπους στις οθόνες αφής. Και τα σχέδια χαμηλής αντίθεσης σε μικρά παράθυρα προβολής, τα οποία είναι αχνά για εξοικονόμηση ενέργειας, συχνά καθίστανται δυσανάγνωστα. Είναι σαφές ότι η βελτιστοποίηση για κινητά είναι σημαντική, αλλά ποιος είναι ο καλύτερος τρόπος για να το κάνετε αυτό;
Βέλτιστη πρακτική για κινητά
Πριν από τη σύνταξη μιας ενιαίας γραμμής κώδικα, η εξέταση χαρακτηριστικών σχεδίασης μπορεί να βελτιώσει σημαντικά την εμπειρία των χρηστών για όσους χρησιμοποιούν κινητά, παρόλο που αναμφισβήτητα αυτές είναι οι ενδεδειγμένες παραχωρήσεις ανεξάρτητα από το μέγεθος της οθόνης.
- Σαφές, σύντομο περιεχόμενο: οι μικρές οθόνες σημαίνουν ότι είναι πιο σημαντικό τώρα από ποτέ να εμπλακεί ο χρήστης όσο πιο αποτελεσματικά γίνεται.
- Διαμόρφωση μιας στήλης: η απλότητα είναι το κλειδί. Οι διαστάσεις που δεν είναι μεγαλύτερες από 640px θα υποβαθμιστούν χαριτωμένα. Μια μονή στήλη διασφαλίζει ότι δεν θα χαθεί εντελώς ολόκληρο το περιεχόμενο έξω από το παράθυρο προβολής κατά τη μεγέθυνση.
- Μια ενδιαφέρουσα γραμμή θέματος: αυτό είναι ένα από τα πιο αποτελεσματικά όπλα του εμπόρου ηλεκτρονικού ταχυδρομείου σε ένα υπερπληθυσμό εισερχομένων. Κρατήστε το σύντομο και γρήγορο.
- Μεγάλη έκκληση για δράση (CTA): μην τιμωρείτε τα δάχτυλα λίπους! Οι Οδηγίες Ανθρώπινης Διεπαφής του iOS της Apple συνιστούν μια ελάχιστη περιοχή στόχευσης 44 × 44 μονάδων.
- Μεγάλα μεγέθη γραμματοσειρών: βεβαιωθείτε ότι το μήνυμά σας μπορεί να διαβαστεί εύκολα.
- Προ-κεφαλίδα: άλλη περιοχή-κλειδί όταν πρόκειται για προβολή στα εισερχόμενα. Προσπαθήστε να αποφύγετε απλά την εμφάνιση του κειμένου "προβολή στο πρόγραμμα περιήγησης".
- Κείμενο αριστερού στοιχείου: υπάρχουν διάφοροι λόγοι για την ευθυγράμμιση σημαντικών στοιχείων στην αριστερή πλευρά της περιοχής περιεχομένου. (Η έρευνα για την παρακολούθηση των οφθαλμών υποδεικνύει ότι οι δυτικοί χρήστες εστιάζουν την προσοχή τους στην αριστερή πλευρά του περιεχομένου του ηλεκτρονικού ταχυδρομείου.) Αυτό δεν προκαλεί έκπληξη καθώς διαβάζουμε κείμενο από αριστερά προς τα δεξιά: Ορισμένα λειτουργικά συστήματα, ιδίως το Android, η οθόνη εμφανίζει μόνο το αριστερό μισό ενός μηνύματος ηλεκτρονικού ταχυδρομείου Από εργονομική άποψη, η πλειοψηφία των χρηστών θα είναι πιο εύκολο να αλληλεπιδράσει με τα στοιχεία που βρίσκονται στο κάτω αριστερό / μέσον της χειρός οθόνης.)
- Κάθετη ιεραρχία: η μειωμένη οθόνη ακίνητης περιουσίας θέτει περισσότερη πεποίθηση από ποτέ στην ιδέα του «fold». Σημαντικά CTA θα πρέπει να τοποθετούνται όσο πιο κοντά γίνεται στην κορυφή. αν δεν εμφανιστούν αμέσως, ίσως δεν θα χρησιμοποιηθούν.
- Χρησιμοποιήστε προσεκτικά τις εικόνες: μην υποθέσετε ότι θα προβληθούν εικόνες. Η εφαρμογή εγγενών μηνυμάτων ηλεκτρονικού ταχυδρομείου του iPhone θα προβάλει εικόνες από προεπιλογή, αλλά πολλοί πελάτες δεν θα το κάνουν.
Αυτές οι συμβουλές μπορούν να βελτιώσουν την εμπειρία των χρηστών για τους πελάτες κινητής τηλεφωνίας, αλλά μπορείτε, και ίσως θα πρέπει, να βελτιστοποιήσετε περαιτέρω. Χάρη στην αυξανόμενη υποστήριξη CSS3 μεταξύ των κινητών ηλεκτρονικών υπολογιστών ηλεκτρονικού ταχυδρομείου, είναι τώρα δυνατή η ανταπόκριση του σχεδιασμού ηλεκτρονικού ταχυδρομείου.
Ξεκινώντας
Όπως ανέφερα προηγουμένως, τα ηλεκτρονικά ταχυδρομεία HTML υποφέρουν από μια θλιβερή έλλειψη προτύπων - στους απροσδιόριστους, πολλά από τα οποία θα ακολουθήσουν θα είναι ένα ταξίδι πίσω στο χρόνο μέχρι τις πρώτες ημέρες της ανάπτυξης ιστοσελίδων. Οι διατάξεις πρέπει να διευθετηθούν με πίνακες λόγω των ξεπερασμένων μηχανών εμφάνισης HTML κάποιων πελατών ηλεκτρονικού ταχυδρομείου και το CSS πρέπει να εφαρμοστεί εν σειρά. Αρκετοί πελάτες ηλεκτρονικού ταχυδρομείου θα αγνοήσουν εντελώς τις δηλώσεις στυλ που έγιναν στο
τμήμα του εγγράφου.Υπάρχουν μερικά φανταστικά boilerplates διαθέσιμα, συστήνω Sean Powell είναι εξαιρετική HTML Αποστολή με Boilerplate ως αφετηρία, αλλά για χάρη της επίδειξης, ας αρχίσουμε από το μηδέν.
Για όσους από εσάς επιθυμείτε να ακολουθήσετε μαζί με τον κώδικα, μπορείτε κατεβάστε ένα πρότυπο για αυτό το άρθρο από εδώ.
Doctype
Τα Hotmail και το Gmail θα εισαγάγουν αυτόματα το XHTML 1.0 Strict doctype. Δεν είναι λοιπόν κακή ιδέα να το χρησιμοποιήσετε, αλλά είναι σημαντικό να ελέγξετε διεξοδικά τα μηνύματα ηλεκτρονικού ταχυδρομείου σας με και χωρίς ένα doctype, καθώς πολλοί πελάτες ηλεκτρονικού ταχυδρομείου απλώς θα τα καταργήσουν εντελώς.
Το ηλεκτρονικό ταχυδρομείο στο Acid έχει διεξαγάγει εκτενή έρευνα σχετικά με τα μηνύματα ηλεκτρονικού ταχυδρομείου εδώ.
Τα ερωτήματα των μέσων μαζικής ενημέρωσης
Τώρα μπορούμε να εισαγάγουμε μια μετα-ετικέτα viewport για να βεβαιωθούμε ότι το e-mail μας εμφανίζεται σωστά σε κινητές συσκευές. Είναι επίσης καλή ιδέα να καθορίσετε τον τύπο περιεχομένου και την ετικέτα τίτλου. Αυτά θα αγνοηθούν από πολλούς πελάτες ηλεκτρονικού ταχυδρομείου, αλλά είναι καλή ιδέα αν προγραμματίζετε να παρέχετε έναν σύνδεσμο σε μια "έκδοση του προγράμματος περιήγησης" του ηλεκτρονικού σας ταχυδρομείου.
Εφόσον ο τύπος περιεχομένου κατά πάσα πιθανότητα θα αγνοηθεί, είναι σκόπιμο να κωδικοποιήσετε όλους τους ειδικούς χαρακτήρες μέσα στο email σας ως οντότητες HTML.
Επίσης, θα συμπεριλάβουμε ένα ζευγάρι λογικών ρυθμίσεων για να διασφαλίσουμε ότι το ηλεκτρονικό μας ταχυδρομείο θα έχει τη μορφή που θέλουμε να είναι σε όλες τις πλατφόρμες.
Email subject or title Σημειώστε ότι η ετικέτα meta tag έχει αρνητικές συνέπειες για το Blackberry.
Τώρα μπορούμε να εισαγάγουμε τα ερωτήματα των μέσων ενημέρωσης. πόσοι εξαρτώνται από το επίπεδο εξειδίκευσης που επιθυμείτε να προσφέρετε σε κάθε συσκευή. Σε αυτό το παράδειγμα θα χρησιμοποιήσουμε μόνο ένα - κάνοντας τη λογική υπόθεση ότι οι περισσότερες συσκευές με μέγεθος οθόνης όχι μεγαλύτερο από 600px είναι μοντέρνες, κινητές και αφής και θα επωφεληθούν από το στυλ βελτιστοποίησης για κινητά. Επιπλέον, πρόκειται να υποθέσουμε ότι ακολουθώντας τις καθολικές τεχνικές βέλτιστης πρακτικής κινητών, όπως περιγράφηκαν νωρίτερα, οι χρήστες κινητών τηλεφώνων σε μεγαλύτερες συσκευές που λαμβάνουν τη διάταξη επιφάνειας εργασίας δεν θα αντιμετωπίσουν σημαντικά ζητήματα χρηστικότητας.
Χρησιμοποιούμε τα ερωτήματα των μέσων ενημέρωσης με τον ίδιο τρόπο που θα κάναμε κατά την οικοδόμηση ενός ιστότοπου. αν το μέγεθος προβολής βρίσκεται εντός των περιορισμών που έχουν οριστεί στο ερώτημα μέσων, τότε εφαρμόστε αυτό το στυλ.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Στο παραπάνω παράδειγμα λέμε ορισμένα στοιχεία με μια κλάση "hide" για εμφάνιση: καμία σε οθόνες μικρότερες από 600px. Η σημαντική ιδιότητα εξασφαλίζει ότι κάθε ενσωματωμένο στυλ θα αντικατασταθεί. Αυτή είναι η βασική αρχή του σχεδιασμού ηλεκτρονικού ταχυδρομείου που ανταποκρίνεται στις ερωτήσεις: πρωταρχικές εσωτερικές δηλώσεις στυλ που έγιναν στο σώμα του εγγράφου HTML με σημαντικές δηλώσεις στυλ που έγιναν στο
και στοχεύοντας αυτές τις εναλλαγές στυλ σε συγκεκριμένα μεγέθη οθόνης με ερωτήματα μέσων. Μια αιφνιδιαστική εξαίρεση είναι η εφαρμογή gmail που θα αγνοήσει τις δηλώσεις στυλ στο Ενότητα. Ωστόσο, η ευσυνείδητη αριστερά ευθυγράμμιση του περιεχομένου πρέπει να εξασφαλίζει ικανοποιητική εμπειρία χρήστη για τους οπαδούς του Gmail στη λίστα αλληλογραφίας σας. Προφανώς, αυτό δεν είναι μια ιδανική λύση, αλλά προς το παρόν, ο ανταποκρινόμενος σχεδιασμός ηλεκτρονικού ταχυδρομείου αφορά τόσο τους συμβιβασμούς όσο και τις τεχνικές αιχμής.Αξίζει να σημειωθεί ότι στοχεύουμε τα στοιχεία HTML μας με τους επιλογείς ιδιότητας CSS για να ξεπεράσουμε ένα αποδίδοντας το quirk του Yahoo! Ταχυδρομείο.
Επομένως, μπορούμε να δούμε ότι τα ερωτήματα των μέσων ενημέρωσης είναι ένα χρήσιμο εργαλείο για την επιλεκτική προβολή περιεχομένου, αλλά μπορούμε επίσης να τα χρησιμοποιήσουμε για να χειριστούμε άλλα χαρακτηριστικά της διάταξης μας. Ίσως το πιο σημαντικό, μπορούμε να περιορίσουμε το πλάτος της στήλης του ηλεκτρονικού ταχυδρομείου μας - το κλειδί για μια μεγάλη κινητή εμπειρία.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Τώρα έχουμε δηλώσει στην ερώτησή μας τα μέσα ότι όλοι οι πίνακες με μια κλάση "content_block" θα πρέπει να κλιμακώνονται στο πλάτος 92% σε συσκευές με μέγεθος οθόνης μέχρι 600px. Τώρα το μόνο που πρέπει να κάνουμε είναι να καθορίσουμε ένα χαρακτηριστικό εύρους πλάτους (600px) για κάθε πίνακα με μια κλάση content_block και έχουμε ένα δοχείο σταθερού πλάτους που στη συνέχεια κλιμακώνεται αναλογικά σε οθόνες κάτω από ένα συγκεκριμένο μέγεθος. Υπό την προϋπόθεση ότι τα χαρακτηριστικά πλάτους των παιδικών στοιχείων αυτού του κοντέινερ είναι όλα καθορισμένα ως ποσοστά, αυτό είναι ένα βασικό πρότυπο ηλεκτρονικού ταχυδρομείου που ανταποκρίνεται.
Προσέξτε κατά την απενεργοποίηση της αυτόματης προσαρμογής μεγέθους κειμένου webkit στην ετικέτα του σώματος, ως ελάχιστος κανόνας, προσπαθήστε να διατηρήσετε τα μεγέθη γραμματοσειράς πάνω από 12px ελάχιστα.
Κουμπιά
Οι προσκλήσεις για δράση (CTA) είναι συνήθως το πιο σημαντικό μέρος ενός ηλεκτρονικού ταχυδρομείου μάρκετινγκ. Πρέπει να είναι εντυπωσιακά, καλά τοποθετημένα και πάνω απ 'όλα χρήσιμα. Τα κριτήρια για μια μεγάλη CTA διαφέρουν ανάλογα με το αν πρόκειται να επιλεγεί από έναν δρομέα ή από ένα δάκτυλο. Αυτή είναι μια ισχυρή λειτουργία του ηλεκτρονικού ταχυδρομείου που ανταποκρίνεται. για να παρέχετε στους χρήστες μικρότερες συσκευές αφής με κουμπιά φιλικά προς το δάχτυλο που δεν επηρεάζονται από τους μηχανισμούς αποκλεισμού εικόνων.
Δυστυχώς, αυτά τα κουμπιά δεν μπορούν να εμφανιστούν καθολικά, καθώς βασίζονται σε ιδιότητες γεμίσματος που δεν υποστηρίζονται σε μερικούς υπολογιστές-πελάτες ηλεκτρονικού ταχυδρομείου.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Οι προαναφερόμενες διατυπώσεις στυλ θα μετατρέψουν τις ετικέτες με μια κλάση "κουμπί", όπως αυτή που ακολουθεί, σε μεγάλα, ελκυστικά, έγχρωμα κουμπιά που καλύπτουν το πλάτος της περιοχής περιεχομένου, εφόσον το πλάτος της οθόνης της συσκευής δεν είναι μεγαλύτερο από 600px. Η υποστήριξη CSS3 δεν πρέπει να αποτελεί πρόβλημα, καθώς μπορούμε να υποθέσουμε ότι η κινητή τεχνολογία που στοχεύουμε είναι λογικά σύγχρονη.