التوزيع والتغلب: أدوات لإنشاء واختبار الرسائل الإخبارية

كتابة رسائل البريد الإلكتروني هو الألم. تخطيط واختبار الحروف التكيفية مع تفاعلية (على سبيل المثال ، مع أشكال وشرائط التمرير) هو ألم في المربع. ومع ذلك ، ليس كل شيء ليس سيئًا للغاية إذا اخترت الأدوات المناسبة. في هذه المقالة ، سأتحدث عن أطر البريد الإلكتروني - MJML ومؤسسة رسائل البريد الإلكتروني - ومواردي المفضلة لاختبار القوائم البريدية - Litmus و Email On Acid .

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

لنفترض أنك تريد تعويض النشرة الإخبارية

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

مثال على قالب خطاب "خارج الصندوق" متوفر في Cerberus

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

تغييرات في قالب الرسالة في مصمم رسائل ستريبو

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

نحن نستخدم إطار بريد إلكتروني جاهز. Mjml

• جيثوب : mjmlio / mjml
• المطور: Mailjet
• تاريخ الإصدار: 2016
• الترخيص: MIT
• الشعبية: 7662+ نجمة
• النموذج : MJML

الأفكار الرئيسية المضمنة في الإطار:

1. قوالب سريعة الاستجابة ،
2. تبسيط العمل مع التعليمات البرمجية من خلال محرك القالب الخاص به ،
3. مجموعة من المكونات جاهزة للاستخدام داخل الرسالة ،
4. اندماج مريح في عملية تطوير القائمة البريدية.

يستخدم الإطار محرك القالب الذي يحمل نفس الاسم. إنه بسيط وقوي للغاية في نفس الوقت. ننسى الجدول العلامات ، thead ، tbody ، th ، tr ، td. ننسى أن الأنماط تحتاج إلى كتابتها مضمنة. نسيان البنية المعقدة غير المقروءة لرمز الحرف. إليك ما سيبدو عليه بريدك الإلكتروني باستخدام MJML:

<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml> 

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

يوفر MJML مكونات إضافية لمحرري النصوص الشائعة - Visual Studio Code و Atom و Sublime Text. يضيفون تسليط الضوء على بناء الجملة اللغوية وعلامة تبويب وعلامة تبويب مع معاينة لمجموعة التنضيد مباشرة في المحرر نفسه.

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

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

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

تفاصيل صغيرة ولكنها ممتعة: على موقع الويب في القسم الذي يحتوي على وثائق ، يوجد قسم يحتوي على وصف يشبه CanIUse لدعم مكونات MJML في برامج البريد الإلكتروني المختلفة. يمكنك التحقق على الموقع على الفور ولا تتساءل عن كيفية تصرف الرسالة ، على سبيل المثال ، في Outlook 2007.

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

نحن نستخدم إطار بريد إلكتروني جاهز. مؤسسة رسائل البريد الإلكتروني

• جيثب: رسائل البريد الإلكتروني من مؤسسة زورب
• المطور: ZURB
• تاريخ الإصدار: 2015
• الترخيص: MIT
• الشعبية: 6885+ نجمة
• قالب: Inky

إذا لم تكن السنة الأولى في عالم الواجهة الأمامية ، فربما سمعت (ولكن - أراهن - بالكاد استخدمته ؛)) حول Foundation for Sites . هذا الإطار ، الذي تم إنشاؤه من قبل المطورين من شركة ZURB ، حافظ منذ فترة طويلة على مكانته باعتباره ثاني أكثر شعبية (بعد Bootstrap) بين أطر الويب الأمامية.

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

أول شيء تفعله إذا قررت تجربة الإطار هو تثبيت Foundation CLI:

npm install --global foundation-cli

ثم يمكنك إنشاء مشروع جديد باستخدام الأمر:

foundation new --framework emails

وابدأ في تطوير الرسالة.

صحيح ، عليك الانتظار بضع دقائق حتى يتم تحميل جميع الوحدات والمكونات الضرورية. نظرًا لأنه يتم تنزيل عدد كبير من الملفات ، فلا تفاجأ بحجم المجلد - سيزن المشروع الفارغ 400+ ميغابايت. بالإضافة إلى cli ، تتوفر ميزة Live Reload خارج الصندوق ، ولوحة مرجعية أساسية مع جميع الاختراقات اللازمة ، والقوالب الجاهزة والأجزاء الجزئية ، بالإضافة إلى دعم SASS.

أساس بنية ملف مشروع رسائل البريد الإلكتروني

لدى FfE محرك قالب خاص بها - Inky. في جوهره ، يقوم بنفس عمل محرك قالب MJML - فهو يبسط العمل مع الجداول المتداخلة المعقدة باستخدام العلامات المختصرة:

 <container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container> 

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

يستخدم FfE شبكة مكونة من 12 عمودًا ، والتي يمكن تبسيطها إلى 2 أو 3 أو 4 أو 6 أعمدة ، كما تسمح لك بتعيين عدد الأعمدة بشكل منفصل لحالات الجوال وسطح المكتب.

يتم تطبيق نظام الجزئيات والمساعدين باستخدام مترجم ملف Panini ، الذي يستخدم محرك قوالب المقاود البسيط والمريح داخليًا.

على عكس MJML ، عند استخدام FfE ، يتم إنشاء نسختين من الحرف - أحدهما لعملاء سطح المكتب والآخر للجوال. بعد ذلك ، يمكنك تحديد نقطة التوقف التي تريد تبديل حالات سطح المكتب / الجوال فيها ، ويمكنك أيضًا تمكين أو تعطيل أي كتل للتخطيط الخاص بك باستخدام فئات خاصة: .hide-for-Large و .show-for-Large.

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

أدوات اختبار النشرة الإخبارية

لذا ، فإن نشرتنا الإخبارية جاهزة. يبدو رائعا في المتصفح. ماذا عن عملاء البريد الإلكتروني في Outlook و Mobile؟ حان الوقت للانتقال إلى الخدمات المتخصصة لاختبار النشرة الإخبارية: Litmus و Email on Acid .

اختبار النشرة الإخبارية Litmus

يوفر Litmus مجموعة كاملة من الأدوات التي قد تحتاجها عند اختبار القوائم البريدية. هذا هو موقع ويب لتحرير كود html (Builder) ، ونظام تحليلات بريدية ، ومجموعة من "قوائم المراجعة" - أدوات اختبار الأداء ، والتحقق من رسائل البريد الإلكتروني العشوائية ، وأكثر من ذلك بكثير.

أهم "قائمة تحقق" - معاينة البريد الإلكتروني - تجعل من الممكن فحص البريد الإلكتروني في أكثر من 90 عميل بريد إلكتروني مكتبي / محمول / ويب. يتم ذلك في بضع نقرات. تحتاج إلى إدراج رمز الحرف في الباني ، انقر على زر الاختبار وحدد عملاء البريد الإلكتروني الضروريين.

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

عرض معالجة HTML في Litmus

لقد وجدت سلبيين مع Litmus. الأول هو عدم استجابة واجهة المستخدم ككل وتأخر معاينة البريد الإلكتروني التي تحدث من وقت لآخر وتجعلك تقضي الكثير من الوقت في انتظار إنشاء المعاينة وإعادة تشغيل الاختبارات.

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

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

الخدمة الثانية التي أود التحدث عنها هي Email On Acid . يمكن أن يطلق عليه بأمان "الأخ الصغير" لـ Litmus في جميع الجوانب تقريبًا.

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

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

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

ماذا تختار؟

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

إذا كنت تقوم بمراسلات عرضية ، فهناك خياران بديلان:

1. استخدام Litmus التجريبي / البريد الإلكتروني على Acid لمدة 7/14 يومًا (اعتمادًا على الخدمة) - سيتم إرجاع الأموال للشهر الأول إلى بطاقتك ؛
2. استخدام مجموعة من الخدمات الأقل شيوعًا التي لديها خطط مجانية ، واختبار عملاء البريد الإلكتروني يدويًا.

فيما يلي بعض الخدمات التي يمكن استخدامها مجانًا ، ولكن إلى حد محدود:

1. PreviewMyEmail (Gmail لـ Chrome / FF / IE ، Thunderbird ، Apple Mail لـ iOS7) ؛
2. InboxInspector (Thunderbird 2/3 ، Outlook 2003/2007/2010 / Outlook Express) ؛
3. DirectMail (Outlook 2003 ، Gmail في IE) ؛
4. Putsmail + PilotMailer (خدمات عبر الإنترنت لإرسال رمز بريد إلكتروني إلى أي عناوين ، ملائمة للاستخدام في الاختبار اليدوي للنشرة الإخبارية) ؛

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

الخلاصة

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

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

إذا كان عليك التعامل مع تنضيد الحروف بشكل منتظم ، وكانت التصميمات معقدة ومتكيفة ، فستتولى MJML و Foundation for Email بعض الاهتمام. وسيوفر Limus و Email on Acid الكثير من الوقت والخلايا العصبية في محاولة لهزيمة بعض Outlook المزعج أو Gmail على Android.

وبأي طريقة تختار؟ شارك في التعليقات.