أفضل طريقة لترميز ألوان وتدرجات خلفية البريد الإلكتروني بتنسيق HTML

نشرت: 2021-04-22

يبدو ترميز ألوان الخلفية وكأنه مهمة بسيطة ، أليس كذلك؟ الحقيقه؟ حتى هذا الجزء البسيط من التصميم به بعض المزالق ، وهناك بعض الاعتبارات التي يجب إجراؤها للحصول على عرض متسق عبر عملاء البريد الإلكتروني.

وليس المطورون وحدهم هم من يحتاجون إلى إرضاء آلهة البريد الوارد. مع اكتساب الوضع الداكن زخمًا ، هناك المزيد من البيئات التي يجب أن تكون على دراية بها ، والتي سيتطلب بعضها من مصممي البريد الإلكتروني توخي مزيد من الحذر عند تطبيق ألوان الخلفية في تصميماتهم.

ستتعلم في منشور المدونة هذا:

فوائد ألوان الخلفية
كيفية ترميز خلفية ملونة صلبة (+ دعم عميل البريد الإلكتروني)
كيفية ترميز خلفية متدرجة (+ دعم عميل البريد الإلكتروني)
نصائح لتحسين الوضع الداكن

لماذا استخدام ألوان الخلفية في البريد الإلكتروني؟

يلبي وضع إستراتيجية لون الخلفية في مكانه بعض الاحتياجات عندما يتعلق الأمر برفع مستوى برنامج البريد الإلكتروني الخاص بك. من وجهة نظر فنية ، لا يضيف تطبيق ألوان الخلفية أي وقت تحميل إلى رسائل البريد الإلكتروني الخاصة بك ، وستظل مرئية حتى عند إيقاف تشغيل الصور. يمكنهم المساعدة في فصل المحتوى ، أو إرسال الرسائل ، أو فصل البريد الإلكتروني عن الآخرين في صندوق الوارد الخاص بالمشترك ، مما قد يؤدي إلى زيادة المشاركة بين جمهورك.

تميز في البريد الوارد

يمكنك إنشاء تجربة افتتاحية مؤثرة - مثل هذا البريد الإلكتروني من Blurb.

منطقة البطل تحزم لكمة. تترك الخلفية البرتقالية الجريئة تأثيرًا من خلال التباين مع اللون الأزرق للشعار ، مما يرفع من هوية العلامة التجارية. بمجرد أن يمر القارئ متجاوزًا منطقة البطل ، يتم وضع المحتوى الثانوي على خلفية بيضاء ، مما يوفر تجربة قراءة مثالية لأجزاء أكبر من النسخ.

مثال على رسالة بريد إلكتروني دعاية مغالى فيها عن لون الخلفية — المصدر: رسائل البريد الإلكتروني الجيدة حقًا

أقسام منفصلة

إذا كنت قد تلقيت بريدًا إلكترونيًا طويلاً ، فإن اللون هو طريقة رائعة لفصل كتل المحتوى المختلفة بصريًا بحيث تبدو أكثر قابلية للفهم.

يمكن أن تكون رسائل البريد الإلكتروني الترويجية من مقهى ستاربكس العملاقة طويلة جدًا ، مع وجود العديد من العروض الترويجية في بريد إلكتروني واحد. لمساعدة الأقسام في التميز عن بعضها البعض ، يتم استخدام ألوان خلفية مختلفة.

مثال على البريد الإلكتروني لستاربكس لألوان الخلفية — عرض هذا البريد الإلكتروني في Litmus

رفع هوية العلامة التجارية

تعد التدرجات جزءًا من هوية العلامة التجارية لشركة Marketing Agency 1973 Ltd ، ولهذا السبب غالبًا ما تجد تدرجات خطية جريئة في خلفية رسائل البريد الإلكتروني الخاصة بهم. يمكن لتدرجات الخلفية أن تجعل التراكيب تبدو أكثر ديناميكية ، بل وتشجع المشترك على التمرير.

1973 Ltd مثال على البريد الإلكتروني لخلفية التدرج — المصدر: رسائل البريد الإلكتروني الجيدة حقًا

إذن ما هي أفضل طريقة لإدخال هذه التقنيات في تطوير بريدك الإلكتروني؟ طلبت من زميلي في الفريق ومطور رسائل البريد الإلكتروني Litmus ، Carin Slater ، تزويدنا بمعلومات داخلية حول ترميز الخلفيات الصلبة والمتدرجة.

كيفية ترميز لون خلفية بريد إلكتروني بتنسيق HTML صلب

يمكن ترميز ألوان الخلفية بطرق متعددة وفي أماكن متعددة. ولكن لا يتم دعم كل طريقة بشكل متساوٍ بين عملاء البريد الإلكتروني. فيما يلي مخطط سريع لكود نمط الخلفية وطريقة رمز اللون التي تعمل مع أفضل عملاء البريد الإلكتروني.

دعم عميل البريد الإلكتروني لألوان الخلفية

كود النمط	خصائص CSS "الخلفية" و "لون الخلفية"				سمة HTML "bgcolor"
رمز اللون	6 أرقام عرافة	3 أرقام عرافة	RGB	RGBA	6 أرقام عرافة	3 أرقام عرافة	RGB	RGBA
بريد أبل 14	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Outlook 2016 (macOS 10.12.6)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Outlook 13 و 16 و 19 (Windows 10)	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا
Outlook Office 365 (Windows 10)	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا
Outlook Office 365 (نظام التشغيل Mac OS 10.15)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
بريد Windows 10	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا
تطبيق Gmail (Android 10)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
تطبيق Gmail (iOS 13.4.1)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Outlook (Android 7.0)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Outlook (iOS 12.0)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Samsung Mail (Android 7.0)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
iPad 11 Air (Gen 4 iOS 14.2)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
iPhone 12 (iOS 14.2)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
بريد AOL (Edge)	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا
كومكاست (إيدج)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Gmail (Chrome)	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
مكتب 365	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Outlook.com	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✓ نعم	✘ لا	✘ لا
Web.de	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا
ياهو! بريد	✓ نعم	✓ نعم	✓ نعم	✘ لا	✓ نعم	✘ لا	✘ لا	✘ لا

نعلم جميعًا أن عملاء البريد الإلكتروني يمكن أن يكونوا مزعجين بعض الشيء. إذن ما هي أفضل طريقة لترميز ألوان الخلفية بحيث تعمل عبر جميع عملاء البريد الإلكتروني؟ سأوجهك خلال توصيتنا ولماذا.

1. استخدم الجداول وخلايا الجدول

توجد أربعة أماكن في HTML يمكنك إضافة لون للخلفية:

<الجسم>
<div>
<جدول>
<td>

المكان الأكثر أمانًا لإضافة لون الخلفية هو على جدول أو خلية جدول.

يتم حذف علامة <body> في Yahoo و AOL ، لذا فإن أي لون خلفية مطبق هناك لن يظهر في عملاء البريد الإلكتروني هؤلاء. ووضع لون على غلاف <div> بعد الجسم سيعمل في كل مكان باستثناء عملاء Outlook لأنهم لا يدعمون علامات <div> في رسائل البريد الإلكتروني.

للحصول على أوسع نطاق من دعم عميل البريد الإلكتروني ، قم بلف بريدك الإلكتروني بالكامل بعلامة <table> عرض 100٪ وضع لون الخلفية هناك. واستخدم خلايا الجدول <td> لأقسام بريدك الإلكتروني حتى تتمتع بقدر أكبر من المرونة في تلوين كتل محتوى معينة.

2. أضف لونًا بخاصية CSS وأكواد ألوان HEX أو قيم RGB

يمكن ترميز ألوان الخلفية بعدة طرق:

استخدام سمة bgcolor HTML
استخدام لون الخلفية لخاصية CSS
استخدام الخلفية لخاصية اختصار CSS
باستخدام كود اللون الست عشري المكون من 6 أرقام
استخدام رمز اللون السداسي العشري المكون من 3 أرقام
استخدام قيم ألوان RGB

فيما يتعلق بكيفية وضع لون الخلفية على الجدول أو خلية الجدول ، يجب عليك استخدام خاصية CSS.

باختبار طريقتين لخصائص CSS - لون الخلفية والخلفية - وجدنا أنهما لهما نفس النتائج المتسقة طالما أنك تضيف اللون فقط (بدون صور). وفقًا لموقع caniemail.com ، فإن استخدام خاصية الخلفية لأي شيء بخلاف إضافة لون قد يؤدي إلى عدم ظهور لونك.

لم تكن سمة bgcolor HTML جيدة في Outlook ، مع دعم غير متسق لرموز HEX المكونة من 3 أرقام. وقد أدى استخدام قيم RGB و RGBA إلى اللون غير الصحيح ، أو إسقاط اللون تمامًا.

إليك اختبار لون الخلفية الخاص بنا باستخدام الطرق المختلفة في Outlook حتى تتمكن من رؤية ما يلي بنفسك:

اختبار Litmus حول كيفية عرض ألوان الخلفية في بريد HTML الإلكتروني في Outlook — شاهد هذا الاختبار في Litmus →

في عملاء البريد الإلكتروني الآخرين ، تم عرض رمز HEX المكون من 3 أرقام بشكل جيد ، ولكن أدت قيم RGB و RGBA إلى ظهور ألوان غير صحيحة عند تطبيقها على سمة bgcolor HTML.

اختبار Litmus حول كيفية عرض ألوان الخلفية في بريد HTML الإلكتروني في Apple Mail — شاهد هذا الاختبار في Litmus →

بعد كل الاختبارات التي أجريناها ، توصلنا إلى نتيجة واحدة: التمسك بخصائص CSS ، واستخدم أكواد HEX المكونة من 3 أو 6 أرقام أو قيم RGB. هؤلاء عملوا عبر جميع عملاء البريد الإلكتروني.

لم يكن تقديم التعتيم باستخدام alpha لقيمة RGBA مدعومًا في Outlook أو Web.de أو GMX.de ، ولكن كان لديه دعم لائق بخلاف ذلك.

لذلك يجب أن يبدو الرمز النهائي الخاص بك شيئًا مثل هذا لتلوين الخلفية الكاملة للجدول:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #427CA9;">

أو أضف لونًا إلى خلية جدول معينة:

<td style="background-color: #427CA9;">

وهذا كل شيء حقًا!

ضمان الجودة اختبر ألوان خلفية بريدك الإلكتروني والمزيد

هل فعلت ذلك بشكل صحيح؟ شاهد كيف يبدو بريدك الإلكتروني في عملاء البريد الإلكتروني الأكثر شيوعًا - حتى تتمكن من ضمان تجربة مشترك خالية من الأخطاء على العلامة التجارية.

تعلم كيف →

كيفية إنشاء خلفية متدرجة

عندما تريد رفع ألوان الخلفية قليلاً ، حاول إضافة التدرجات اللونية.

لا يتم دعم تدرجات CSS في كل مكان ، ولكن هناك احتياطات تجعل من الممكن عرض التدرج اللوني في جميع عملاء البريد الإلكتروني تقريبًا .

دعم عميل البريد الإلكتروني للخلفيات المتدرجة

عميل البريد الإلكتروني	دعم التدرجات الخطية CSS	دعم التدرجات الخطية لـ CSS وتدرجات VML والصور الاحتياطية
بريد أبل 14	✓ نعم	✓ نعم
Outlook 2016 (macOS 10.12.6)	✓ نعم	✓ نعم
Outlook 13 و 16 و 19 (Windows 10)	✘ لا	✓ نعم
Outlook Office 365 (Windows 10)	✘ لا	✘ لا
Outlook Office 365 (نظام التشغيل Mac OS 10.15)	✓ نعم	✓ نعم
بريد Windows 10	✘ لا	✘ لا
تطبيق Gmail (Android 10)	✓ نعم	✓ نعم
تطبيق Gmail (iOS 13.4.1)	✓ نعم	✓ نعم
Outlook (Android 7.0)	✘ لا	✓ نعم
Outlook (iOS 12.0)	✘ لا	✓ نعم
Samsung Mail (Android 7.0)	✓ نعم	✓ نعم
iPad 11 Air (Gen 4 iOS 14.2)	✓ نعم	✓ نعم
iPhone 12 (iOS 14.2)	✓ نعم	✓ نعم
بريد AOL (Edge)	✘ لا	✓ نعم
كومكاست (إيدج)	✓ نعم	✓ نعم
Gmail (Chrome)	✓ نعم	✓ نعم
مكتب 365	✘ لا	✓ نعم
Outlook.com	✘ لا	✓ نعم
Web.de	✘ لا	✘ لا
ياهو! بريد	✘ لا	✓ نعم

إليك كيف يمكنك البدء.

1. قم بتطبيق خلفيات التدرج الخطي CSS على جدول أو خلية جدول

تمامًا كما تفعل مع الخلفيات ذات الألوان الصلبة ، قم بتطبيق خلفيات التدرج الخطي CSS على جدول أو خلية جدول ، أو عنصر div يحتوي على (سنغوص في حل بديل في Outlook قريبًا) ، لإنشاء شيء مثل هذا:

مثال على البريد الإلكتروني Litmus لخلفية التدرج الخطي CSS — شاهد كيف أنشأنا هذا التدرج اللوني في Litmus Builder

في هذا المثال ، يتضمن التدرج اللوني ثلاثة ألوان: أرجواني وأرجواني وبرتقالي. يبدأ النمط داخل HTML مع تطبيق لون احتياطي خالص على سمة bgcolor. ثم في أنماط CSS المضمنة ، نكرر هذا الإجراء الاحتياطي باستخدام خاصية الخلفية وطريقة RGB.

لإنشاء التدرج الخطي ، نقوم بتضمين خاصية الخلفية مرة أخرى وتطبيق نمط التدرج الخطي. نظرًا لأن التدرج الذي نقوم بإنشائه يتم عرضه قطريًا من أعلى اليسار إلى أسفل اليمين ، فإننا نبدأ بصيغة زاوية التدرج (315 درجة). بعد ذلك ، بالترتيب الذي نود ظهور الألوان فيه ، نستخدم طريقة RGBA للإعلان عن كل لون.

بعد تصميم ألوان RGBA ، قم بتضمين الموضع الذي تريد أن يظهر فيه هذا اللون. سيساعد ذلك على مزج ألوانك معًا بشكل جيد. للحصول على فكرة عن كيفية تحديد موضع اللون ، يمكنك استخدام مولد التدرج CSS عبر الإنترنت.

يجب أن ينتهي بك الأمر برمز يشبه هذا:

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">

2. قم بإنشاء احتياطي لبرنامج Outlook باستخدام تدرجات VML

هل يستخدم الكثير من المشتركين لديك Outlook؟ ثم ستحتاج إلى استخدام لغة ترميز المتجه (VML) لإضافة تدرج الخلفية.

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="gradient" color="#e37b46" color2="#56328b" />
</v:background>
<![endif]-->

تعمل تدرجات VML بشكل أفضل مع لونين. هناك خيار لعمل ثلاثة ألوان أو أكثر ، لكن يبدو أنه يشبه إلى حد كبير شيئًا من أوائل التسعينيات ، ولا يوجد الكثير من التحكم فيما يمكنك القيام به لترويضه. إذا كنت تريد ثلاثة تدرجات لونية أو أكثر ، فمن الأفضل استخدام صورة (وسأوضح لك كيفية ذلك في الخطوة التالية).

بالنسبة إلى تدرجات VML القائمة على الصور ، سيتعين عليك اللعب مع حجم الصورة لمعرفة أفضل طريقة للحصول عليها لملء الفراغ. يمكنك استخدام سمات type = ”frame” أو type = ”tile”. أجد أن التدرجات اللونية الطويلة النحيفة تعمل بشكل جيد للنوع = "تجانب" ، بينما تعمل الصور المتدرجة القصيرة العريضة بشكل أفضل مع النوع = "إطار".

أفضل طريقة لمعرفة ما ينجح هو وضع الصورة ورؤية كيف تبدو في Litmus.

3. قم بإنشاء احتياطي قائم على الصور لبرنامج Outlook و Yahoo و AOL

إذا كان لديك مشتركون على Yahoo و AOL و Outlook (iOS و Android) و Outlook.com ، فيمكنك إنشاء احتياطيات قائمة على الصور لهم.

أضف فئة من "التدرج اللوني" إلى الخلية أو الجدول الذي تريد تطبيق التدرج عليه. بعد ذلك ، باستخدام طرق استهداف مختلفة ، يمكنك تعيين صورة خلفية CSS لتجاوز نمط التدرج CSS حيث لا يظهر التدرج.

لاستهداف Outlook.com ، استخدم شيئًا مثل هذا:

[class~="x_gradient"] { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

لاستهداف Yahoo & AOL ، استخدم:

.& .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

لاستهداف كل من عملاء Outlook للأجهزة المحمولة ، استخدم:

body[data-outlook-cycle] .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

قمنا بإنشاء احتياطي قائم على الصور لمثالنا التدرج. لتكرار هذا ، كان علينا أن نقول وداعًا لزاوية التدرج وترتيب ألواننا للعرض من أعلى إلى أسفل:

مثال على البريد الإلكتروني عباد الشمس لخلفية التدرج القائم على الصورة الاحتياطية — شاهد كيف أنشأنا هذا التدرج اللوني في Litmus Builder

4. استخدم لونًا احتياطيًا ثابتًا لجميع عملاء البريد الإلكتروني الآخرين

بالنسبة إلى عملاء البريد الإلكتروني الذين لا يدعمون أيًا من الإصلاح ، تأكد من توفير لون احتياطي ثابت.

في هذه الحالة ، استخدم سمة bgcolor مع لون HEX المكون من 6 أرقام لتوفير اللون الاحتياطي لعملاء سطح المكتب في Windows 10 و Office 365. سيستخدم Web.de خاصية الخلفية في CSS كإجراء احتياطي.

لذلك ، إذا كنت تريد تلوين الخلفية الكاملة للجدول ، فإن الكود النهائي لاستخدامه في السطر في رسائل البريد الإلكتروني الخاص بك هو:

<table class="gradient" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
</v:background>
<![endif]-->

أو استخدم هذا الرمز إذا كنت تريد تلوين خلية جدول معينة فقط:

<td class="gradient" align="left" valign="top" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[width]px; height: [height]px;">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
<v:textbox inset="0,0,0,0">
<![endif]-->

إذا لم تكن معتادًا على VML وترغب في التأكد من أنه صحيح ، فإن Campaign Monitor لديها أداة مفيدة طورها Stig لإضافة صور الخلفية إلى البريد الإلكتروني. يمكنك استخدام نفس الأداة واستبدال v: fill type = ”tile” بـ v: fill type = ”gradient” لإنشاء التدرج اللوني. تأكد من إعلان كل من ألوان التدرج اللوني في البداية والنهاية باستخدام color = ”” و color2 = ”” وإزالة السمة src = ”” . في الأمثلة أعلاه ، استخدم v: fill type = ”frame” للتأكد من أن الصورة تمتد للإطار بأكمله ولا تتكرر. يعد هذا أيضًا إصلاحًا رائعًا لصور خلفية شبكية العين ، لكننا سنترك ذلك لكورتني فانتيناتو.

لا تنس الوضع الداكن

فقط عندما كان دعم ألوان الخلفية يتحسن ، تم وضع Dark Mode في المزيج.

تعد هذه الفرصة لإنشاء تجربة قراءة مخصصة بناءً على تفضيلات التباين الخاصة بالمشترك بمثابة فوز كبير لإمكانية الوصول - ولكنها عقبة أخرى لمصممي البريد الإلكتروني والمطورين.

يد تمسك بهاتف Apple iphone مع بريد Apple في الوضع المظلم

الدليل النهائي للبريد الإلكتروني في الوضع المظلم

قد يكون تحسين رسائل البريد الإلكتروني للوضع الداكن أمرًا صعبًا. تحقق من دليلنا النهائي للتعليمات البرمجية والتصميم لإنشاء أفضل تجربة لمشتركي البريد الإلكتروني في Dark Mode على العلامة التجارية.

احصل على دليل إرشادي →

بينما يمكن استهداف عملاء البريد الإلكتروني مثل Apple Mail و iPad وتطبيقات البريد الأصلية لـ iPhone و HEY وتطبيق Outlook بتصميم CSS المضمن ، هناك أيضًا عملاء بريد إلكتروني يستخدمون العرض الافتراضي الخاص بهم لتقديم حل Dark Mode.

تطبيقات Outlook.com ، و Office 365 ، و Gmail لنظامي التشغيل iOS و Android ، جميعها تعكس الألوان جزئيًا أو كليًا لإنشاء تجربة الوضع المظلم ، وأحيانًا مع نتائج مروعة.

لا توجد طريقة لاستبدال انعكاس اللون هذا حتى الآن. ومع ذلك ، هناك بعض الأشياء التي يمكنك وضعها في الاعتبار لتحسين عرض رسائل البريد الإلكتروني في هذه البيئات.

النصيحة رقم 1: اتخذ خيارات تصميم مدروسة باختبار الألوان

قد يكون من المحزن قليلاً أن ترى ألوانك يتم تعديلها بطرق لم تكن تقصدها. إنه أمر مقلق إلى حد ما عندما لا يتغير اللون ولكن لون الخط يتغير - وتخرج جميع اعتبارات إمكانية الوصول من النافذة.

يجدر اختبار ألوان علامتك التجارية في عملاء البريد الإلكتروني الذين يقومون بعكس الألوان لـ Dark Mode لمعرفة كيفية تغييرها. بمجرد أن تكون لديك فكرة عن كيفية عرض ألوانك ، يمكنك اتخاذ خيارات ألوان مدروسة في مرحلة التصميم.

أجرينا اختبارًا مشابهًا لمعرفة كيف تم تعديل بعض ألواننا ودرجات ألواننا عبر عملاء البريد الإلكتروني بحيث لا يمكننا التحكم فيها:

اختبار لون خلفية البريد الإلكتروني Litmus HTML في الوضع المظلم — شاهد هذا الاختبار في Litmus →

وجدنا أن استخدام نغمة فاتحة أدى إلى عكس ألوان الخلفية والنص بشكل جيد إلى حد معقول. وعلى الرغم من أن الألوان التي يتم عرضها بمجرد قلبها ليست جزءًا من لوحة الألوان الخاصة بنا ، يمكننا تقديم تجربة قراءة يمكن الوصول إليها في عملاء البريد الإلكتروني هؤلاء.

أمثلة البريد الإلكتروني Litmus HTML لألوان الخلفية في وضع الإضاءة مقابل الوضع الداكن

نصيحة رقم 2: استخدم الإصلاحات الجزئية لتطبيقات Gmail

ظهرت طرق لترويض انعكاس الألوان داخل تطبيقات Gmail ، بفضل الجهود الحثيثة لمجتمع البريد الإلكتروني.

تجاوز ألوان الوضع الداكن macOS / iOS:
لألوان الخلفية ، استخدم تدرج لوني واحد:
صورة الخلفية: تدرج خطي (# ffffff، # ffffff)
لا أستطيع حتى أن أصدق أن هذا يعمل ، لكنه يعمل ... حتى الأزرار الخاصة بي موجودة على العلامة التجارية.
بفضل ThiesBW #emailgeeks
- أنيت فورسيير (@ The_Annett) 11 ديسمبر 2019

من خلال تطبيق تدرج خطي يحتوي على لون الخلفية على عناصر الحاوية ، يمكنك إجبار اللون الذي اخترته على الظهور في بيئات الوضع الفاتح والداكن في Gmail.

للقيام بذلك ، تحتاج إلى إضافة التدرج الخطي إلى خاصية CSS للصورة الخلفية باستخدام طريقة اللون HEX. ثم اجعل كلا اللونين في التدرج اللوني هو اللون الذي تريد Gmail أن يكرمه ، على النحو التالي:

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background-image: linear-gradient(#e37b46, e37b46);">

قام Remi Parmentier بتوسيع هذا الحل أيضًا لمنع ألوان النص من الانعكاس في تطبيقات Gmail باستخدام أوضاع مزيج CSS.

يمكن أن يساعدك استخدام هذه الإصلاحات في التحكم في بعض جوانب العرض المعكوس. ومع ذلك ، هذا ممكن فقط في Gmail ولا يمنح المرونة لتغيير ألوان بريدك الإلكتروني اعتمادًا على وضع التباين الذي يختاره المشتركون لديك.

بقدر ما هو محبط لأنه غير قادر على استهداف عملاء البريد الإلكتروني الذين يعكسون ألوانك ، يمكنك استعادة القليل من التحكم عن طريق: اختبار لوحة الألوان الخاصة بك ، وتحديد اختيارات الألوان بناءً على نتائج الاختبار ، والعمل مع هذه الإصلاحات الجزئية.

أبهر المشتركين في قناتك بالألوان

يعد اللون طريقة رائعة لإضافة بعض الجاذبية إلى تجربة المشترك والحفاظ على تنظيم محتوى بريدك الإلكتروني. ويستغرق وقتًا وموارد أقل من الصور! هذا هو الفوز في كل مكان.

لذا ابدأ بهذا الدليل - ولا نطيق الانتظار لرؤية خلفياتك الملونة في صناديق البريد الوارد لدينا.

تأكد من ظهور ألوانك بشكل صحيح

هل يرى المشتركون رسائل البريد الإلكتروني الخاصة بك بالطريقة التي تريدها؟ معاينة كيف تبدو رسائل البريد الإلكتروني الخاصة بك في أكثر من 90 عميل بريد إلكتروني وتطبيقات وأجهزة — باستخدام Litmus Email Previews.

ابدأ تجربتك المجانية من Litmus →

نُشر في الأصل في 27 مارس / آذار 2018 ، بقلم جوستين جوردان. تم التحديث الأخير في 21 أبريل 2021.