كيفية انشاء ايميل بـ تنسيق HTML (دليل شامل)

تنسيق HTML

إن أفضل طريقة لفهم أي عملية هي تنفيذها بشكل شخصي من الألف إلى الياء ولا يختلف هذا الحال عن انشاء ايميل بـ تنسيق HTML

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

 

ما هو ايميل HTML وما هو الفرق بين ايميل HTML والايميل العادي

عند انشاء ايميل باستخدام أداة السحب والإفلات Drag-and-Drop أو القائمة على الوحدة النمطية Module-Based فإنه يكون بـ تنسيق HTML.

هناك نوعان رئيسيان من البريد الإلكتروني التي يمكن إرسالها واستقبالها:

  • رسائل البريد الإلكتروني النصية العادية Plain Text Emails (أي بريد إلكتروني يحتوي على نص عادي فقط بدون تنسيق)
  • رسائل بريد الكتروني HTML أو بريد إلكتروني بلغة البرمجة أو بلغة ترميز النص التشعبي، والتي يتم تنسيقها وتصميمها باستخدام HTML وأوراق الأنماط المتتالية المضمنة CSS.

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

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

اقرأ أيضاً: ما أهمية التسويق عبر البريد الإلكتروني … الدليل الشامل للتسويق عبر الايميل

 

كيفية انشاء ايميل بـ تنسيق HTML

في الواقع ليس هناك حاجة لمعرفة كيفية البرمجة لانشاء ايميل بـ تنسيق HTML.

حيث تقدّم معظم الأدوات التي تنشئ بريداً وترسله قوالب HTML مسبقة التنسيق وجاهزة للانطلاق تتيح التصميم دون الحاجة إلى الوصول إلى الرمز الفعلي في الواجهة الخلفية Back-End.

وأثناء إجراء تغييرات في محرر الايميل، سيتم ترميز هذه التغييرات تلقائياً في المنتج النهائي.

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

اقرأ أيضاً: كيفية كتابة ايميل تسويقي من أجل إطلاق منتج جديد

 

أهم النصائح من أجل تحسين تصميم ايميل بـ تنسيق HTML وتجربة المستخدم

1- التأكد من أن الايميل بهذا التنسيق يستجيب لأحجام الشاشة والأجهزة المختلفة:

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

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

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

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

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

 

2- التأكد من أن التصميم يعمل مهما كان نوع عميل الايميل:

هناك عامل آخر يؤثر بشكل كبير على الطريقة التي تظهر بها الرسائل بـ تنسيق HTML في صناديق الوارد للمشتركين وهو عميل الايميل الذي يستخدمونه لفتح الرسالة.

يقوم كل عميل بريد إلكتروني بتحميل الرسائل بشكل مختلف قليلاً، لذلك من المرجح أن يبدو الايميل في جيميل Gmail مختلفة عنها في آوت لوك Outlook.

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

الأمر كله يتعلق بمعرفة العلامات غير المدعومة التي يجب تجنبها والتكيف وفقاً لذلك.

 

3- الاهتمام بالمدة التي يستغرقها الايميل بـ تنسيق HTML للتحميل:

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

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

فيما يلي بعض الخطوات الصغيرة التي يمكن اتخاذها لتحسين وقت التحميل:

  • استخدام الصور بحجم صغير:

يجب استخدام  ضاغط الصور (مثل Compressor.io) لتقليل حجم الملف قدر الإمكان.

حيث يمكن لمعظم الضواغط تقليل حجم ملف الصورة بشكل كبير دون التأثير على الجودة.

لذلك فإن اتخاذ هذه الخطوة الإضافية لن يضر بالنزاهة البصرية للايميل.

  • استخدام خطوط الويب القياسية:

تعد الخطوط المخصصة رائعة لتمييز صفحة الهبوط Landing Page، ولكنها تشكل طبقة غريبة من التعقيد عند إضافتها إلى بريد إلكتروني.

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

 

  • استخدام أداة تصغير HTML:

تقوم أداة التصغير HTML minifier (مثل minifycode.com و smallseotools.com) تلقائياً بإزالة التعليمات البرمجية غير المطلوبة في ملف HTML.

حيث يتم تجريد العناصر الإضافية المتكررة، ولكن مع بقاء التقديم الفعلي للبريد الإلكتروني كما هو.

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

 

  • الحفاظ على تركيز الرسالة على هدف واحد:

أفضل طريقة لتقليل وقت تحميل البريد الإلكتروني هي تقليل مقدار المحتوى الذي يتم إضافته إليه.

قد يبدو الأمر واضحاً، ولكن الكثير من المسوقين يحاولون حشو الكثير من المحتوى في رسائل البريد الإلكتروني.

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

 

4- التخطيط قدر المستطاع:

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

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

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

  • التفكير في إنشاء إصدار صفحة ويب من البريد الإلكتروني:

هذا يشبه إلى حد ما إعطاء البريد الإلكتروني زراً آمناً من الفشل.

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

 

  • إنشاء نسخة نصية عادية من البريد الإلكتروني:

تعد إضافة نسخة نصية عادية من بريد بـ تنسيق HTML أمراً مهماً لأن بعض عملاء البريد الإلكتروني وإعدادات المستخدم لا يمكنهم (أو يختارون عدم) تحميل HTML.

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

ستوفر معظم أدوات البريد الإلكتروني تلقائياً إصداراً نصياً عادياً يتم عرضه إذا كان خادم البريد للمستلم يتطلب ذلك.

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

MIME هي رسالة بريد إلكتروني تحتوي على نص عادي وإصدار HTML من نفس البريد الإلكتروني.

إذا كان عميل البريد أونظام الأمان الخاص بالمستلم لا يسمح بالبريد الإلكتروني بتنسيق HTML، فسيتم عرض إصدار النص العادي.

لكن هذه العملية تتطلب معرفة متقدمة بالترميز، لذلك يجب العمل مع مطور.

 

  • التأكد من أن البريد الإلكتروني لا يزال مفهوماً ومنطقياً إذا لم يتم تحميل الصور:

لدى بعض المستخدمين خاصية إيقاف تشغيل تحميل الصور تلقائياً.

مما يعني أنهم سيرون البريد الإلكتروني بدون صور عند فتحه.

لهذا السبب، يجب عدم الاعتماد الكلي على الصور لإيصال معنى الرسالة، وإضافة نص بديل Alt-Text إلى الصور التي يتم تضمينها.

 

5- إجراء اختبار شامل:

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

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

اقرأ أيضاً: كيف تكتب ايميل تسويقي: أهم 10 نصائح لكتابة بريد الكتروني مقنع

 

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

1- قالب هاب سبوت HubSpot

مدرج في الإصدار المجاني من هاب للتسويق marketing hub.

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

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

 

2- قالب كومباني نيوز Company News  بواسطة كامبين مونيتور Campaign Monitor

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

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

 

3- قالب أنلاير Unlayer

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

يتمتع  بطريقة رائعة لعرض المحتوى الذي تم إنشاؤه وربط المشتركين بأحدث المنتجات أو منشورات المدونة.

يتميز التصميم بعمودين متجاوبين مع خيارات متعددة لنظام الألوان، ومساحة لتسليط الضوء على عبارة تحث المستخدم على اتخاذ إجراء.

 

4- قالب ميني ماليست MINImalist

دليل على أنه في بعض الأحيان يكون الأقل أكثر فائدة.

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

وبدون تشتيت انتباه التصميم يمكن أن يلمع المحتوى حقاً على أي جهاز.

 

5- قوالب من بي فري Bee Free

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

كما يمكن تحريرها والبناء عليها على النظام الأساسي لـ بي فري، ثم يتم تصدير ملف HTML إلى محرك الأقراص المحلي.

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

يتوفر كل قالب بتنسيقات متعددة لأغراض تسويقية مختلفة، مثل رسائل البريد الإلكتروني للمعاملات وإعادة مشاركة مشترك البريد الإلكتروني.

 

6- قالب كامبين مونيتور Campaign Monitor

سيكون هذا التصميم الأنيق والمتجاوب مثالياً لإرسال رمز خصم.

يمكن أن يكون أيضاً بمثابة طريقة أنيقة لعرض أحدث المنتجات على مشتركي البريد الإلكتروني.

كما يُفضل التحقق من مكتبة  كامبين مونيتور الكاملة لقوالب البريد الإلكتروني سريعة الاستجابة.

 

تعد رسائل البريد الإلكتروني بتنسيق HTML طريقة جذابة لمشاركة ما يحدث في العمل والحفاظ على عودة المشتركين للحصول على المزيد.

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

 

المصادر

هنا

وهنا

 

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top