HTML και CSS στα μηνύματα ηλεκτρονικού ταχυδρομείου: Τι λειτουργεί το 2022;
Αναμφισβήτητα, μία από τις πιο συναρπαστικές πτυχές της ανάπτυξης Ιστού τα τελευταία χρόνια ήταν πολύ πιο σταθερό επίπεδο υποστήριξης για νέα πρότυπα HTML, CSS και ECMAScript (JavaScript) μεταξύ των προγραμμάτων περιήγησης Ιστού. Ωστόσο, δεν μπορεί να ειπωθεί το ίδιο για τα ηλεκτρονικά μηνύματα, παρά την εισαγωγή νέων δυνατοτήτων, όπως ερωτήματα πολυμέσων, flex, μονάδες rem και πολλά άλλα.
Ας δούμε μια ματιά σε μερικές από αυτές τις δυνατότητες και πώς μπορούμε να κάνουμε να λειτουργήσουμε για όλους τους πελάτες ηλεκτρονικού ταχυδρομείου, το 2022.
Εσωτερικό CSS
Αναμφίβολα, μία από τις πιο ενοχλητικές πτυχές της δημιουργίας email δεν πρέπει να δηλώνετε στυλ για κάθε μεμονωμένο στοιχείο του χαρακτηριστικού στυλ του (για παράδειγμα <element style=”style:value;”></element>), αλλιώς γνωστό ως ” ενσωματωμένο CSS ‘.
Ευτυχώς, το εσωτερικό CSS (δηλαδή τα στυλ γραμμένα σε ένα στοιχείο <style>) έχει τώρα περισσότερη υποστήριξη. Το εσωτερικό CSS είναι πολύ πιο αποτελεσματικό, καθώς μας δίνει τη δυνατότητα να συνδυάσουμε επιλογείς και να γράψουμε λιγότερο κώδικα που είναι πιο ευανάγνωστος.
Σύμφωνα με το Can I Email , το εσωτερικό CSS λειτουργεί στο 84,85% των σημερινών πελατών email , αλλά υπάρχουν ορισμένοι κανόνες που πρέπει να ακολουθηθούν για να συμβεί αυτό.
Ευτυχώς, όλοι οι κανόνες δεν μπορούν να συμμορφωθούν χρησιμοποιώντας δύο στοιχεία <head>/εισάγοντας το στοιχείο <style> στο δεύτερο.
Ωστόσο, ενώ οι μέρες του στυλ με χρήση αρχαίων χαρακτηριστικών XHTML (π.χ. <element align=”center”>) έχουν τελειώσει, η υποστήριξη για εσωτερικό CSS δεν είναι τόσο δυνατοί που θέλαμε, έτσι πολλοί προγραμματιστές email εξακολουθούν να επιλέγουν ενσωματωμένο CSS ανάλογα με το κοινό-στόχο.
Αξίζει να σημειωθεί ότι ορισμένες λειτουργίες (π.χ. ερωτήματα πολυμέσων και προσαρμοσμένες γραμματοσειρές) δεν μπορούν να «ενσωματωθούν», επομένως μια κοινή προσέγγιση για την κωδικοποίηση μηνυμάτων ηλεκτρονικού ταχυδρομείου είναι η χρήση του εσωτερικού CSS μόνο για προοδευτικές βελτιώσεις και ενσωματωμένου CSS για οτιδήποτε άλλο ( εκτός αν πρόθυμοι να χάσουν προσαρμοσμένες γραμματοσειρές και δροσερές διατάξεις, φυσικά).
Ερωτήματα μέσων
Το εσωτερικό CSS μας επιτρέπει να χρησιμοποιούμε ερωτήματα πολυμέσων, απαραίτητο συστατικό του responsive design. Χωρίς ερωτήματα πολυμέσων, τα μηνύματα ηλεκτρονικού ταχυδρομείου μπορούν να καταλήξουν να φαίνονται τρομερά γραμμικά, και ενώ δεν υπάρχει απολύτως τίποτα λάθος σε αυτό από μινιμαλιστική άποψη, η κάθε σχεδίαση δεν θα είναι σωστή επιλογή σε κάθε σενάριο.
Τα ερωτήματα πολυμέσων λειτουργούν μόνο στο 75,75% των σύγχρονων προγραμμάτων-πελατών ηλεκτρονικού ταχυδρομείου, γι’ αυτό συνιστούμε να σχεδιάσουμε ανταποκρινόμενες διατάξεις που υποβαθμίζονται σε κάθε διάταξη με πολύ κομψό τρόπο .
Επιπλέον, υπάρχουν ορισμένοι κανόνες που πρέπει να θυμάστε…
Αποφύγετε τα ένθετα ερωτήματα πολυμέσων
Περιορίστε τις συνθήκες στην οθόνη, ελάχιστο πλάτος και μέγιστο πλάτος ή παραλείψτε τις εντελώς (@media { … })
Όπως αναφέρθηκε προηγουμένως, τα ερωτήματα πολυμέσων δεν μπορούν να χρησιμοποιηθούν ενσωματωμένα. Πρέπει να εισάγετε ένα στοιχείο <style>, επομένως είναι πολύ πιθανό να χρησιμοποιήσετε τουλάχιστον ένα εσωτερικό CSS ακόμα και όταν το ενσωματωμένο CSS είναι η προεπιλεγμένη προσέγγιση σας.
Κατασκευή Ιστοσελίδων: Πακέτα και Λύσεις για Κάθε Επιχείρηση
Κατασκευή Ιστοσελίδων: Πακέτα και Λύσεις για Κάθε Επιχείρηση Η δημιουργία μιας ιστοσελίδας είναι ένα από τα πιο σημαντικά βήματα για την ανάπτυξη μιας επιχείρησης στον ψηφιακό κόσμο. Η παρουσία στο διαδίκτυο δεν είναι μόνο μια απαραίτητη στρατηγική για την προσέγγιση...
Κατασκευή Ιστοσελίδων στην Καλλιθέα: Επαγγελματική Στρατηγική για την Επιτυχία σας
Κατασκευή Ιστοσελίδων στην Καλλιθέα: Επαγγελματική Στρατηγική για την Επιτυχία σας Η δημιουργία μιας ιστοσελίδας είναι πλέον μια από τις πιο σημαντικές διαδικασίες για οποιονδήποτε επαγγελματία ή επιχείρηση που θέλει να επεκταθεί στο διαδίκτυο. Η Καλλιθέα, μια από τις...
SEO για Αρχαρίους: Αναλυτικός Οδηγός για την Αύξηση της Ορατότητάς σας στο Διαδίκτυο
SEO για Αρχαρίους: Αναλυτικός Οδηγός για την Αύξηση της Ορατότητάς σας στο Διαδίκτυο Η διαδικτυακή παρουσία είναι πιο σημαντική από ποτέ. Αν θέλεις να βελτιώσεις την ορατότητα της ιστοσελίδας σου και να αυξήσεις την επισκεψιμότητά της, το SEO (Search Engine...
ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΗ ΙΣΤΟΣΕΛΙΔΑ? ΠΑΤΗΣΤΕ ΕΔΩ!
ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΟ ΛΟΓΟΤΥΠΟ? ΠΑΤΗΣΤΕ ΕΔΩ!