كيفية عمل أزرار بريد إلكتروني مقاومة للرصاص (HTML و CSS و VML)

نشرت: 2021-01-16

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

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

ولكن إذا كان الزر عبارة عن صورة أيضًا ، فلن يراها أحد على الإطلاق.

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

استمر في القراءة لتتعلم:

  • ما هي الأزرار المضادة للرصاص
  • أربعة أنماط كود HTML لعمل أزرار البريد الإلكتروني الخاصة بك
  • أمثلة على تصميم البريد الإلكتروني باستخدام أزرار البريد الإلكتروني المقاومة للرصاص (وبدونها)
  • كيف تجعل ActiveCampaign أزرار البريد الإلكتروني المقاومة للرصاص سهلة

ما هي الأزرار المضادة للرصاص؟

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

يقرر الأشخاص ما إذا كانوا سيحذفون بريدك الإلكتروني في أقل من 3 ثوانٍ. هذا حتى عندما يمكنهم رؤية رسومات البريد الإلكتروني الخاصة بك.

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

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

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

عجب امرأة الرصاص يجب أن تكون رسائلك الإلكترونية Wonder Woman: غير منفذة للرصاص (أو الصور متوقفة)

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

في عام 2013 ، غيّر Gmail اللعبة عن طريق تشغيل الصور عبر خوادم Google الآمنة. كان شعار "عرض الصور أدناه" شيئًا من الماضي. كانت هذه أخبارًا رائعة للشركات - رسومات زر الارتباط التشعبي وصور المنتج المعروضة بنقرة على سطر الموضوع.

ولكن بعد مرور عام ، أصدر Litmus إحصاءات تظهر أن 43٪ من مستخدمي Gmail قاموا بتغيير إعداداتهم لإيقاف تنزيلات الصور التلقائية مرة أخرى.

والعديد من عملاء البريد الإلكتروني الآخرين ، مثل Outlook ، لا يزالون لا يقومون بتنزيل الصور تلقائيًا على الإطلاق.

لماذا يترك الناس صور البريد الإلكتروني معطلة؟ أسباب عدم عرض الصور افتراضيًا (ولماذا يجب استخدام الأزرار المضادة للرصاص) هي:

  • العملية. قد يتم إيقاف تشغيل الصور (أو عدم عرضها فقط) عند تحميل رسائل البريد الإلكتروني بوتيرة بطيئة - لأن خدمة البيانات ضعيفة أو غير مكتملة
  • إمكانية الوصول. لا يستطيع قارئ الشاشة (برنامج "يقرأ" من خلال محتوى الكلام لصفحة ما) رؤية النص بتنسيق GIF أو JPEG. سيؤدي ذلك إلى جعل بريدك الإلكتروني غير متاح للمشتركين ضعاف البصر.
  • خصوصية. ابحث في جوجل ، وستجد العديد من المقالات التي تنصح الأشخاص بإيقاف التنزيلات التلقائية للصور حتى لا يمكن تعقبهم

بعض الأخبار الجيدة: تقوم العديد من برامج البريد الإلكتروني بإنشاء أزرار مقاومة للرصاص. ولكن ماذا لو كنت بحاجة إلى إنشاء أزرار بريد إلكتروني برمز؟

4 طرق لإنشاء أزرار مضادة للرصاص في رسائل البريد الإلكتروني الخاصة بك

فيما يلي أربعة أنماط تشفير يمكنك استخدامها لإنشاء أزرار بريد إلكتروني مضادة للرصاص:

  1. أزرار VML
  2. أزرار مبطنة
  3. الأزرار الحدودية
  4. الجمع بين أزرار مبطن / الحدود

1. أزرار VML

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

هذا زر!

المؤيد: الزر بأكمله قابل للنقر
يخدع: عليك استخدام لغة برمجة صعبة

 <!--VML button--> <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td> <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="http://www.activecampaign.com" arcsize="5%" strokecolor="#19cca3" fillcolor="#19cca3;width: 130;"> <w:anchorlock/> <center>Click here!</center> </v:roundrect> <![endif]--> <a href="https://www.activecampaign.com" target="_blank">Click here!</a> </a> </div> </td> </tr> </table>

2. أزرار مبطنة

يستخدم زر البريد الإلكتروني المبطن المضاد للرصاص جدول HTML لعمل الزر ، باستخدام الحشو في خلية الجدول لتشكيل الهيكل. تُستخدم سمات HTML و CSS لتصميم الزر.

هذا زر!

Pro: يستخدم HTML ، مما يسهل عملية البرمجة والتحديث
Con: فقط النص الموجود داخل الزر قابل للنقر ، مما قد يؤدي إلى إرباك المستخدم

 <!--Padded button--> <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td align="center" bgcolor="#19cca3" role="presentation" valign="middle"> <a href="href="https://www.activecampaign.com" target="_blank"> Click here! </a> </td> </tr> </table>

3. الأزرار الحدودية

يشبه زر البريد الإلكتروني المضاد للرصاص المستند إلى الحدود زرًا مبطنًا مضادًا للرصاص. يستخدم كلاهما HTML و CSS لإنشاء الزر وتصميمه. ولكن بدلاً من المساحة المتروكة في خلية الجدول لهيكل الزر ، تتم إضافة حدود سميكة إلى الارتباط.

هذا زر!

المؤيد: كود مبسط وقابل للتطوير بدرجة كبيرة
Con: لا يحب Outlook هذه الأزرار (لا يتعرف على علامات <a> كعناصر على مستوى الكتلة) ، وسوف يغير حجمها بشكل أصغر

 <!--Border based button--> <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td align="center" bgcolor="#19cca3" role="presentation" valign="middle"> <a href="href="https://www.activecampaign.com" target="_blank"> Click here! </a> </td> </tr> </table>

4. الجمع بين أزرار مبطن / الحدود

تستخدم أزرار البريد الإلكتروني المبطنة / الحدودية المدمجة كلاً من الحشو والحدود الصلبة ، إلى جانب لون الخلفية.

هذا زر!

الإيجابيات: سهولة التحديث ، ودعم صور الخلفية
Con: يتم تضمين النمط في علامتي <a> و <tr> ، لذلك يحتاج كلاهما إلى التحديث إذا تم إجراء تغييرات على النمط

 <!--Padding and border combo button--> <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td align="center" bgcolor="#19cca3" role="presentation" valign="middle"> <a href="href="https://www.activecampaign.com" target="_blank"> Click here! </a> </td> </tr> </table>

سيء ، أفضل ، أفضل: 3 أمثلة على الأزرار المضادة للرصاص أثناء العمل

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

سيئة (فالفري)

فالفري

بدون صور: لهذا السبب لا يمكنك الاعتماد على الصور للقيام بعملك نيابة عنك. لن أترك كل شيء ، لأن لوحة Valfre Electric Garden ليست هنا.

لماذا لا يعمل هذا البريد الإلكتروني المحظور من خلال الصور:

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

البريد الإلكتروني بالصور:

البريد الإلكتروني Valfre

2. Better (ستانلي دونوود)

البريد الإلكتروني ستانلي دونوود

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

لماذا يعد هذا البريد الإلكتروني المحظور بالصور جيدًا:

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

البريد الإلكتروني بالصور:

البريد الإلكتروني لستانلي دونوود

3. Best (Quip)

ساخر البريد الإلكتروني

بدون صور: صمم Quip مثالًا مثاليًا للرسائل الإخبارية عبر البريد الإلكتروني يوضح أن نقص الصور لا يعني عدم وجود تصميم متماسك. إنه في متناول الجميع وتظهر الأزرار المضادة للرصاص ... تمامًا كما ينبغي لـ CTA.

لماذا يعد هذا البريد الإلكتروني المحظور من الصور رائعًا:

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

البريد الإلكتروني بالصور:

ساخر البريد الإلكتروني

ActiveCampaign يجعل أزرار البريد الإلكتروني مقاومة للرصاص تلقائيًا

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

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

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

رسائل البريد الإلكتروني ActiveCampaign

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