الرسالة التسويقية المتوسطة يضغط عليها 6.81% فقط ممن يفتحونها (MailerLite). أي أن 93 من كل 100 قارئ اهتموا بما يكفي لفتح الرسالة يمررونها سريعاً ثم يغلقونها.
معظم هذه الرسائل متشابهة: صورة رئيسية من مكتبة صور جاهزة، زر “تسوّق الآن” في المنتصف، وتذييل منسوخ من الحملة السابقة. لا شيء معطّل، لكن لا شيء يستحق النقر أيضاً.
يوضح هذا الدليل كيف تجعل رسالتك مميزة فعلاً، عبر أفضل ممارسات تصميم البريد الإلكتروني التي تحقق النقرات، كتلة بكتلة من الصورة الرئيسية حتى التذييل. وإن كانت رسائلك تخاطب جمهوراً في السعودية والإمارات ومصر، ستجد في كل ممارسة ما يخص التصميم من اليمين إلى اليسار (RTL) والجمهور ثنائي اللغة.
لماذا تتشابه معظم رسائل البريد الإلكتروني؟
تصفّح أي معرض لأمثلة تصميم البريد الإلكتروني، وستجد أن أفضلها يشترك في أمر واحد: كل كتلة صُممت لتلك الرسالة تحديداً. أما معظم ما يصل إلى صناديق الوارد فيسير بالعكس، لـ 3 أسباب.
- بناء HTML للبريد صعب. ما زال البريد الإلكتروني يعتمد على تخطيطات الجداول والأنماط المضمّنة، والتصميم الذي يبدو سليماً في Gmail قد ينهار في Outlook. ويزداد الأمر تعقيداً مع الرسائل العربية، إذ يجب أن ينعكس اتجاه التخطيط كله من اليمين إلى اليسار. لذلك يعني أي شيء يتجاوز القالب الافتراضي مطوّراً وجولة اختبار، فتكتفي معظم الفرق بالتخطيط الجاهز، وتغيّر الشعار، وترسل.
- صور جاهزة من المكتبات. تُختار الصورة الرئيسية لتناسب أي حملة، أي أنها لا تناسب أياً منها. وهي أول ما يراه القارئ، ولا تقول شيئاً عن العرض.
- غياب نظام تصميم موحّد. لا يوجد مكان واحد لألوان العلامة التجارية وخطوطها وتذييلها، فتُنسّق كل حملة يدوياً. وبعد بضعة أشهر لا تتطابق رسالتان تماماً.
تظهر تكلفة هذه الأخطاء بعد الفتح. سطر الموضوع أدّى دوره وفتح القارئ الرسالة، ثم أغلقها دون نقرة، لأنها بدت كأي رسالة أخرى في صندوق الوارد ولم يلفت انتباهه شيء.
كيف تجعل رسالتك مميزة فعلاً؟
الإجابة المختصرة: تصميم أفضل. والإجابة الأطول: اضبط كل كتلة في الرسالة لتبدو ملائمة وشخصية للقارئ، وتمنحه سبباً حقيقياً للنقر وتنفيذ ما تريده منه، سواء كان شراءً أو حجزاً أو عودة إلى التطبيق.
ولا، هذا لا يعني أن على مطوّر أو مصمم إعادة كتابة HTML لكل رسالة.
والآن لننتقل كتلة بكتلة: كيف تحسّن كل جزء من الرسالة لتحصل على نقرات أكثر.
أفضل ممارسات تصميم البريد الإلكتروني، كتلة بكتلة
هذه هي الرسالة التي سنفككها: عرض موسمي من تطبيق لمعدات الجري، 48 ساعة، خصم 25% على أحذية الجري في الطرق الوعرة، مبنية في محرر السحب والإفلات من Pushwoosh. الصيغة نفسها تصلح مباشرة لعروض الجمعة البيضاء في نوفمبر، أكبر موسم تسوق إلكتروني في المنطقة.
تنقسم الرسالة إلى 5 كتل. إليك ما يميز كل واحدة منها، وما الذي تغيّره للقارئ.
| الكتلة | كيف تتميز | الأثر |
|---|---|---|
| الترويسة | ترويسة مدمجة مبنية على نظام علامة تجارية واحد: Brand book مع Derive brand، محفوظة ككتلة متزامنة | تعرّف فوري على المرسل، والمظهر نفسه في كل رسالة |
| الصورة الرئيسية | صورة مبنية حول العرض باستخدام Generate with AI، مع إبقاء العنوان نصاً حياً | يفهم القارئ العرض من النظرة الأولى |
| النص والدعوة للعمل | عنوان مكتوب لقارئ واحد بوسوم الدمج وLiquid، وزر واحد منسّق بنص حي | ملاءمة أعلى وخطوة تالية واحدة واضحة |
| المحتوى | شبكات منتجات من الكتالوج الحي، وأقسام مخصصة لكل جمهور بشروط العرض، وعدّ تنازلي عبر Timer block | نقرات أكثر على المنتجات، والعرض المناسب لكل قارئ، وإلحاح يدفع للتصرف الآن |
| التذييل | تذييل واحد محفوظ ككتلة متزامنة، يفحصه Smart check | تبقى البيانات القانونية صحيحة في كل رسالة |
فيما يلي نفتح كل كتلة عبر ممارساتها، من أعلى الرسالة إلى أسفلها: لماذا تنجح كل ممارسة، وكيف تطبقها في Pushwoosh.
أعلى الرسالة: الترويسة والصورة الرئيسية
#1. ابنِ الترويسة على نظام علامتك التجارية
لماذا تنجح: الترويسة تفتتح كل رسالة. حين يبدو الشعار والألوان والخطوط متطابقة في كل مرة، يتعرّف القراء على المرسل من نظرة، وترث كل كتلة تحتها المظهر نفسه.
بدلاً من: ألوان منسوخة من الرسالة الأخيرة وتخطيط ترويسة جديد لكل حملة ← جرّب: نظام علامة تجارية واحداً وترويسة مدمجة (الشعار مع 2 أو 3 روابط)، متطابقة في كل رسالة.
في Pushwoosh: أعدّ Brand book (دليل العلامة التجارية): الشعار، والألوان، والخطوط، والإعدادات الافتراضية للكتل، وأسلوب العلامة. لست مضطراً لملئه يدوياً: تفحص ميزة Derive brand موقعك الإلكتروني، أو ملف PDF لدليل علامتك، أو شعارك، وتقترح لوحة الألوان والخطوط والنبرة. أما Apply brand book styles فتعيد تلوين أي قالب، بما في ذلك القوالب القديمة، دون المساس بالمحتوى.
ثم ابنِ الترويسة بشعارك وMenu block، واحفظها ككتلة قابلة لإعادة الاستخدام مع تفعيل Keep copies in sync، فيظهر أي رابط جديد في القائمة في كل الرسائل دفعة واحدة. والتذييل يعمل بالطريقة نفسها (انظر الممارسة 8).
للرسائل العربية: في التخطيط من اليمين إلى اليسار يبدأ القارئ من الزاوية اليمنى، فهناك مكان الشعار، وتليه روابط القائمة نحو اليسار. واختر لدليل العلامة خطاً عربياً مع خط احتياطي آمن، لأن كثيراً من تطبيقات البريد لا تحمّل الخطوط المخصصة.
#2. ابنِ الصورة الرئيسية حول العرض، لا حول صورة جاهزة
لماذا تنجح: الصورة الرئيسية هي ما يراه القارئ قبل أن يقرر هل يواصل التمرير. إن أظهرت العرض، فهم الفكرة من نظرة واحدة.
بدلاً من: عدّاء مبتسم من مكتبة صور جاهزة ← جرّب: أحذية الجري المعروضة فعلاً للبيع، مع “خصم 25% على أحذية الطرق الوعرة. 48 ساعة فقط.” كنص حي فوقها.
في Pushwoosh: داخل Image block، تنشئ ميزة Generate with AI الصورة من وصف نصي (“أحذية جري للطرق الوعرة على مسار صحراوي عند الغروب، بإضاءة دافئة”) بنسبة بانر 16:9. ضعها خلفيةً لـ Card block، فيبقى العنوان والزر نصاً حياً: يظهران حتى عند حجب الصور، وتستطيع قارئات الشاشة قراءتهما. وفي الرسائل العربية خصوصاً، إبقاء العنوان نصاً حياً يعني أن الحروف العربية تُعرض متصلة وواضحة بدلاً من أن تُضغط داخل صورة.
متن الرسالة: النص والدعوة للعمل والمحتوى
#3. اكتب عنواناً مخصصاً لكل قارئ
لماذا تنجح: العنوان الذي يذكر شيئاً يعرفه القارئ (اسمه، أو مقاسه، أو الفئة التي تصفّحها) يُقرأ كرسالة موجهة إليه، لا كبث عام.
بدلاً من: “اكتشف تشكيلتنا الجديدة” ← جرّب: “سارة، مقاسك من أحذية الطرق الوعرة متوفر من جديد.”
في Pushwoosh: أدرج الاسم كوسم دمج من شريط أدوات Heading block، وحدّد قيمة افتراضية مثل “عزيزنا العدّاء” للقراء الذين لا يتوفر اسمهم. ولسطر مختلف حسب اللغة أو الدولة، استخدم قوالب Liquid. هذا مفيد في دول الخليج تحديداً، حيث يتلقى جزء من جمهورك الرسائل بالعربية وجزء آخر بالإنجليزية.
#4. امنح كل رسالة دعوة واحدة للعمل تبرز بوضوح
لماذا تنجح: كل زر إضافي يشتت الانتباه. دعوة رئيسية واحدة بلون متباين تخبر القارئ بما يفعله بعد ذلك، وعلى الهاتف تحتاج مساحة نقر لا تقل عن 44×44 pt، وفق إرشادات واجهة الإنسان من Apple.
بدلاً من: 3 أزرار متساوية (“تسوّق الآن”، “اعرف المزيد”، “عرض الكل”)، أو زر مدمج داخل صورة ← جرّب: زراً واحداً بنص حي، “اعثر على مقاسي”، بلون التمييز الخاص بعلامتك.
في Pushwoosh: نسّق Button block بخلفية صلبة أو متدرجة، وزوايا مستديرة، وحشوة داخلية، واضبط حشوة أكبر على الجوال ليبقى الزر بحجم يناسب الإبهام. وفي التخطيط العربي، ضع الزر حيث تنتهي عين القارئ: محاذياً لليمين مع النص، أو في المنتصف.
#5. املأ شبكات المنتجات من بيانات حية
لماذا تنجح: المنتجات النافدة والأسعار القديمة تكلّفك النقرات والثقة.
بدلاً من: 6 أحذية منسوخة في القالب يوم الاثنين، نفد 2 منها بحلول الخميس ← جرّب: شبكة من أحذية الطرق الوعرة مبنية على ما شاهده كل قارئ، مسحوبة من الكتالوج الحي.
في Pushwoosh: يملأ Products block العناصر وفق قاعدة من الكتالوج، أو من السلة المتروكة لدى المستلم، أو باستراتيجية توصية مثل الأكثر مبيعاً، أو العائد إلى المخزون، أو المبني على ما شاهده. يتزامن موجز Product catalog (كتالوج المنتجات) كل ساعة، فتبقى الأسعار والمخزون محدّثة دون أن يعدّل أحد الرسالة. وهذا ما يحتاجه متجرك في ذروة الجمعة البيضاء، حين ينفد المخزون خلال ساعات.
لتطبيقات الإعلام والمحتوى، يؤدي News block الأمر نفسه مع المقالات من موجزاتك، مع مقدمات مكتوبة بالذكاء الاصطناعي تحت كل عنوان.
#6. خصص لكل جمهور قسمه الخاص
لماذا تنجح: العضو الوفي والعميل الذي لم يطلب منذ 3 أشهر يحتاجان أسباباً مختلفة للنقر.
بدلاً من: عرض “التشكيلة الجديدة” نفسه للجميع ← جرّب: قسماً واحداً بـ 3 نسخ: وصول مبكر لأعضاء برنامج الولاء، وخصم 25% لكل من لم ينشط منذ 90 يوماً أو أكثر، والوافدون الجدد لبقية الجمهور.
في Pushwoosh: أضف شرط عرض لكل نسخة، مبنياً على Tags أو على تعبير Liquid، واربطها بـ IF / ELSE IF / ELSE. حملة واحدة تبنيها وتختبرها، و3 رسائل مختلفة في صناديق الوارد.
#7. اجعل الإلحاح ملموساً بعدّاد تنازلي
لماذا تنجح: كلمة “قريباً” مجردة. الموعد النهائي الظاهر يحوّل “ربما لاحقاً” إلى قرار على القارئ أن يتخذه الآن.
بدلاً من: “العرض ينتهي قريباً!” في الموضوع والعنوان والزر ← جرّب: عدّاداً تنازلياً حتى النهاية الفعلية لعرض الـ 48 ساعة، موضوعاً بجوار الدعوة للعمل مباشرة.
في Pushwoosh: أضف Timer block، وحدّد تاريخ الانتهاء ووقته ومنطقته الزمنية، ونسّق الأرقام بألوان علامتك. إن كان جمهورك موزعاً بين الرياض ودبي والقاهرة، فاختر المنطقة الزمنية التي ينتهي فيها العرض فعلاً، كي لا يرى أي قارئ موعداً مختلفاً عن الموعد الحقيقي. وإن كان عرضك يُستردّ في المتجر الفعلي، فإن Barcode block يعرض رمزاً قابلاً للمسح لكل مستلم.
أسفل الرسالة: التذييل
#8. ابنِ التذييل مرة واحدة وأبقه متزامناً في كل مكان
لماذا تنجح: يحمل التذييل رابط إلغاء الاشتراك والعنوان البريدي والنص القانوني. يجب أن يكون صحيحاً في كل رسالة.
بدلاً من: تذييل يُنسخ ويُلصق من حملة إلى أخرى حتى تظهر نسختان من النص القانوني ← جرّب: تذييلاً واحداً يُحدَّث في مكان واحد.
في Pushwoosh: ابنِ تذييلاً واحداً بأنماط علامتك، يضم رابط إلغاء الاشتراك والعنوان البريدي وروابط التواصل الاجتماعي، واحفظه ككتلة قابلة لإعادة الاستخدام مع تفعيل Keep copies in sync. عدّل العنوان مرة واحدة، فتتحدث كل رسالة تستخدم هذا التذييل، بما فيها الرسائل المجدولة للإرسال.
نصيحة: Smart check (الفحص الذكي) ينبّهك إلى أي رسالة تسويقية بلا عنوان بريدي في التذييل، ويحذّرك حين تتجاوز الرسالة حد القص في Gmail البالغ ~102 KB، حيث يكون التذييل أول ما يُقطع.
سرّع تصميم البريد الإلكتروني بأدوات الذكاء الاصطناعي
الرسالة المميزة لا تحتاج أسبوعاً من العمل. هذه الأدوات (ملاحظة: متاحة لكل مستخدمي Pushwoosh) تختصر وقت الإنتاج وتساعد على تحسين التصميم.
المساعد الذكي
صِف الرسالة في AI tab، ويجمّع لك المساعد رسالة كاملة.
الصور والنص البديل بالذكاء الاصطناعي
تنشئ Generate with AI صورة من وصف نصي، مباشرة داخل Image block. وتكتب Generate alt with AI النص البديل انطلاقاً من الصورة نفسها.
أسطر الموضوع والنص التمهيدي بالذكاء الاصطناعي
بعد بناء المحتوى، تكفي نقرة واحدة لصياغة سطر موضوع ونص تمهيدي مما تحويه الرسالة فعلاً.
الترجمة التلقائية
تُملأ نسخ اللغات الناقصة بالذكاء الاصطناعي، بدلاً من كتابة كل لغة يدوياً. فإن بنيت الرسالة بالعربية، تحصل على نسختها الإنجليزية لجمهورك الناطق بالإنجليزية في الخليج دون إعادة كتابتها.
Brand book والكتل المتزامنة
الأنماط والترويسة والتذييل من الممارستين 1 و8 تعني ألا يعيد أحد بناء الأساسيات لكل حملة جديدة.
ابنِ أول رسالة مميزة لك
-
ابدأ من قالب أو من وصف نصي.
تخطيط من مكتبة قوالب البريد الإلكتروني، أو مسودة أولى من المساعد الذكي.
-
طبّق دليل علامتك التجارية.
أنماط العلامة وترويسة متزامنة: الممارسة 1.
-
راجع الرسالة من أعلاها إلى أسفلها.
الصورة الرئيسية، والعنوان، والدعوة للعمل، والمنتجات، وأقسام الجمهور، والعدّاد التنازلي، والتذييل.
-
صمّم نسخة الجوال.
لا تترك تخطيط سطح المكتب يتقلص ببساطة على شاشة الهاتف. انتقل إلى عرض الجوال، القابل للتعديل بالكامل بعرض هاتف حقيقي، واختر Stack أو Keep row أو Reverse لكل صف في Columns block. اضبط أحجام الخطوط والحشوات وأبعاد الصور الخاصة بالجوال، واستخدم Hide on mobile أو Hide on desktop للكتل التي لا معنى لها إلا على شاشة واحدة. هذا هو تصميم البريد الإلكتروني المتجاوب دون كتابة media query واحد. ولأن أكثر من 70% من مستخدمي الجوال في منطقة الشرق الأوسط وشمال أفريقيا على Android، اختبر نسخة الجوال على هاتف Android قبل أي شيء آخر.
-
اختبر.
شغّل Smart check، ثم أرسل رسالة اختبار إلى ما يصل إلى 50 عنواناً.
-
أرسل، ثم اقرأ خريطة النقرات.
يرسم Click map tab خريطة حرارية فوق معاينة الرسالة، فترى أي العناصر جذبت النقرات، وهل أدّت الصورة الرئيسية الجديدة دورها.
