دليل المبتدئين لإنشاء وإرسال بريد إلكتروني بتنسيق HTML

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

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

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

ما هو البريد الإلكتروني بتنسيق HTML؟

يمكن أن تأتي رسائل البريد الإلكتروني التي تصل إلى صندوق الوارد الخاص بك في نسختين:

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

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

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

لماذا تستخدم البريد الإلكتروني بتنسيق HTML على تنسيق النص العادي

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

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

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

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

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

العناصر الأساسية (والممارسات النموذجية) لبريد إلكتروني بتنسيق HTML

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

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

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

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

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

النظر في بعض الممارسات النموذجية لرسائل البريد الإلكتروني بتنسيق HTML

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

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

هناك عدة أسباب لذلك:

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

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

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

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

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

النهج التقني الذي ستحتاج إلى اتخاذه لإنشاء بريد إلكتروني بتنسيق HTML

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

على سبيل المثال الأخير ، يقدم HTML5 عددًا من العلامات المختلفة لتحديد مناطق المحتوى في موقعك.

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

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

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

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

باستخدام الشرطية

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

في صدق ، هذه دائمًا مشكلة قائمة على Microsoft. بالنسبة لمطوري الويب ، كان Internet Explorer (IE) هو المستعرض الشيطاني. ومع ذلك ، بالنسبة لرسائل البريد الإلكتروني بتنسيق HTML ، فهو Outlook. بين الإصدارات المختلفة ، قد ترى أن تصميمك يظهر بطريقة لم تكن تتوقعها.

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

أول كلمة:

 <!--[if mso]>

هذا للإصدارات المستندة إلى Word من Outlook:

 <![endif]-->

بالنسبة إلى Internet Explorer ، يمكنك استخدام علامة مختلفة:

 <!--[if (IE)]>

هذا مخصص لإصدارات Outlook المستندة إلى IE:

 <![endif]-->

إذا كان المستعرض الذي تستهدفه يعتمد على WebKit (مثل Apple Safari ومتصفح PlayStation و Amazon's Kindle والمزيد) ، فيمكنك استخدام استعلام وسائط لتوفير نمط محدد:

 .html-email-webkit { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { ..html-email-webkit { display: block !important; } }

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

خياراتك لبناء رسائل بريد إلكتروني بتنسيق HTML

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

ومع ذلك ، هناك خيارات أخرى يمكننا وضعها في الاعتبار:

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

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

3 مزودي خدمة بريد إلكتروني مثاليين لإنشاء رسائل بريد إلكتروني بتنسيق HTML

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

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

1. Mailchimp

يُعد مزود خدمة البريد الإلكتروني هذا حلاً سريعًا - تقريبًا قرار غير مفصل بالنسبة للكثيرين. Mailchimp هو المعيار الذهبي في تطبيقات التسويق عبر البريد الإلكتروني في نظر الكثيرين ، وهناك الكثير من الأسباب الوجيهة لذلك:

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

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

اشترك في النشرة الإخبارية

تريد أن تعرف كيف قمنا بزيادة حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول WordPress!

إشترك الآن

من السهل أيضًا العمل مع HTML الحالي ، خاصةً إذا كنت تستخدم Mailchimp's Classic Builder. بغض النظر ، لديك طرق لاستيراد قوالب HTML إذا كنت بحاجة إليها.

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

2. أوبر

بالنسبة للبعض ، تمثل AWeber ذروة التسويق عبر البريد الإلكتروني. إنها منصة رائعة وقوية وتتضمن مجموعة ميزات يمكن القول إنها أكثر تركيزًا من Mailchimp.

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

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

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

هناك أيضًا محرر HTML مخصص ، وهذا ليس هو الحال مع Mailchimp. يمكنك حتى الحصول على هذا على المستوى المجاني لـ AWeber. بالحديث عن ذلك ، فإن الأسعار أكثر وضوحًا هنا. ستدفع حوالي 25 دولارًا شهريًا لما يصل إلى 2500 جهة اتصال.

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

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

تمامًا مثل AWeber ، يركز Constant Contact على التسويق عبر البريد الإلكتروني أكثر من المجالات الأخرى التي تركز على الأعمال التجارية. على هذا النحو ، يحتوي على مجموعة ميزات ستستمتع بها:

• لديك أدوات إدارة قائمة العملاء ووظيفة أتمتة التسويق.
• هناك خيارات واسعة لإعداد التقارير.
• يمكنك دمج البرامج الإعلانية من Facebook و Instagram و Google.
• هناك العديد من الطرق للتفاعل مع المشتركين الجدد وجذبهم إلى قوائمك.

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

التسعير معقول أيضا. ستدفع حوالي 35 دولارًا شهريًا للخطة الأساسية و 2500 جهة اتصال ، أو 70 دولارًا لخطة Plus.

ما ستحتاجه لبناء بريد إلكتروني بتنسيق HTML

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

• سترغب في استخدام محرر كود تجده مريحًا لأنه سيحتاج إلى دعمك أثناء العملية. إذا كنت لا تعرف أي واحد تختاره ، يختار الكثير من المستخدمين Visual Studio Code ، على الرغم من أن Brackets ستكون مثالية لهذه المهمة بالذات. سنستخدم Onivim2 ، وهو محرر بنمط Vim يعتمد على البنية التحتية الأساسية لـ VS Code.
• بينما ستحتاج إلى مهارات HTML ، فلن تحتاج إلى نفس مجموعة المعرفة التي يحتاجها مطور ويب حديث (على الرغم من أنها لا تضر بآفاقك).
• ستحتاج إلى طريقة لاختبار رسائل البريد الإلكتروني الخاصة بك - MailHog هو حل نعرضه في مكان آخر على مدونة Kinsta.
• على الرغم من أننا لن نستخدم نموذجًا تم إنشاؤه مسبقًا ، فقد ترغب في استخدام أحد هذه النماذج في المستقبل.
• ستحتاج أيضًا إلى مزود بريد إلكتروني ، حيث ستحتاج إلى طريقة ما لإرسال بريد HTML الإلكتروني النهائي.

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

كيفية إنشاء بريد إلكتروني بتنسيق HTML من الصفر

قبل أن نبدأ ، تجدر الإشارة إلى أننا لن نستخدم خدمة مخصصة مثل Mailchimp أو AWeber. بدلاً من ذلك ، سننشئ نموذجًا بسيطًا من البداية يمكنك استيراده أينما تريد.

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

1. أنشئ الأساس لبريدك الإلكتروني بتنسيق HTML

من الجيد أن تبدأ بالهيكل العظمي لقالب البريد الإلكتروني الخاص بك. سيتبع هذا بعض الممارسات النموذجية لـ HTML بشكل عام:

 <!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> </head> <body> </body> </html>

هناك بعض الأشياء التي تحدث هنا يجب أن نذكرها. أولاً ، نحدد "DOCTYPE" لـ Transitional XHTML 1.0 ، وهي ممارسة شائعة بين مطوري البريد الإلكتروني. من هناك ، نحدد مساحة اسم XML ، والتي ستكون مهمة لاحقًا.

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

باقي الهيكل العظمي واضح ومباشر - هناك العنوان وعلامات الجسم التي سنستخدمها بعد ذلك.

2. أضف هيكل نموذج البريد الإلكتروني الخاص بك

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

سيبدأ كل شيء بمجموعة بسيطة من علامات <table> داخل الجسم:

 <body> <table role="presentation"> <tr> <td> </td> </tr> </table> </body>

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

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

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

3. تضمين التصميم للعناصر الخاصة بك

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

كدليل أثناء التصميم ، سنضيف علامة <style> إلى <head> لعرض حد عام:

 <style> table, td {border:2px solid #000000 !important;} </style>

للبدء ، سوف نتأكد من عدم وجود مساحة غير متوقعة في الجسم أو الجدول الرئيسي (الذي يعمل هنا كجسم لدينا لأن بعض عملاء البريد الإلكتروني سوف يزيلون هذه العلامة):

 <body> <table role="presentation"> </body>

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

 <tr> <td align="center">Header </td> </tr>

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

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

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

4. اختبر بريدك الإلكتروني

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

على سبيل المثال ، يتضمن Email on Acid قائمة تحقق كاملة قبل النشر لمساعدتك على التأكد من أن القالب الخاص بك لا يسبب مشاكل:

سيعرف مستخدمو Litmus عن PutsMail ، لكنه متاح للجميع:

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

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

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

إرسال بريد إلكتروني بتنسيق HTML: ما تحتاج إلى معرفته

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

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

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

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

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

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

• معدل الارتداد لموقعك.
• عدد الشكاوى التي يتلقاها موقعك فيما يتعلق برسائل البريد الإلكتروني التي ترسلها.
• سمعة عنوان IP الخاص بك.
• توقيع اسم المجال الخاص بك.

يتعلق الأخير بالبريد المعرف بمفاتيح المجال (DKIM) وإطار سياسة المرسل (SPF). بالإضافة إلى ذلك ، يمكنك التحقق من سمعة عنوان IP الخاص بك من خلال خدمات مثل SenderScore أو IPQualityScore.

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

Mailgun هو حل ذكرناه سابقًا ، وقد يكون هذا مثاليًا. ومع ذلك ، هناك خدمات أخرى مثل Mailjet و Sendinblue وحتى خدمة Gmail الخاصة.

تعرف على كيفية إنشاء رسائل بريد إلكتروني بتنسيق HTML وإرسالها مع القليل من المساعدة من هذا الدليل انقر للتغريد

ملخص

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

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

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