كيفية إنشاء قوالب بريد إلكتروني متجاوبة في Braze

Email designer comparing a responsive email layout on a laptop and smartphone

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

‍

أبرز النقاط

يظل القالب المتجاوب مقروءاً على الهاتف حتى عندما يقوم عميل البريد الإلكتروني بإزالة جزء من كود CSS الخاص بك.
اختر المحرر بناءً على مستوى التحكم الذي تحتاجه: الصفوف مع خيار "الإخفاء على الجوال" في محرر السحب والإفلات، أو CSS الخاص بأحجام الشاشات في محرر HTML.
حافظ على عرض القالب المشترك للجوال وسطح المكتب أقل من 500 بكسل، مع بنائه باستخدام جداول متداخلة وتنسيقات مضمنة (inline styles).
قم بتعيين لون خلفية للحاوية الخارجية ولكل قسم رئيسي حتى لا يؤدي الوضع الداكن إلى إخفاء المحتوى.
كود HTML المسترجع من "المحتوى المتصل" (Connected Content) لا يتم تضمين تنسيقاته تلقائياً، لذا تأكد من إرجاعه مع تنسيقات مضمنة بالفعل.
اختبر القالب بترتيب ثابت: عرض الجوال، الوضع الداكن، المعاينة كمستخدم، ميزة Inbox Vision، ثم على أجهزة حقيقية.

‍

ما الذي يجعل قالب البريد الإلكتروني متجاوباً في Braze؟

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

تتجه إرشادات البريد الإلكتروني في Braze إلى نفس المسار؛ فهي تقترح أنماطاً متجاوبة تبدأ من الجوال (mobile-first) ولا تعتمد فقط على استعلامات الوسائط للعرض على الجوال. تعامل مع هذه الجملة كقاعدة أساسية لكل قالب، وما يلي في هذا المقال مبني عليها.

‍

ما هو المحرر الذي يجب أن تستخدمه لبناء قوالب متجاوبة؟

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

‍

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

‍

لماذا يجب أن يعمل التخطيط بدون استعلامات الوسائط؟

تقوم بعض عملاء البريد الإلكتروني بإزالة تنسيقاتك قبل أن يرى القارئ أي شيء. تشير Braze إلى أنه إذا كان البريد الإلكتروني يحتوي على الكثير من كود CSS، فقد يقوم Gmail بإزالة كتلة التنسيق بالكامل. بالنسبة لحسابات غير Gmail في تطبيق Gmail، لا يتم دعم CSS الموجود في رأس الصفحة (head) على الإطلاق.

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

هناك أربع قواعد موثقة للحفاظ على سلامة هذا التخطيط الاحتياطي.

حافظ على العرض أقل من 500 بكسل إذا كان القالب الواحد مخصصاً لكل من الجوال وسطح المكتب.
استخدم جداول متداخلة للتخطيط، وليس وسوم div، وتجنب استخدام التموضع المطلق (absolute) أو النسبي (relative).
استخدم الأنماط المضمنة (inline styles) في CSS بدلاً من الاعتماد على كتلة الأنماط (style block).
لا تقم بتعيين ارتفاعات وعروض ثابتة للصور، لأن ذلك قد يترك مساحات بيضاء في حال تعطل عرض البريد الإلكتروني.

‍

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

‍

كيف تمنع الوضع المظلم (Dark mode) من إفساد تنسيق القالب؟

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

الحل محدد؛ قم بتعيين لون خلفية للحاوية الخارجية ولكل قسم رئيسي، بدلاً من الاعتماد على صور الخلفية فقط للمناطق الفاتحة. بعد ذلك، قم بتفعيل "الوضع المظلم" في المعاينة والاختبار داخل محرر السحب والإفلات، وافحص كل قسم، وليس فقط القسم الرئيسي (hero).

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

‍

أين تُحدث "كتل المحتوى" (Content Blocks) و"المحتوى المتصل" (Connected Content) تغييراً في النتيجة؟

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

يمكن أن تكون المعاينة مضللة هنا أيضاً. عند استخدام Liquid في "كتلة المحتوى"، تشير Braze إلى أن استعلامات الوسائط (media queries) الخاصة بالهاتف المحمول داخل الكتلة قد لا تُطبق في المعاينة بنفس الطريقة. تحقق من تلك الكتل على جهاز حقيقي قبل الوثوق بالمعاينة.

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

‍

ما هو الترتيب الذي يجب أن تتبعه لاختبار القالب المتجاوب؟

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

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

‍

يحتوي "Inbox Vision" على قيدين يستحقان التخطيط لهما. شركتك لديها حد أقصى للمعاينة، لذا احتفظ بها للقوالب التي اجتازت الخطوات الثلاث الأولى. كما أنه لا يدعم الرسائل التي تحتوي على منطق إلغاء (abort logic)، وتنصح Braze بإضافة قيم افتراضية إلى Liquid قبل تشغيله.

‍

ما هي الإخفاقات التي يجب أن تبحث عنها عند مراجعة القالب؟

امنح الأخطاء الشائعة أسماءً مختصرة، حتى يتمكن المراجع من الإشارة إليها في تعليق بدلاً من وصفها. "الرجوع لسطح المكتب" (Desktop fallback) هو ظهور تخطيط سطح المكتب على الهاتف بسبب حذف كتلة الأنماط (style block). ويتم التحقق منه بقراءة القالب بعد حذف كتلة الأنماط.

"الفقرة المختفية" (Vanishing paragraph) هي نص أساسي يختفي عند تفعيل السمة الداكنة لدى العميل. ويتم التحقق منها عبر تفعيل خيار "الوضع الداكن" (Dark mode) مع تجربة عميل واحد على الأقل يستخدم سمة داكنة في Inbox Vision.

"الكتلة العريضة" (Wide block) هي كتلة محتوى مشتركة تم إنشاؤها لعرض قالب مختلف. ويتم التحقق منها بمقارنة إعداد عرض الكتلة مع عرض القالب قبل إدراجها. أما "الجزء غير المضمن" (Uninlined fragment) فهو كود HTML للمحتوى المتصل يصل بدون أنماط مضمنة، ويتم التحقق منه عبر إرسال تجريبي مع فحص النتيجة التي يعيدها نقطة النهاية.

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

‍

كيف يبدو الهيكل الأساسي المصمم للهواتف أولاً (mobile-first)؟

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

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;">
  <tr>
    <td align="center" style="background-color:#ffffff;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:480px;background-color:#ffffff;">
        <tr>
          <td style="padding:16px;font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#1a1a1a;background-color:#ffffff;">
            مرحباً {{ ${first_name} | default: 'عزيزي' }}، طلبك في الطريق إليك.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

‍

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

‍

أين يرتبط هذا ببقية البرنامج؟

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

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

بصفتها شريكاً في تنفيذ Braze، توصي CustomerIK بحذف كتلة الأنماط من مسودة القالب وقراءة ما تبقى. إذا كان هذا الإصدار يعمل بشكل جيد على الهاتف، فإن القالب جاهز لاستقبال استعلامات الوسائط (media queries).

‍

الأسئلة الشائعة
‍

1. هل يمكنني معاينة الوضع الداكن في محرر السحب والإفلات الخاص بـ Braze؟

نعم. انتقل إلى "المعاينة والاختبار" (Preview and Test) في محرر السحب والإفلات وقم بتفعيل "الوضع الداكن" (Dark mode)، ثم تأكد من النتيجة عبر عملاء مختلفين في Inbox Vision.

2. هل يمكنني ضبط هوامش (padding) مختلفة للهاتف في محرر السحب والإفلات؟

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

3. لماذا يظهر بريدي الإلكتروني بتنسيق سطح المكتب في تطبيق Gmail؟

قد يقوم Gmail بإزالة كتلة التنسيق (style block) بالكامل إذا كان البريد الإلكتروني يحتوي على الكثير من أكواد CSS أو أكواد لا يدعمها التطبيق. لذا، احرص على تصميم تخطيط يسهل قراءته حتى في حال غياب كتلة التنسيق.

4. ما هو العرض المناسب لقالب البريد الإلكتروني المتجاوب؟

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

5. هل تقوم Braze بتضمين أكواد CSS (inline CSS) في استجابات المحتوى المتصل (Connected Content)؟

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

‍

المصادر

Braze،محرر السحب والإفلات. تم الاسترجاع في 14 أكتوبر 2026.
Braze،الأسئلة الشائعة حول محرر السحب والإفلات. تم الاسترجاع في 14 أكتوبر 2026.
Braze،إرشادات البريد الإلكتروني. تم الاسترجاع في 14 أكتوبر 2026.
Braze،تضمين CSS. تم الاسترجاع في 14 أكتوبر 2026.
Braze،رؤية البريد الوارد. تم الاسترجاع في 14 أكتوبر 2026.
Braze،إعدادات النمط العام للبريد الإلكتروني. تم الاسترجاع في 14 أكتوبر 2026.
Braze،الأسئلة الشائعة حول Liquid. تم الاسترجاع في 14 أكتوبر 2026.

‍

CustomerIK هي شريك تنفيذ لـ Braze، وتعمل في مجالات الإعداد، والتكامل التقني، وعمليات التسويق، وإدارة بيانات العملاء.

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

‍