Σκοτεινή λειτουργία για μηνύματα ηλεκτρονικού ταχυδρομείου: Τι είναι; Ποιοι πελάτες το υποστηρίζουν; Ποιος κώδικας χρειάζεται;

Το Dark mode κυκλοφόρησε πριν από λίγα χρόνια και η υιοθέτηση συνεχίζει να αυξάνεται. Σκοτεινή λειτουργία είναι πλέον διαθέσιμο σε macOS, iOS και Android, καθώς και μια σειρά από εφαρμογές όπως το Microsoft Outlook, το Safari, το Reddit, το Twitter, το Youtube, το Gmail και το Reddit. Ωστόσο, δεν υπάρχει πάντα πλήρης υποστήριξη σε κάθε ένα.

Η σκοτεινή λειτουργία μειώνει τη χρήση ενέργειας της οθόνης και αυξάνει την εστίαση. Ορισμένοι χρήστες δηλώνουν επίσης ότι αισθάνονται μείωση της καταπόνησης των ματιών, αλλά αυτό είναι αμφισβητήθηκε.

Πρόσφατα, αναπτύξαμε ένα πρότυπο μάρκετινγκ Cloud που ενσωματώνει τη λειτουργία Dark Mode στον κώδικά του που κάνει τις ενότητες email να αντιπαραβάλλονται δραματικά όταν προβάλλονται σε έναν πελάτη email. Είναι μια προσπάθεια που μπορεί να οδηγήσει σε επιπλέον αφοσίωση και αναλογίες κλικ προς αριθμό εμφανίσεων για τους συνδρομητές σας.

Δεν συμβαίνει συχνά ότι υπάρχει πρόοδος στην τεχνολογία email, οπότε είναι ωραίο να βλέπουμε την υιοθέτηση αυτής της εμπειρίας σε ολόκληρο τον κλάδο. Η κατανόηση των βέλτιστων πρακτικών, ο κώδικας για εφαρμογή, καθώς και η υποστήριξη πελατών είναι καθοριστικής σημασίας για την επιτυχία υλοποίησης της σκοτεινής λειτουργίας. Για το λόγο αυτό, η ομάδα στο Uplers δημοσίευσε αυτόν τον οδηγό υποστήριξη email σκοτεινής λειτουργίας.

Κωδικός email σκοτεινής λειτουργίας

Βήμα 1: Συμπεριλάβετε μεταδεδομένα για να ενεργοποιήσετε τη σκοτεινή λειτουργία σε πελάτες email - Το πρώτο βήμα είναι να ενεργοποιήσετε τη σκοτεινή λειτουργία στο email για συνδρομητές που έχουν ενεργοποιήσει τις ρυθμίσεις σκοτεινής λειτουργίας. Μπορείτε να το κάνετε συμπεριλαμβάνοντας αυτά τα μεταδεδομένα στο ετικέτα.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Βήμα 2: Συμπεριλάβετε στυλ σκοτεινής λειτουργίας για το @media (προτιμά το σχήμα-χρώμα: σκοτεινό) - Γράψτε αυτό το ερώτημα πολυμέσων στο ενσωματωμένο σας tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) και Outlook App (iOS). Εάν δεν θέλετε ένα περιγραμμένο λογότυπο στο email σας, μπορείτε να χρησιμοποιήσετε τάξεις .dark-img και .light-img όπως φαίνεται παρακάτω.

@media (prefers-color-scheme: dark ) { 
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; } 
.light-mode-image { display:none; display:none !important; } 
}

Βήμα 3: Χρησιμοποιήστε το πρόθεμα [data-ogsc] για να αντιγράψετε στυλ σκοτεινής λειτουργίας - Συμπεριλάβετε αυτούς τους κωδικούς ώστε το email να είναι συμβατό με σκοτεινή λειτουργία στην εφαρμογή Outlook για Android.

[data-ogsc] .light-mode-image { display:none; display:none !important; } 
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

Βήμα 3: Συμπεριλάβετε στυλ μόνο με σκοτεινή λειτουργία στο σώμα HTML - Οι ετικέτες HTML πρέπει να έχουν τις σωστές τάξεις σκοτεινής λειτουργίας.

<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" /> 
</div><!--<![endif]-->
</a> 
<!-- //Logo Section -->

Συμβουλές για σκοτεινή λειτουργία μέσω email και πρόσθετοι πόροι

Δούλεψα στο Martech Zone καθημερινά και εβδομαδιαία ενημερωτικά δελτία για την υποστήριξη της σκοτεινής λειτουργίας, φροντίστε να το κάνετε Εγγραφείτε εδώ. Όπως με την πλειονότητα της κωδικοποίησης email, δεν είναι μια απλή διαδικασία λόγω των διαφορετικών πελατών email και των ιδιόκτητων μεθοδολογιών κωδικοποίησης. Ένα ζήτημα που αντιμετώπισα ήταν εξαιρέσεις… για παράδειγμα, θέλετε λευκό κείμενο σε ένα κουμπί ανεξάρτητα από τη σκοτεινή λειτουργία. Το ποσό του κώδικα είναι λίγο γελοίο… Έπρεπε να έχω τις ακόλουθες εξαιρέσεις:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

Μερικοί πρόσθετοι πόροι:

• Ηλιοτρόπιο - ο απόλυτος οδηγός για σκοτεινή λειτουργία για τους εμπόρους email.
• Παρακολούθηση καμπάνιας - ο οδηγός προγραμματιστών για σκοτεινή λειτουργία για email.

Προβολή διαδραστικού Infographic