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 είναι η προεπιλεγμένη προσέγγιση σας.
Βασικά στοιχεία του καλού σχεδιασμού ιστοσελίδων
Βασικά στοιχεία του καλού σχεδιασμού ιστοσελίδωνΑνακαλύψτε βασικές αρχές σχεδιασμού ιστοσελίδων για να κατανοήσετε τα βασικά στοιχεία του καλού σχεδιασμού ιστοσελίδων.Σκοπός Πριν ξεκινήσετε να δημιουργήσετε έναν ιστότοπο, μάθετε τι θέλει να πετύχει ο πελάτης σας με...
Επανασχεδιασμός ιστοσελίδας 2023
Επανασχεδιασμός ιστοσελίδας 2023Η τεχνολογία και οι συμπεριφορές των καταναλωτών προχωρούν και αλλάζουν πιο γρήγορα από ποτέ. Έτσι, αν ανακαλύψετε ότι αναρωτιέστε "πότε πρέπει να αρχίσω να σκέφτομαι τον επανασχεδιασμό ιστοτόπου;Η τεχνολογία σας είναι ξεπερασμένη Κάθε...
Web design trends για το 2023
Web design trends για το 2023Μία ιστοσελίδα αιχμής είναι ένας σίγουρος τρόπος για να προσελκύσετε πελατες για την επιχείρησή σας. Αυτό δεν σημαίνει ότι κάθε δικηγορικό γραφείο χρειάζεται ένα σχέδιο τελευταίας τεχνολογίας. Μην ανησυχείτε, σας έχουμε καλύψει. Εδώ είναι...
ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΗ ΙΣΤΟΣΕΛΙΔΑ? ΠΑΤΗΣΤΕ ΕΔΩ!
ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΟ ΛΟΓΟΤΥΠΟ? ΠΑΤΗΣΤΕ ΕΔΩ!