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

نشرت: 2022-03-10
ملخص سريع ↬ في سلسلة قصيرة جديدة من المنشورات ، نسلط الضوء على بعض الأدوات والتقنيات المفيدة للمطورين والمصممين. لقد قمنا مؤخرًا بتغطية مولدات CSS ومولدات SVG ومكونات الواجهة الأمامية التي يمكن الوصول إليها. هذه المرة ننظر في القوالب والأدوات لبناء وتصميم رسائل البريد الإلكتروني بتنسيق HTML. لا تفوت التالي.

جدول المحتويات

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

  • إمكانية الوصول
  • البق
  • الوضع المظلم
  • المحررين و IDEs
  • دعم الميزات
  • إطار أعمال
  • ابدء
  • أدلة وموارد
  • مضمنة CSS
  • وحي - الهام
  • مولد ارتباط mailto
  • موجه الاختيار mailto
  • تسويق
  • اللغات الفوقية
  • معاينات
  • إنتاجية
  • إزالة CSS غير المستخدمة
  • استهداف عملاء البريد الإلكتروني
  • القوالب
  • مانع التتبع
  • تحويل HTML

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

إذا كنت تحاول فقط فهم كل ما يحدث خلف الكواليس لعالم غريب من البريد الإلكتروني بتنسيق HTML ، فقد نشر Caity G. O'Connor دليلًا رائعًا حول كيفية البدء في ترميز البريد الإلكتروني. تحتوي المقالة على دورات تدريبية وبرامج تعليمية ومقالات وإرشادات عامة فقط يجب وضعها في الاعتبار عند إنشاء رسائل البريد الإلكتروني وتصميمها - كل ذلك في دليل شامل مكون من صفحة واحدة. في SmashingMag ، نشر Lee Munroe أيضًا دليلًا تفصيليًا لبناء وإرسال رسائل بريد إلكتروني بتنسيق HTML.

كيفية ترميز رسائل البريد الإلكتروني بتنسيق HTML لأي جهاز
إذا كنت مستخدمًا جديدًا لتشفير البريد الإلكتروني بتنسيق HTML ، فإن دليل Caity G. O'Connor هو مكان جيد للبدء.

بدلاً من ذلك ، يعد How to Code HTML Emails for Any Device دليلًا شاملاً للغاية حول إنشاء قالب بريد إلكتروني بتنسيق HTML موثوق ، وكيفية اختباره - جنبًا إلى جنب مع مثال عملي لبناء قالب رسالة إخبارية من البداية. بشكل عام ، هذه نظرة عامة قوية جدًا على كل ما تحتاج إلى معرفته للبدء في القدم اليمنى.

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

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

لغات وأطر عمل البريد الإلكتروني بتنسيق HTML

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

MJML
يجعل MJML ترميز رسائل البريد الإلكتروني المستجيبة أكثر ملاءمة قليلاً.

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

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

الحديث عن توفير الوقت: نعلم جميعًا أن البريد الإلكتروني بتنسيق HTML يتطلب جداول على جداول للعمل بشكل صحيح - ومدى صعوبة بنائها. وهنا يأتي دور Inky. تقوم لغة القوالب بتحويل علامات HTML البسيطة مثل <row> و <columns> إلى HTML لجدول معقد بحيث لا تحتاج إلى عناء.

إطار عمل بريد إلكتروني بتنسيق HTML يستند إلى Tailwind CSS

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

تشفير BYOHTML مع Maizzle
شرح لكيفية قيام مستخدمي Maizzle "بإحضار HTML الخاص بهم". (مصدر الصورة: Maizzle

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

إطار عمل البريد الإلكتروني بتنسيق HTML على أساس Sass

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

مؤسسة لرسائل البريد الإلكتروني
يمكن استخدام Foundation for Emails مع CSS أو Sass ، أيًا كان ما تفضله.

قوالب البريد الإلكتروني HTML المضادة للرصاص

توفر Cerberus و HTML Email مجموعات صغيرة من القوالب الموثوقة والمتينة لرسائل البريد الإلكتروني بتنسيق HTML سريعة الاستجابة التي تم اختبارها جيدًا في أكثر من 50 عميل بريد إلكتروني ، بما في ذلك Gmail و Outlook و Yahoo و AOL والعديد من الآخرين. يتيح لك EmailFrame.work إنشاء قوالب بريد إلكتروني بتنسيق HTML سريعة الاستجابة مع خيارات الشبكة والمكونات الأساسية المدمجة مسبقًا ، المدعومة في أكثر من 60 عميل بريد إلكتروني.

كودمايلز
تتضمن Codedmails 60 قالبًا وموضوعًا للبريد الإلكتروني ، جميعها مكتوبة بلغة MJML ، وتم اختبارها من أجل التوافق.

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

تتميز كل من Stripo و Chamaileon و Postcards و Topol.io و GoodEmailCode و Pixelbuddha و Bee Free بالكثير من قوالب البريد الإلكتروني المجانية بتنسيق HTML ، وتوفر Litmus قوالب بريد إلكتروني متجاوبة للرسائل الإخبارية وتحديثات المنتج والإيصالات ، ولدى CampaignMonitor أداة إنشاء قوالب بريد إلكتروني بتنسيق HTML مجانًا مع السحب ' وظيفة n'drop. محرر السحب والإفلات الآخر الجدير بالاعتبار هو Unlayer. يساعدك على إنشاء قوالب بريد إلكتروني بتنسيق HTML جاهزة للجوال ببضع نقرات فقط - دون الحاجة إلى الترميز.

دعم ميزة البريد الإلكتروني بتنسيق HTML: هل يمكنني إرسال بريد إلكتروني ...؟

يُعد caniemail.com من الأدوات المفيدة التي تنتمي إلى مجموعة أدوات كل شخص يجد نفسه في جدال مع البريد الإلكتروني بتنسيق HTML - سواء كان ذلك بين الحين والآخر أو بشكل منتظم. مستوحى من المفهوم الناجح لـ caniuse.com ، هل يمكنني البريد الإلكتروني يتيح لك التحقق من دعم 179 ميزة HTML و CSS عبر 31 عميل بريد إلكتروني.

هل يمكنني إرسال بريد إلكتروني ...
هل يمكنني إرسال بريد إلكتروني يبرز ميزات الويب ودعمها في عملاء البريد الإلكتروني بتنسيق HTML.

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

مستودع لأخطاء البريد الإلكتروني

لا يعرض Apple Mails SVGs المضمنة ، ولا يعرض Gmail رسائل البريد الإلكتروني بالعرض الكامل ، ويغير Outlook سلوك صور Gif المتحركة - نعلم جميعًا كيف يتصرف عملاء البريد الإلكتروني بغرابة في بعض الأحيان.

أخطاء البريد الإلكتروني
تعرف على Email Bugs ، وهو مستودع متزايد لأخطاء البريد الإلكتروني.

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

مولدات Mailto Link

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

مولدات Mailto Link
مهمة بسيطة يتم تنفيذها بشكل جيد: يعتني Mailto Link Generator جيدًا بروابط mailto.

موجه تحديد Mailto

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

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

بدلاً من فتح عميل بريد إلكتروني أصلي ، تطالب كلتا الأداتين بفتح نافذة مشروطة ، مما يسمح للمستخدم باختيار إحدى الخدمات المفضلة ، أو نسخ الرابط ولصقه. بالإضافة إلى ذلك ، يمكن لـ Mailgo معالجة جميع روابط tel أيضًا ، مما يسمح لهم بفتح Telegram و WhatsApp و Skype والاتصال بشكل افتراضي أو نسخ رقم الهاتف - وهو يدعم الوضع المظلم أيضًا.

إلهام البريد الإلكتروني

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

لا يوجد نقص في عروض البريد الإلكتروني بتنسيق HTML: يُبرز Email Love الآلاف منها.

تتميز مدونة Litmus و CampaignMonitor blog و HTML Email بالكثير من المقالات والبودكاست مع أفضل الممارسات والنصائح والموارد وحتى البودكاست على بريد HTML الإلكتروني. وإذا كنت بحاجة إلى القليل من الإلهام لرسائل البريد الإلكتروني الحديثة ، المصنفة حسب الصناعة ، فإن رسائل البريد الإلكتروني الجيدة حقًا و EmailLove تدعمك أيضًا.

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

رسائل البريد الإلكتروني التي يمكن الوصول إليها

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

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

باستخدام Accessible-Email.org ، يمكنك تحليل الحملات المرسلة والتحقق من تحسينات إمكانية الوصول. باستخدام Dark Mode for Email Simulator ، يمكنك التحقق من شكل بريدك الإلكتروني في الوضع المظلم.

مضمنة CSS وتحويل رسائل البريد الإلكتروني بتنسيق HTML

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

التعديل
أداة بريد إلكتروني رائعة عندما تحتاج إلى هذا المستوى من التفاصيل: يتيح لك Alter.Email تغيير HTML أثناء التنقل. (مصدر الصورة: Alter.Email)

قم بإزالة CSS غير المستخدمة من قوالب البريد الإلكتروني

لا تعد كتابة CSS مهمة مثيرة بشكل خاص مع البريد الإلكتروني بتنسيق HTML ، فهي مبعثرة مع !important ومضمنة في كل مكان. لإزالة CSS غير المستخدمة من قوالب البريد الإلكتروني ، هناك Email Comb. تتيح لك الأداة إضافة فئات ومعرفات ترغب في تجاهلها ، واختيار ما إذا كنت ترغب في تصغيرها وإزالة التعليقات ، وتعرض ما تمت إزالته بالضبط.

مشط البريد الإلكتروني
تنظيف البريد الإلكتروني بتنسيق HTML الخاص بك: يقوم Email Comb بإزالة ما لا تحتاج إليه ، ولكن يمكنك إضافة فئات لتجاهلها.

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

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

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

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

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

Thebetter.email
كل شيء من القوالب إلى موارد التسويق على TheBetter.email.

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

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

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

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

الوضع المظلم في Gmail و Outlook

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

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

دليل المطور للوضع الداكن في البريد الإلكتروني
دليل المطور للوضع المظلم في البريد الإلكتروني: شامل وشامل.

يتعمق Remi Parmentier قليلاً ، حيث يوضح كيفية إصلاح مشكلات الوضع المظلم في Gmail باستخدام أوضاع مزيج CSS. يفرض Gmail تغيير أي لون نص فاتح إلى لون نص غامق. إذا كنت بحاجة إلى إصلاحه ، فقد ابتكر Remi استخدامًا مبتكرًا لوضع mix-blend-mode (المدعوم في Gmail) للحفاظ على لون النص الفاتح إذا كنت بحاجة إلى ذلك. وإذا كنت بحاجة إلى التأكد من أن رسائل البريد الإلكتروني الخاصة بك تستجيب للوضع المظلم لـ Outlook.com ، فإن Remi قد قام بتغطيتك أيضًا.

إصلاح الوضع المظلم في رسائل البريد الإلكتروني بتنسيق HTML
إصلاح الوضع المظلم في رسائل البريد الإلكتروني بتنسيق HTML: أصبح Remi Parmentier مبدعًا لإصلاح مشكلات الوضع المظلم في Gmail باستخدام أوضاع مزيج CSS.

IDE لتطوير البريد الإلكتروني بتنسيق HTML

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

قطعة
يمكن أن تكون رسائل البريد الإلكتروني بتنسيق HTML فوضوية ويصعب بناؤها وصيانتها. تساعدك IDEs للبريد الإلكتروني بتنسيق HTML مثل Parcel في الحفاظ على كل شيء بالترتيب. (مصدر الصورة: الطرود)

بدلاً من ذلك ، يمكنك أيضًا إلقاء نظرة على Mail Studio ، وهو تطبيق سطح مكتب متطور (لنظام التشغيل Windows و macOS و Linux) يجمع بين التحرير المرئي والكود في IDE واحد للبريد الإلكتروني .

يأتي التطبيق مع مكتبة من المكونات ، من العناوين إلى أشرطة التنقل والأكورديون ، واثنين من قوالب البريد الإلكتروني المتجاوبة ، وتكامل خطوط Google ، ودعم Sass المدمج ، ولوحة الأوامر ، وأدوات التعاون ، ومعاينات البريد الإلكتروني وحتى التكامل مع مزودي خدمة البريد الإلكتروني مثل MailChimp و Campaign Monitor و Sendgrid. من المفترض أن يتم تكامل Figma قريبًا.

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

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

Emailpreview.io
سريع وسهل: ينشئ Emailpreview.io معاينة صفحة كاملة لرسائل البريد الإلكتروني الخاصة بك.

مانع تعقب البريد

تتضمن معظم رسائل البريد الإلكتروني التسويقية متتبعات في بريد إلكتروني بتنسيق HTML ، حتى يتمكنوا من تتبع عدد مرات فتح العملاء رسائل البريد الإلكتروني ومتى وأين. يعمل MailTrackerBlocker إلى حد كبير كحاجب إعلانات للمتصفحات ، ولكنه يعمل مع عملاء البريد الإلكتروني. تقوم الأداة بتسمية الأشخاص الذين يتتبعون العملاء ويزيلون وحدات بكسل التتبع قبل عرضها ، بحيث لا يزال بإمكانك تحميل كل المحتوى البعيد والحفاظ على خصوصية سلوكك. متوفر حاليًا فقط لـ Apple Mail على نظام التشغيل macOS 10.11 - 11.x ( صرخ إلى Jeremy Keith! ).

MailTrackerBlocker
يمكنك استخدام مانع الإعلانات لمنع تتبع الطرف الثالث ، وبالنسبة إلى Apple Mail ، هناك أيضًا MailTrackerBlocker لمنع تتبع بكسل في رسائل البريد الإلكتروني.

جعل البريد الإلكتروني أفضل

هناك العديد من الأشياء التي تجعل التعامل مع البريد الإلكتروني أمرًا مزعجًا. ومع ذلك ، نظرًا لعدم وجود بريد إلكتروني للالتفاف ، هناك حل واحد فقط: فلنعمل على تحسين الموقف معًا. مع أخذ ذلك في الاعتبار ، يدير Chris Coyier موقع "Email is Good" ، وهو موقع حول إنتاجية البريد الإلكتروني .

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

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

تغليف

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

ابق محطما!

قراءة متعمقة

  • أدوات تدقيق CSS
  • مولدات CSS
  • مولدات SVG
  • مقدمة لبناء وإرسال بريد إلكتروني بتنسيق HTML لمطوري الويب
  • أيضا ، اشترك في النشرة الإخبارية لدينا حتى لا تفوت الرسائل التالية.