التصاميم والقوالب والأمثلة لعام 2023

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

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

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

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

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

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

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

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

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

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

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

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

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

تصاميم البريد الإلكتروني المستجيبة

هناك العديد من الطرق التي يمكنك من خلالها تصميم رسائل بريد إلكتروني سريعة الاستجابة.

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

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

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

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

إذا كنت تتطلع إلى جعل عناصر بريدك الإلكتروني تستجيب ، فستحتاج إلى التعامل مع استعلامات الوسائط.

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

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

• استخدم المحدد "media" وحدد "الشاشة". يشير هذا إلى أن الرمز سيؤثر على الأجهزة ذات الشاشة.
• اضبط "max-width" في البكسل. يحدد هذا حجم الشاشة حيث سيتم تفعيل الرمز.
• حدد أي أدلة نمط CSS تريد أن تتبعها تلك الشاشة المحددة.

دعنا نلقي نظرة على الكود أدناه.

شاشةmedia و (أقصى عرض: 600 بكسل)

جسم

حجم الخط: 30 بكسل ؛

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

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

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

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

أمثلة على تصميم البريد الإلكتروني المستجيب

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

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

1. نشرة تومز الإخبارية

في النشرة الإخبارية لـ TOMS ، يتمثل الاختلاف الرئيسي بين إصدار سطح المكتب وإصدار الهاتف المحمول في تكديس الإعلانات الصورية وحجمها.

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

مصدر الصورة

2. متحف متروبوليتان للفنون

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

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

مصدر الصورة

3. التوت

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

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

مصدر الصورة

قوالب البريد الإلكتروني المستجيبة

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

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

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

دعنا نلقي نظرة على بعض خيارات النموذج الآن.

1. HubSpot

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

على سبيل المثال ، إليك أحد قوالب البريد الإلكتروني سريعة الاستجابة - لاحظ الشريط الجانبي ، حيث يمكنك معاينة القالب على أجهزة متعددة.

مصدر الصورة

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

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

2. مراقبة الحملة

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

مصدر الصورة

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

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

3. ستريبو

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

مصدر الصورة

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

لاحظ كيف تم اعتماد تخطيط عمود واحد في معاينة الجوال ليلائم مواصفات الهواتف.

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

4. الاتصال المستمر

يوفر Constant Contact أكثر من 200 نموذج بريد إلكتروني احترافي يمكن الوصول إليها بعد التسجيل. من خلال النظر إلى المثال أدناه ، يمكنك أن ترى أن النظام الأساسي يقدم قوالب بريد إلكتروني سريعة الاستجابة.

مصدر الصورة

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

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

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

أفضل ممارسات البريد الإلكتروني المستجيب

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

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

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

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

الابتداء مع رسائل البريد الإلكتروني المستجيبة

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

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

أخيرًا ، لا تخف من التجربة. يمكنك اختبار A / B تصميمات متجاوبة مختلفة حتى تجد تصميمًا له صدى أكبر.

قريبًا ، سترسل رسائل بريد إلكتروني سريعة الاستجابة وتزيد من معدلات فتح حسابك.