رسائل HAE التشويقية: ثلاث رسائل OCE لـ CSL Behring

التحدي

قبل إطلاق Andembry، أرادت CSL Behring أن تمهد له عند الأطباء في السعودية والإمارات بثلاث رسائل تشويقية عن الوذمة الوعائية الوراثية (HAE). كل رسالة ترسلها المندوبون من OCE Personal، المنصة التي يتواصلون بها مع الأطباء.

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

ما بنيناه

ثلاث رسائل بعرض 700 بكسل، كل واحدة في ملف ZIP جاهز للرفع على OCE. الصورة الرئيسية من التصميم صورة واحدة، وكل ما تحتها نص HTML حقيقي: السطر الأحمر، والتحية، والفقرات، وزر "Stay tuned"، والمراجع، والتذييل القانوني كاملاً.

جداول وتنسيق داخل كل خلية

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

الخط الذي لا يمكن تحميله

التصميم مكتوب بخط Univers Condensed، وهو خط مرخص لا يحمّله أي برنامج بريد. أول نسخة استخدمت Arial، وArial أعرض بنسبة 9% إلى 20%، فانكسرت الأسطر في أماكن مختلفة عن التصميم. العميل لاحظ ذلك، وكان محقاً.

الحل: سلسلة خطوط تبدأ بـ Univers وتنزل إلى Arial Narrow، وهو أقرب خط ضيق موجود على أغلب الأجهزة. ثم ضبطنا كل حجم خط حتى يقع كل سطر على نفس العرض المقاس من التصميم. الأسطر الآن تنكسر عند نفس الكلمات، وسطر في الرسالة الثالثة كان ينزل لسطر ثانٍ أصبح يتسع في سطر واحد كما في التصميم.

مطابقة التصميم بالقياس

لم نطابق المسافات بالعين. سكربت يرسم ملفات PDF بعرض 1400 بكسل، وسكربت آخر يجد كل جزء في الصورة من لونه: الأحمر للسطر الأحمر، والأصفر للزر، والأبيض للنص. ثم يبني الرسالة ويصورها ويقارن، ويعدل المسافات ويعيد، حتى يقع كل جزء على مكانه في التصميم بفرق بكسل واحد أو أقل.

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

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

التفاصيل التي تصنع الفرق

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

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

كل ZIP يحتوي ملفين فقط بالأسماء التي يشترطها OCE: index.html وصورة معاينة thumbnail.jpg بمقاس 220x280. ومع التسليم كتبنا ما اختبرناه فعلاً وما أخذناه من جداول الدعم المنشورة، وما يحتاج إلى قرار من العميل: زر "Stay tuned" بدون رابط لأن التصميم لم يحدد وجهة، ولم نخترع واحدة.

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