تم إطلاق الوضع المظلم قبل بضع سنوات فقط ويستمر اعتماده في النمو. وضع الظلام متوفر الآن عبر macOS و iOS و Android بالإضافة إلى مجموعة من التطبيقات بما في ذلك Microsoft Outlook و Safari و Reddit و Twitter و Youtube و Gmail و Reddit. ومع ذلك ، لا يوجد دائمًا دعم كامل عبر كل منهما.
يقلل الوضع الداكن من استخدام طاقة الشاشة ويزيد التركيز. يذكر بعض المستخدمين أيضًا أنهم يشعرون بتراجع في إجهاد العين ، ولكن هذا تم استجوابه.
لقد طورنا مؤخرًا قالب Marketing Cloud الذي أدمج Dark Mode في الكود الخاص به والذي يجعل أقسام البريد الإلكتروني متناقضة بشكل كبير عند عرضها في عميل بريد إلكتروني. إنه جهد قد يؤدي إلى زيادة المشاركة ونسب النقر إلى الظهور للمشتركين.
ليس هناك تقدم في كثير من الأحيان في تكنولوجيا البريد الإلكتروني ، لذلك من الجيد أن نرى تبني هذه التجربة عبر الصناعة. يعد فهم أفضل الممارسات والتعليمات البرمجية المراد تنفيذها بالإضافة إلى دعم العملاء أمرًا بالغ الأهمية لنجاح تنفيذ الوضع المظلم. لهذا السبب ، نشر الفريق في Uplers هذا الدليل لـ دعم البريد الإلكتروني في الوضع المظلم.
رمز البريد الإلكتروني في الوضع الداكن
الخطوة 1: قم بتضمين البيانات الوصفية لتمكين الوضع المظلم في عملاء البريد الإلكتروني - تتمثل الخطوة الأولى في تمكين الوضع المظلم في البريد الإلكتروني للمشتركين الذين تم تشغيل إعدادات الوضع المظلم لديهم. يمكنك القيام بذلك عن طريق تضمين هذه البيانات الوصفية في ملف بطاقة شعار.
<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 (iOS). إذا كنت لا تريد شعارًا محددًا في بريدك الإلكتروني ، فيمكنك استخدام فئات .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] لتكرار أنماط الوضع الداكن - قم بتضمين هذه الرموز حتى يتوافق البريد الإلكتروني مع الوضع المظلم في تطبيق 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 -->إرسال تلميحات حول الوضع الداكن بالبريد الإلكتروني وموارد إضافية
كنت أعمل على Martech Zone النشرات الإخبارية اليومية والأسبوعية لدعم الوضع المظلم ، تأكد من ذلك اشترك هنا. كما هو الحال مع معظم ترميز البريد الإلكتروني ، فهي ليست عملية بسيطة بسبب عملاء البريد الإلكتروني المختلفين ومنهجيات الترميز الخاصة بهم. كانت إحدى المشكلات التي واجهتها هي الاستثناءات ... على سبيل المثال ، تريد نصًا أبيض على زر بغض النظر عن الوضع المظلم. كمية الشفرة سخيفة بعض الشيء ... كان علي أن يكون لدي الاستثناءات التالية:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } بعض الموارد الإضافية:
- صبغة عباد الشمس - الدليل النهائي للوضع المظلم لجهات التسويق عبر البريد الإلكتروني.
- CampaignMonitor - دليل المطورين إلى الوضع المظلم للبريد الإلكتروني.
عرض Uplers Interactive Infographic
