كيفية إنشاء قالب بريد إلكتروني باستخدام HTML & CSS؟

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

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

التصميم

 موصى به لك: كيفية تسريع عملية التصميم باستخدام أطر CSS الحديثة؟

الهيكل

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

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

النمط

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

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

المحتوى

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

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

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

النمط المضمن

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

 قد يعجبك أيضًا: 7 نصائح مفيدة لجعل سطر موضوع بريدك الإلكتروني أكثر قابلية للنقر.

جسم

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

 <body bgcolor="#f7d973" ></body>

طاولة

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

الصف الأول - رأس

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

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

الصف الثاني

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

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

الصف الثالث

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

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

الصف الرابع

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

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 وأخيرًا ، التذييل. هناك القليل جدا مما يحدث هنا. فقط بعض التباعد عبر الحشو وهذا كل شيء!
		








<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
الكلمات الأخيرة

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