تسليم الحلقة 4: فهم صور الخلفية في البريد الإلكتروني

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

تأكد من الاشتراك في التسليم على iTunes أو Spotify للاستماع إلى الحلقات المستقبلية والانضمام إلى المحادثة على Twitter باستخدام علامة التصنيف #DelevisionPodcast.

نص الحلقة

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

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

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

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

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

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

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

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

أدخل صور الخلفية.

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

هناك أربع طرق لترميز صور الخلفية ، لكل منها مزاياها وعيوبها.

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

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

يحتوي CSS على عدد من خصائص الخلفية ، وأبرزها: صورة الخلفية ، وتكرار الخلفية ، وموضع الخلفية ، وحجم الخلفية ، ولون الخلفية. هناك أيضًا خاصية الاختزال الخلفية المفيدة للغاية.

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

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

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

الطريقة الأخيرة لتضمين صور الخلفية في رسالة بريد إلكتروني هي باستخدام ما يسمى "الخلفيات المضادة للرصاص". تُبنى الخلفيات المقاومة للرصاص على أعلى طريقة سمات HTML من خلال تضمين VML أيضًا - أو لغة توصيف المتجهات - في الكود. VML هي لغة مملوكة لشركة Microsoft تُستخدم في منتجات Office مثل Outlook. من خلال تطبيق صور الخلفية في VML ، ستعمل في Microsoft Outlook ، وهذا لا ينطبق بالضرورة على الطرق الأخرى التي تمت مناقشتها مسبقًا.

الجانب السلبي الرئيسي لاستخدام VML هو أنه ليس سهل الوصول إليه أو موثق جيدًا ، ويضيف الكثير من التعليمات البرمجية التي يصعب فهمها بصراحة. لتسهيل الأمر ، صمم أصدقاؤنا في Campaign Monitor بالفعل أداة رائعة لإنشاء خلفيات مضادة للرصاص. يمكنك العثور عليه بسهولة في backgrounds.cm.

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

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

يمكنك استخدام CSS لتصميم محتوى HTML بحيث يبدو مصممًا جيدًا مثل الصور الخارجة من Photoshop ، ويمكنك أيضًا تضمين أزرار CTA هناك أيضًا.

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

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

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

واحرص على الاشتراك في Delazing on iTunes أو Spotify للاستماع إلى الحلقات المستقبلية حيث نتعمق في المزيد من التقنيات لبناء رسائل بريد إلكتروني أفضل بتنسيق HTML.