Κοινοποίηση σε:
Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
Linkedin
HTML και CSS στα μηνύματα ηλεκτρονικού ταχυδρομείου: Τι λειτουργεί το 2022;

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 είναι η προεπιλεγμένη προσέγγιση σας.

 

Τι είναι το No-Code; Τα καλύτερα εργαλεία για να ξεκινήσετε

Τι είναι το No-Code; Τα καλύτερα εργαλεία για να ξεκινήσετε

Τι είναι το No-Code; Τα καλύτερα εργαλεία για να ξεκινήσετεΠέρασαν οι εποχές που η δημιουργία ενός ψηφιακού προϊόντος, όπως ένας ιστότοπος, ένα ενημερωτικό δελτίο ή μια εφαρμογή, ήταν διαθέσιμο μόνο σε όσους είχαν συγκεκριμένες δεξιότητες ή ένα αξιόλογο χρηματικό ποσό...

Κορυφαίες τάσεις σχεδίασης ιστοσελίδων για το 2022

Κορυφαίες τάσεις σχεδίασης ιστοσελίδων για το 2022

Κορυφαίες τάσεις σχεδίασης ιστοσελίδων για το 2022οιες τάσεις στο σχεδιασμό ιστοσελίδων θα κυριαρχήσουν το 2022; Με ποια στυλ και τεχνικές πρέπει να εξοικειωθείτε ώστε οι δημιουργίες σας να είναι φρέσκες και μοντέρνες όλο το χρόνο;Διασκεδαστικά, αισιόδοξα σχέδια Τα...

ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΗ ΙΣΤΟΣΕΛΙΔΑ? ΠΑΤΗΣΤΕ ΕΔΩ!

ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΟ ΛΟΓΟΤΥΠΟ? ΠΑΤΗΣΤΕ ΕΔΩ!

Κοινοποίηση σε:
Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
Linkedin
Call Now Button