التوزيع والتغلب: التخطيط الآن والآن

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

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

عميل البريد الإلكتروني WorldCast ، 2000

عميل بريد Gmail الإلكتروني 2018

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

التاريخ: بين الحين والآخر ، أو لماذا كل شيء سيء للغاية

بادئ ذي بدء ، دعونا نتذكر كيف بدأ كل شيء.
في أواخر التسعينيات ، ظهرت أول أحرف HTML. بسيط ، مع الحد الأدنى من استخدام إمكانات HTML 4.01 و CSS2 (ستظهر المسودة الأولى لـ CSS3 في غضون بضع سنوات أخرى). في 1996-1997 ، بدأ ظهور أول برامج البريد الإلكتروني المستندة إلى المستعرض. بدأ عصر عملاء الويب المجاني الذين يدعمون ترميز html.

واجهة Hotmail 1997

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

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

في يونيو 1999 ، أصدرت Microsoft Outlook 2000 ، حيث بدأت في استخدام محرك Internet Explorer ، Trident ، لتقديم الرسائل.

أثبت المحرك الجديد أنه ليس في أفضل حالاته لمطوري المواقع الإلكترونية وجلب معه عددًا كبيرًا من الأخطاء ، ظل أشهرها "خارج الترتيب" عن عدة إصدارات أخرى من عميل البريد الإلكتروني على التوالي. الحظر التلقائي لجميع الصور ونقص النص البديل ، ووظائف HTML غير معطلة ، ومعاينات البريد الإلكتروني المكسورة قبل الإرسال ليست سوى غيض من فيض من مشاكل Outlook 2000/2002 / XP / 2003.

صور القفل التلقائي في Outlook 2003

في يناير 2007 ، تم إصدار إصدار جديد من عميل البريد الإلكتروني من Microsoft. جلب هذا الإصدار أخطر التغييرات في تاريخ Outlook. في الإصدار الجديد من Microsoft mailer ، انتقلوا من محرك Internet Explorer إلى محرك منتجهم الآخر - MS Word. تم شرح هذه الحاجة في المقام الأول من خلال "رعاية المستخدمين" و "زيادة أمان عميل البريد الإلكتروني". في الواقع ، تسبب هذا في خسائر فادحة في دعم خصائص CSS وخلق العديد من الأخطاء الجديدة ، مما أدى إلى تعقيد حياة كل من أنواع القوائم البريدية والمستخدمين العاديين.

جداول أتش تي أم أل كبيرة ورهيبة

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

وتم إيجاد حل: جداول html. يبدو الأمر بسيطًا ، ولكن في الواقع هذا يعادل التخلي عن استخدام القدرات والميزات الحديثة لـ HTML 4 و CSS2 والعودة إلى الأساليب القديمة (حتى في ذلك الوقت) لإنشاء التنضيد.

البريد الإلكتروني النموذجي في HTML

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

مر الوقت ، ولم تقف التكنولوجيا ثابتة ، وكانت مواصفات HTML و CSS متضخمة مع الميزات الجديدة ، ولكن Outlook ، ومعها بقي 15 ٪ من عملاء البريد الإلكتروني في العالم (في ذلك الوقت) في مكانهم أيضًا. فقط مع إصدار Outlook 2016 (المتبقي على نفس المحرك القديم لـ MS Word) ، بدأ موقف MS تجاه مستخدميها ، وكذلك تجاه مطوري النشرة الإخبارية ، في التغير. دخلت شركة Litmus ، المعروفة بخدمتها في اختبار البريد في مختلف عملاء البريد الإلكتروني ، في شراكة مع MS.

بدأ Litmus بمساعدة مطوري Outlook في تحديد أولويات المشاكل وتسريع حلها ، ومستخدمي الخدمة - مع القدرة على التحقق من رسائل البريد الإلكتروني الخاصة بهم مجانًا في برنامج البريد الإلكتروني هذا. وقد أتاح هذا ثماره ، لكنه لم يغير الموقف: في وقت كتابة هذا التقرير ، كان أحدث عميل من MS هو Outlook 2019 الذي تم الإعلان عنه مؤخرًا. مثير للاهتمام: أضاف دعم svg ، ولم يعد خط Times New Roman احتياطيًا لخطوط الويب. لكنها لا تزال "تنزف" MS Word مع كل المشاكل التي تلت ذلك.

الاختلافات بين التخطيط وتخطيط الموقع

في الوقت الحاضر ، يقوم Outlook بإغلاق المراكز الثلاثة الأولى مع 10٪ تقريبًا من المستخدمين (في المقام الأول - Apple Mail للهواتف المكتبية / المحمولة ، والثاني - Gmail للويب / الهواتف المحمولة) ، ولكن هذا لا يزال كثيرًا. لذلك ، للأسف ، لا يمكننا الابتعاد عن الطاولات حتى الآن.

لحسن الحظ ، أصبحت ميزات محركات Outlook معروفة لنا الآن. هذا أعطانا عدة أدوات لجعل الحياة أسهل مع الحروف: التعليقات الشرطية ولغة توصيف المتجهات.

تعليقات شرطية

يتذكر العديد من الأشخاص القدامى الذين صنعوا أيام IE6-8 ما هو.
"التعليقات الشرطية" هي آلية تمديد محرك IE تسمح لك بتحديد إصدارات معينة من IE وتطبيق القواعد التي نحتاجها لها. إذا كنا بحاجة إلى إضافة بعض الأنماط فقط لـ Outlook 2000 والإصدارات الأحدث ، فيمكننا كتابة:

<!-- [if gte mso 9]> <style type="text/css"> /*     Outlook */ </style> <![endif]--> 

أيضًا ، باستخدام التعليقات الشرطية ، يمكنك إجبار المحرك على عرض كتل ترميز معينة فقط لإصدارات معينة من Outlook:

 <!--[if (gte mso 9)|(IE)]> <table width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> 

غالبًا ما يتم استخدام التعليقات الشرطية مع ميزة Outlook أخرى - VML.

لغة توصيف المتجهات

Vector Markup Language (VML) هي لغة توصيف متجه طورتها شركة MS لوصف الرسومات المتجهة في عام 1998. في وقت لاحق أصبحت واحدة من اللغات التي كانت بمثابة الأساس للغة SVG المعروفة. منذ إصدار IE10 ، تم إيقاف VML ولم يعد مدعومًا أو قيد التطوير.

كيف ترتبط الرسومات المتجهة ولغة الترميز غير المدعومة وأحرف html؟ الأمر بسيط: صورة الخلفية بدون VML غير ممكنة في Outlook 2007/2010/2013/2016. لكن التعلم من أجل مثل هذه اللغة الجديدة أمر اختياري تمامًا: يمكنك استخدام أدوات الإنترنت الجاهزة التي ستفعل كل شيء من أجلك.

 <body> <div style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body> 

للأسف ، هذا لا ينفي حقيقة أنه من وقت لآخر لا يزال لديك لاختيار الخاص بك في VML بسبب حقيقة أنه في بعض إصدارات Outlook لديك إعداد تخطيط الخلفية.

جلب الجمال

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

النماذج

وصف مؤلفو emailmonks.com طريقة واحدة لإضافة نموذج عمل إلى البريد الإلكتروني. الآلية هي كما يلي: يتم جمع بيانات النموذج بواسطة وظيفة php كسمة URL ؛ ثم يتم تخزين هذه السمة في مستند بعيد أو جدول بيانات ؛ يتم طلب هذه السمة لاحقًا من المصدر المحدد وعرضها على الصفحة.

يعد دعم هذه النماذج جيدًا جدًا: في Apple Mail و iOS Mail و Outlook و Gmail لـ iOS / Android وفي برنامج البريد الإلكتروني الافتراضي لنظام Android ، فإنها تعمل خارج الصندوق.

سلايدر

يعلم الجميع ما هي أشرطة التمرير ، والكثير من الناس يعرفون كيفية جعلها تستخدم JS. ومع ذلك ، يمكنك جعل شريط التمرير باستخدام CSS / HTML النقي ، وحتى أنه يعمل بشكل صحيح في برامج البريد الإلكتروني الحديثة (باستثناء Outlook لنظام التشغيل Windows - ستحتاج إلى مفتاح احتياطي للتمرير).

سحر هذا المنزلق هو 20 سطرًا:

 .slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; } 

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

تفاعلية أخرى

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

يمكن العثور على تفاصيل تنفيذ هذا الخيار هنا .

ما هي الخطوة التالية؟

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

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