فهم التحديات (والإحباطات) لتصميم البريد الإلكتروني بتنسيق HTML
إذا قمت بفتح نظام إدارة محتوى لإنشاء صفحات ويب، فهذه عملية بسيطة جدًا. دعم متصفحات الويب الحديثة HTML, CSSوجافا سكريبت لمعايير الويب الصارمة. وهي مجرد عدد قليل من المتصفحات التي يجب على المصممين القلق بشأنها. هناك استثناءات بالطبع... وبعض الحلول البسيطة أو الوظائف الخاصة بتلك المتصفحات.
نظرًا للمعايير العامة، من السهل تطوير منشئي الصفحات في أنظمة إدارة المحتوى. تتوافق المتصفحات مع HTML5 وCSS وJavaScript... ويمكن للمطورين إنشاء حلول قوية بشكل لا يصدق لإنشاء صفحات ويب تستجيب للأجهزة ومتسقة عبر المتصفحات. قبل عقدين من الزمن، كان كل مصمم ويب تقريبًا يستخدم برامج سطح المكتب لتطوير صفحات الويب. الآن، من غير المألوف أن يقوم مصمم الويب بتطوير صفحة ويب - في أغلب الأحيان، يقومون بتطوير القوالب واستخدام المحررين في أنظمة المحتوى لملء المحتوى. محرري الموقع رائعون.
لكن محرري البريد الإلكتروني متأخرين بشكل يرثى له. إليكم السبب ...
يعد تصميم رسائل البريد الإلكتروني بتنسيق HTML أكثر تعقيدًا بكثير من تصميم موقع ويب
إذا كانت شركتك تريد تصميم بريد إلكتروني جميل بتنسيق HTML، فإن العملية أكثر تعقيدًا بشكل كبير من إنشاء صفحة ويب لعدة أسباب:
- لا معايير - لا يوجد التزام صارم بمعايير الويب من قبل عملاء البريد الإلكتروني الذين يعرضون بريدًا إلكترونيًا بتنسيق HTML. يعمل كل عميل بريد إلكتروني تقريبًا وكل إصدار من كل عميل بريد إلكتروني بشكل مختلف. سوف يحترم البعض CSS والخطوط الخارجية وHTML الحديثة. ويحترم البعض الآخر بعض التصميمات المضمنة، ويعرض فقط مجموعة من الخطوط، ويتجاهل كل شيء باستثناء الهياكل المستندة إلى الجدول. ومن المثير للسخرية أن لا أحد يعمل على هذه القضية. ونتيجة لذلك، أصبح تصميم القوالب التي يتم عرضها عبر العملاء والأجهزة بشكل متسق عملاً تجاريًا كبيرًا ويمكن أن يكون مكلفًا للغاية.
- أمان عميل البريد الإلكتروني - تم تحديث Apple Mail مؤخرًا لحظر جميع الصور الموجودة في رسائل البريد الإلكتروني بتنسيق HTML افتراضيًا والتي لم يتم تضمينها في البريد الإلكتروني. إما أن تمنحهم الإذن بتحميل بريد إلكتروني في المرة الواحدة أو يتعين عليك تمكين الإعدادات لتعطيل هذا الإعداد. إلى جانب إعدادات أمان عميل البريد الإلكتروني، هناك أيضًا إعدادات الشركة.
- أمن تكنولوجيا المعلومات - قد ينشر فريق تكنولوجيا المعلومات لديك قواعد صارمة بشأن الكائنات التي يمكن عرضها بالفعل في رسالة بريد إلكتروني. إذا كانت صورك ، على سبيل المثال ، قادمة من مجال معين غير مدرج في القائمة البيضاء في جدار حماية الشركة ، فلن تظهر الصور ببساطة في بريدك الإلكتروني. في بعض الأحيان ، كان علينا تطوير رسائل البريد الإلكتروني واستضافة جميع الصور على خادم الشركة حتى يتمكن موظفوها من رؤية الصور.
- مزودي خدمة البريد الإلكتروني - لجعل الأمور أسوأ ، فإن منشئو البريد الإلكتروني الذين يقدمون خدمة البريد الإلكتروني (ESPق) في الواقع تقديم المشاكل بدلا من تقييدها. في حين أنهم يروجون لمحررهم الذي يحمل عنوان "ما تراه هو ما تحصل عليه" (WYSIWYG)، فإن العكس غالبًا ما يكون صحيحًا مع تصميم البريد الإلكتروني. ستقوم بمعاينة البريد الإلكتروني في النظام الأساسي الخاص بهم، وسيرى المستلم جميع مشكلات التصميم. غالبًا ما تختار الشركات دون قصد محررًا غنيًا بالميزات بدلاً من المحرر المغلق، معتقدة أن المحرر يحتوي على المزيد من الميزات. والعكس هو الصحيح... إذا كنت تريد أن يتم عرض رسائل البريد الإلكتروني بشكل متسق عبر جميع عملاء البريد الإلكتروني، فكلما كان الأمر أبسط كان ذلك أفضل، لأنه قد يحدث خطأ أقل.
- تقديم عميل البريد الإلكتروني - يقوم المئات من عملاء البريد الإلكتروني بعرض HTML بشكل مختلف عبر أجهزة سطح المكتب والتطبيقات والأجهزة المحمولة وعملاء بريد الويب. في حين أن محرر النصوص الأنيق الخاص بك على مزود خدمة البريد الإلكتروني الخاص بك قد يكون لديه إعداد لوضع عنوان في بريدك الإلكتروني، فقد تختلف المساحة المتروكة والهوامش وارتفاع الخط وحجم الخط لكل عميل بريد إلكتروني. ونتيجة لذلك، يتعين عليك إلغاء HTML وترميز كل عنصر بشكل مختلف (انظر المثال أدناه) - وغالبًا ما تكتب استثناءات خاصة بعميل البريد الإلكتروني - للحصول على بريد إلكتروني يتم عرضه بشكل متسق. لا توجد أنواع كتل بسيطة، يجب عليك إنشاء تخطيطات تعتمد على الجداول والتي تعادل إنشاء الويب قبل ثلاثين عامًا. ولهذا السبب يتطلب أي تخطيط جديد كلاً من التطوير واختبار عميل البريد الإلكتروني والجهاز. ما تراه في بريدك الوارد قد يكون مختلفًا تمامًا عما أراه في بريدي الوارد. لهذا السبب يتم تقديم أدوات مثل البريد الإلكتروني على حمض or صبغة عباد الشمس ضرورية لضمان عمل تصميماتك الجديدة عبر جميع عملاء البريد الإلكتروني. فيما يلي قائمة قصيرة بعملاء البريد الإلكتروني المشهورين ومحركات العرض الخاصة بهم:
- استخدام Apple Mail و Outlook for Mac و Android Mail و iOS Mail بكت.
- استخدام Outlook 2000 و 2002 و 2003 إنترنت إكسبلورر.
- استخدام Outlook 2007 و 2010 و 2013 ميكروسوفت ورد (نعم كلمة!).
- يستخدم عملاء بريد الويب محرك المتصفح الخاص بهم (على سبيل المثال ، يستخدم Safari WebKit ويستخدم Chrome Blink).
مثال على HTML للويب مقابل. بريد الالكتروني
إذا كنت تريد مثالاً يوضح مدى تعقيد التصميم في البريد الإلكتروني مقابل الويب ، فإليك مثالاً رائعًا من مقالة Mailbakery 19 اختلافات كبيرة بين البريد الإلكتروني وويب HTML:
البريد الإلكتروني HTML
يجب أن نبني سلسلة من الجداول تتضمن جميع الأنماط المضمنة اللازمة لوضع الزر بشكل صحيح والتأكد من ظهوره بشكل جيد عبر عملاء البريد الإلكتروني. ستكون علامة النمط المصاحبة أيضًا في الجزء العلوي من هذا البريد الإلكتروني لدمج الفصول الدراسية.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
ويب HTML
يمكننا استخدام ورقة أنماط خارجية مع فئات لتحديد الحالة والمحاذاة واللون وحجم علامة الارتساء التي تظهر كزر.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
كيفية تجنب مشاكل تصميم البريد الإلكتروني
يمكن تجنب مشكلات تصميم البريد الإلكتروني باتباع عملية لائقة:
- اختبار النموذج - يعد فهم عملاء البريد الإلكتروني الذين يستخدمهم المشتركون لديك والتأكد من اختبار بريد HTML الإلكتروني الخاص بك بشكل كامل عبر الهاتف المحمول وسطح المكتب أمرًا بالغ الأهمية قبل نشر أي قالب. يمكننا تصميم بريد إلكتروني حرفيًا من تخطيط Photoshop... ولكن تقسيمه وتقطيعه إلى عميل بريد إلكتروني قائم على الجدول يعد أمرًا ضروريًا لنشر تصميمات البريد الإلكتروني المثالية والمتسقة.
- الاختبار الداخلي - بمجرد تصميم القالب واختباره ، يجب إرساله إلى قائمة أولية داخلية داخل المؤسسة لمراجعته والموافقة عليه. قد ترغب أيضًا في البدء بمجموعة فرعية محدودة جدًا من الأفراد للتأكد أولاً من عدم وجود جدار حماية أو مشكلات أمان مرتبطة بتقديم البريد الإلكتروني داخليًا. إذا كان هذا يقوم بإنشاء مثيل على مزود خدمة بريد إلكتروني جديد ، فقد تجد حتى بعض مشكلات التصفية أو الحظر المرتبطة حتى بإرسال بريدك الإلكتروني إلى البريد الوارد.
- تعيين الإصدار للقالب - لا تقم بتغيير التخطيطات أو التصميمات الخاصة بك دون العمل على إصدار جديد من النموذج الخاص بك يمكن تصميمه واختباره ونشره بشكل صحيح. تحب العديد من الشركات تصميمات لمرة واحدة لكل حملة ... ولكن هذا يتطلب تصميم كل بريد إلكتروني وتطويره ونشره لكل حملة. هذا يضيف الكثير من الوقت لعملية التسويق عبر البريد الإلكتروني الداخلية. وأنت تخاطر بعدم فهم العناصر الموجودة في بريدك الإلكتروني التي تعمل بشكل جيد على العناصر التي لا تعمل بشكل جيد. التناسق ليس مجرد وسيلة لتسهيل العملية ، إنه مهم أيضًا لسلوك المشتركين في قناتك.
- استثناءات مزود خدمة البريد الإلكتروني - يمتلك كل مزود خدمة بريد إلكتروني تقريبًا وسيلة للتغلب على المشكلات التي يقدمها منشئ البريد الإلكتروني الخاص بهم. يمكننا في كثير من الأحيان إضافة CSS خام إلى حساب - أو حتى لدينا كتلة محتوى يجب تضمينها في كل بريد إلكتروني - حتى تتمكن الشركة من استخدام محرر البريد الإلكتروني المدمج وعدم جعله يكسر تصميم بريدك الإلكتروني. بالطبع ، قد يتطلب ذلك بعض التدريب والتحكم في العملية لنشر هذه الخطوات لضمان الامتثال لها. أو - قد ترغب حرفيًا فقط في تطوير تصميم البريد الإلكتروني الخاص بك في حل ثبت أنه يعمل عبر العملاء والأجهزة ، ثم قم بلصقه مرة أخرى في مزود خدمة البريد الإلكتروني الخاص بك.
منصات تصميم البريد الإلكتروني
نظرًا لأن منصات خدمة البريد الإلكتروني قامت بعمل ضعيف في بناء وصيانة أدوات إنشاء عبر العملاء وعبر الأجهزة باستمرار ، فقد تم طرح عدد من المنصات الرائعة في السوق. واحد استخدمناه على نطاق واسع هو ستريبو.
Stripo ليس مجرد منشئ بريد إلكتروني ، بل لديه أيضًا مكتبة تضم أكثر من 900 قالب يمكن استيرادها بسهولة. بمجرد تصميم البريد الإلكتروني ، يمكنك إرسال بريد إلكتروني إلى 60+ ESP وعملاء البريد الإلكتروني ، بما في ذلك إحدس Mailchimp, HubSpot, مراقب الحملة, أوبرسبوتنيك, بريد اوتلوكو جوجل. أفضل ما في قوالب Stripo هو أنها تأتي مع اختبارات عرض البريد الإلكتروني المضمنة حتى تتمكن من التأكد من اختبارها وعملها بشكل متسق عبر أكثر من 40 عميل بريد إلكتروني.