كيف تبهر كل مشترك بصورة خلفية بريد إلكتروني بسهولة (+ رمز القيام بذلك!)

نشرت: 2021-07-23

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

استمر في القراءة من أجل:

فوائد صور الخلفية
أمثلة ملهمة للبريد الإلكتروني
متطلبات التصميم
كيفية ترميز صور الخلفية

ما هي صور الخلفية؟ (وما هو الهدف؟)

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

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

مثال على نص HTML مباشر وزر مضاد للرصاص فوق صورة خلفية

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

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

طرق إبداعية تستخدم العلامات التجارية صور الخلفية

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

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

استخدم Uplers صورة خلفية لتسليط الضوء على خصم على خدماتهم ، مع وضع صورة قسيمة خلف رمز القسيمة.

Uplers صورة خلفية البريد الإلكتروني لرمز القسيمة — المصدر: رسائل البريد الإلكتروني الجيدة حقًا

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

صورة خلفية Figma في البريد الإلكتروني — عرض هذا البريد الإلكتروني في Litmus Builder

وضع Chipotle صورة خلفية جامبو خلف هذا البطل الجامبو المؤثر ومنطقة الجسم ، بما في ذلك تصوير المنتج ونمط الخط. يوجد في الجزء العلوي من هذه الصورة صورة GIF متحركة بخلفية شفافة ونص مباشر في منطقة الجسم.

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

يمكن أيضًا استخدام صور GIF المتحركة كصور خلفية ، مثل هذا المثال من Adobe Stock ، للترويج للمجموعات الاحتفالية بمحتوى بطل بما في ذلك النص المباشر وزر CTA الموجود أعلى الخلفية المتحركة.

بريد إلكتروني من Adobe Stock مع صورة خلفية GIF متحركة — المصدر: رسائل البريد الإلكتروني الجيدة حقًا

متطلبات التصميم

عند التفكير في تنفيذ صور الخلفية ، هناك بعض اعتبارات التصميم التي تستحق أخذها في الاعتبار.

التباين

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

إذا كنت تصمم باستخدام Figma ، فيمكنك إضافة مكونات إضافية مثل Color Blind و Contrast لمعرفة ما إذا كنت تفي بإرشادات الوصول إلى محتوى الويب (WCAG). هناك أيضًا عدد من تطبيقات الويب ، مثل WebAim's Contrast Checker ، حيث يمكنك اختبار الألوان في تصميماتك.

بساطة

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

احتياطي اللون الخالص

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

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

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

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

الأخبار السيئة: لسوء الحظ ، لا يحب Windows 10 Mail صور الخلفية. لن يتم عرض CSS المضمنة أو سمة خلفية HTML المهملة. وسيؤدي تطبيق VML إلى حدوث مشكلات في العرض مع ظهور رسالة الخطأ "لا يمكن عرض الصورة".

إذا كنت قلقًا بشأن التجربة التي يحصل عليها مشتركو Windows 10 Mail ، ففكر في استبعاد VML. يضمن ذلك أن تمنح ألوان الخلفية الاحتياطية جمهورك في Microsoft Outlook Suite تجربة قراءة بريد إلكتروني رائعة ، دون الزخرفة الإضافية.

كيف تبدو صور خلفية البريد الإلكتروني في بريد Windows 10

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

عميل البريد الإلكتروني	استخدام CSS المضمنة	باستخدام VML
بريد أبل 14	✓	✘
أوفيس 365 (ماك)	✓	✘
أوفيس 365 (ويندوز)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013 ، 2016 ، 2019 (Windows 10)	✘	✓
بريد 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	✓	✘
ياهو! بريد	✓	✘

ما عملاء البريد الإلكتروني الذين يستخدمهم المشتركون لديك؟

ألق نظرة على حصة سوق عميل البريد الإلكتروني الخاص بك باستخدام Litmus Email Analytics. تعرف على عملاء البريد الإلكتروني الذين تحتاجهم لتحسين صور الخلفية الخاصة بك. (تلميح: إذا كان بريد Windows 10 منخفضًا ، فلا تقلق.)

اعرف المزيد →

الآن بعد أن خرجنا من هذا الطريق ، دعنا نتحدث عن الكود!

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

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

صورة خلفية محددة العرض أو ثابتة

عرض ثابت الخلفية

عند تطبيق صور الخلفية ، من الأفضل دائمًا إضافة التعليمات البرمجية إلى خلية الجدول المحتوي. من غير المحتمل أن يحصل التطبيق على أي عنصر HTML آخر مثل <table> أو <body> على دعم من بعض عملاء البريد الإلكتروني. إليك ما يجب أن يبدو عليه هذا:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

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

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

هل تعمل صورة الخلفية الخاصة بك؟

تعرف على كيفية عمل الكود الخاص بنا لصور الخلفية في بريدك الإلكتروني عبر تطبيقات البريد الإلكتروني الأكثر شيوعًا مثل Gmail و Outlook.

اعرف المزيد →

اليوم ، يدعم معظم عملاء البريد الإلكتروني تصميم خلفية CSS المضمنة ، بحيث يمكنك إضافة صورة الخلفية واللون الاحتياطي باستخدام خاصية اختصار الخلفية CSS. بمعنى آخر ، قم ببساطة بتطبيقها على نمط "الخلفية". لسوء الحظ ، لا يعمل تصميم الخلفية الإضافي بشكل جيد مع الاختزال عند الترميز المضمّن ، لذلك يجب كتابة أي موضع أو تغيير كأنماط منفصلة. على سبيل المثال ، استخدام background-position: center ؛ حجم الخلفية: 80٪ ؛ بدلاً من الخلفية: المركز / 80٪ ؛ .

جعل هذا يعمل في Outlook باستخدام احتياطي VML

يحتاج Outlook و Office 365 لسطح المكتب أيضًا إلى القليل من المساعدة لعرض صور الخلفية ، حيث إنهما أيضًا لن يعرضان أنماط خلفية CSS. لعرض صورة الخلفية الخاصة بنا في عملاء البريد الإلكتروني هؤلاء ، نحتاج إلى الاستفادة من تقنية شاعها Stig Morten Myre لـ Campaign Monitor ، وتطبيق لغة توصيف Vector (VML) من Microsoft.

بأخذ الكود الذي أنشأناه بالفعل ، نضع VML المطلوب و <div> داخل خلية الجدول لدينا:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

بالنسبة للصور التي تحتاج إلى ملء الحاوية دون التكرار ، نحتاج إلى استخدام "frame" داخل علامة vml: fill. بهذه الطريقة ، يمكنك استخدام صور 2x داخل هذه العلامة. فقط تأكد من ضبط عرض الحاوية الخاصة بك باستخدام التصميم المضمن على علامة v: rect (في المثال أعلاه ، تم ضبطها على 600 بكسل).

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

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

تكرار صورة الخلفية

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

مثال على تكرار صورة الخلفية

إذا كانت الصورة التي نضعها في خلية الحاوية الخاصة بنا أصغر من الحاوية ، فسوف تتكرر تلقائيًا أفقيًا وعموديًا. للتكرار في اتجاه واحد فقط ، استخدم النمط باستخدام CSS "تكرار الخلفية" وأضف القيمة تكرار x للتكرار أفقيًا أو تكرار y للتكرار رأسيًا.

لملء الحاوية بأكملها بنمط متكرر بالكامل ، يكون الرمز بسيطًا جدًا:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

جعل هذا يعمل في Outlook باستخدام احتياطي VML

مرة أخرى ، إذا كنت ترغب في رؤية عرض الخلفية في عملاء Outlook ، يمكنك تطبيق VML. الكود مختلف قليلاً هذه المرة ، مع وضع VML قبل الحاوية:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

لتكرار الخلفية ، قم بملء علامة v: fill مع النوع "تجانب". لا عجب ، فهناك بعض مشكلات العرض في Windows 10 Mail ، ومع الخلفيات المتكررة ، يمكن أن تكون مشكلات التقديم أكثر بشاعة. لذلك ، قد يكون استبعاد VML هو الطريقة الأكثر أمانًا إذا كان لديك أي مشتركين في Windows 10 Mail.

تقنيات متقدمة

توفر صور الخلفية الثابتة والمتكررة الكثير من الفرص لرفع مستوى تصميمات بريدك الإلكتروني ، ولكن هناك المزيد:

تبديل صورة التباين

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

أوضاع التباين

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

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

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

الآن ، في HTML الخاص بك ، قم بتطبيق فصلك على الخلية التي تحتوي على صورة الخلفية ذات الوضع الفاتح. بسيط!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

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

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

صورة خلفية البريد الإلكتروني في سيناريوهات مختلفة للوضع المظلم

صورة الخلفية على شكل رتبة عسكرية لديها عتامة بنسبة 30٪ على الأسهم وتكون شفافة بالكامل بينهما. هذا يعني أنه عندما يتحكم عملاء البريد الإلكتروني المسيئون في عرض الوضع المظلم الخاص بي ، يكون المحتوى قابلاً للقراءة.

لمزيد من المعلومات حول الترميز لـ Dark Mode ودعم عميل البريد الإلكتروني ، راجع الدليل النهائي للبريد الإلكتروني في الوضع المظلم.

خلفية تفاعلية

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

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

أنت بحاجة إلى القليل من CSS المضمنة لجعل هذا واحدًا يعمل. ضع هذا داخل علامة <style>:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

الآن كل ما عليك فعله هو تطبيق هذا الفصل على خلية الجدول الخاصة بك ، مثل:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

ارفع مستوى تصميماتك

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

نود أن نرى كيف تستخدم صور الخلفية في رسائل البريد الإلكتروني - شارك بأمثلة في التعليقات أدناه.

تأكد من أن صور الخلفية تعمل — مع Litmus

هل نجحت؟ قم بمعاينة صور الخلفية (وبقية بريدك الإلكتروني) في أكثر من 100 عميل وتطبيقات وأجهزة للبريد الإلكتروني باستخدام Litmus. ورحبًا برسائل البريد الإلكتروني الخاصة بالعلامة التجارية الخالية من الأخطاء.

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

نُشر في الأصل في 24 مايو / أيار 2019 بقلم جيسون رودريغيز. تم التحديث الأخير في 21 يوليو 2021.