كيفية إنشاء أزرار بريد إلكتروني جميلة مضادة للرصاص تعمل تمامًا

نشرت: 2021-06-11

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

وغني عن القول ، إن CTA الخاص بك هو أحد أهم أجزاء بريدك الإلكتروني. وإذا كان من الصعب العثور عليه أو يصعب استخدامه أو تعطله بأي شكل من الأشكال ، فسيهرب المشتركون لديك. (اهرب!)

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

استعد للتعلم:

  • ما هو الزر المضاد للرصاص؟
  • أفضل ممارسات تصميم الأزرار
  • 5 تقنيات ترميز
    • زر الحشو الشرطي
    • زر VML
    • زر المساحة المتروكة
    • زر الحد
    • المساحة المتروكة + زر الحد
  • تحسينات متقدمة
  • دعم عملاء البريد الإلكتروني

ما هو الزر المضاد للرصاص؟

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

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

لا تستخدم الصور

سأقول هذا مرة واحدة ثم لا أقولها مرة أخرى. زر فقط مضاد للرصاص حقا هو صورة.

* شهيق *

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

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

زر البريد الإلكتروني للصور مع تشغيل الصور مقابل إيقاف تشغيلها
يفقد زر الصورة التأثير عند تعطيل الصور

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

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

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

لذا تخلص من صورة CTA وتأكد من أن المشتركين لديك يمكنهم رؤية واستخدام CTAs بغض النظر عن الجهاز الذي يستخدمونه.

ما يؤهلها تصميم زر جميل

الأزرار هي أكثر من مجرد رمز بالرغم من ذلك. هناك العديد من العوامل التي تجعل الأزرار قابلة للاستخدام وملفتة للنظر.

شكل الزر

اجعل الأزرار تبدو مثل الأزرار.

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

أمثلة على أشكال الأزرار القياسية

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

  • زوايا مدورة
  • زوايا مربعة
  • حبوب منع الحمل
  • زر الشبح
  • الزر المظلل

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

مثال على البريد الإلكتروني الملعقة السحرية للأزرار باستخدام صور GIF المتحركة

حجم الزر

نظرًا لأن أكثر من 40٪ من المشتركين يفتحون رسائل البريد الإلكتروني على الأجهزة المحمولة ، وفقًا لبيانات حصة السوق لعميل البريد الإلكتروني السنوي لدينا ، فمن المهم أن يكون الزر مصممًا بحيث يعمل عبر جميع الأجهزة.

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

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

تمت ترجمة الحجم المثالي للأزرار للنقر السهل على الأجهزة المحمولة ليكون بين 42 بكسل و 72 بكسل (حوالي 11-19 ملم). يبدو هذا متوسطًا لارتفاع الزر الذي يظهر على الويب ، والأزرار التي نستخدمها هنا في Litmus تقع ضمن هذا النطاق أيضًا.

في إحدى الدراسات التي وصلت إلى 30 ملم ، استقرت دقة النقر للنقر عند 20 ملم ، لذلك هناك نقطة حيث حجم الزر لم يعد يحدث فرقًا كبيرًا بعد الآن.

مساحة الزر

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

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

ردود الفعل المرئية

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

إنها علامة إضافية لهم على أن شيئًا ما قابل للنقر.

يمكن أن يكون هذا بسيطًا مثل تغيير اللون أو معقدًا كما تريد. (نعلم أنه في بعض الأحيان يكون من الممتع بذل كل الجهود ، لذلك لا تتراجع - ولكن اعرف متى تكبح جماح نفسك.)

يحتوي الزر القياسي الخاص بنا على تغيير في اللون بالإضافة إلى تأثير زر الضغط.

مثال على البريد الإلكتروني لتأثير زر الضغط

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

مثال عبر البريد الإلكتروني للتعليقات المرئية على زر

زر كتابة

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

عادة ما تكون الكلمات من 1 إلى 5 كافية.

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

5 طرق لترميز زر مضاد للرصاص

مع وجود أكثر من 300000 عرض محتمل للبريد الإلكتروني ، هل من المدهش حقًا أنه لا يمكنك إنشاء زر بحجم واحد يناسب الجميع يعمل في كل مكان؟

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

1. زر الحشو الشرطي

بفضل Mark Robbins على زر الحشو الشرطي هذا. إنه الذي نستخدمه هنا في Litmus.

الزر الشرطي

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