انتظر. ما الذي حدث للتو في بريدي الإلكتروني؟ تسجيل ندوة عبر الإنترنت

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

بعد أن عايشنا العديد من هذه السيناريوهات ، تعاونا مع Alex Mohr من Sendwithus لإلقاء الضوء على المشكلات الأكثر شيوعًا التي تواجه الأشخاص الجدد على البريد الإلكتروني ، والأهم من ذلك ، بعض الحلول لتلك المشكلات.

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

عرض الشرائح وتسجيل →

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

لماذا جوجل ومايكروسوفت سيئين للغاية في عرض رسائل البريد الإلكتروني؟

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

في حالة Gmail من Google ، يتم استخدام المعالج المسبق لتجريد أجزاء معينة من الرمز من رسالة بريد إلكتروني لأسباب أمنية. في حين أن كل عميل بريد ويب آخر قد اكتشف ذلك الآن ، يقوم Gmail بشكل أساسي بإزالة أنماط CSS المضمنة في <رأس> البريد الإلكتروني. ونظرًا لأن العديد من المصممين يستخدمون هذه الأنماط لتحديد شكل حملتهم ، فإن رسائل البريد الإلكتروني هذه تعاني في Gmail.

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

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

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

فيما يلي بعض الموارد لتبدأ في فهم دعم عميل البريد الإلكتروني بشكل أفضل لـ HTML و CSS:

• دليل Campaign Monitor النهائي إلى CSS
• فهم Gmail و CSS: الجزء الأول والجزء الثاني
• دليل لعرض الاختلافات في عملاء Microsoft Outlook
• كيف تؤثر الأجهزة وأنظمة التشغيل والتطبيقات والمحركات على العرض
• مشاكل عرض سطح المكتب؟ ركز الاختبار الأولي على حفنة من محركات العرض
• شرح تقديم بريد الويب: لماذا المعالجون هم العدو

كيف تتعامل مع عدم قيام Outlook بعرض الخطوط المناسبة عند استخدام خطوط الويب؟

تزداد شعبية خطوط الويب والخطوط التي يتم تقديمها عبر الويب بدلاً من تثبيتها على جهاز المستخدم. نظرًا لأنها تسمح للشركات بالبقاء على علامتها التجارية من خلال الطباعة وتشجيع النص المباشر ، فهي أداة مثالية لمسوقي البريد الإلكتروني. لسوء الحظ ، لا يتم دعمهم من قبل جميع عملاء البريد الإلكتروني. وفي حالة Outlook ، يؤدي نقص الدعم إلى مواقف يتم فيها عرض Times New Roman بدلاً من أي خطوط احتياطية معلن عنها في HTML الخاص بك.

لقد عالجنا هذه المشكلة من قبل بحل يتطلب فئة HTML على النص المتأثر وبعض CSS الخاصة بـ Outlook. في حين أن هذا الحل لا يزال يعمل بشكل جيد ، فإن الحل الأنظف والأسهل في الصيانة يكتسب قوة دفع. تم اقتراح هذا الحل في الأصل من قبل الأشخاص في Action Rocket ، ويتطلب هذا الحل استخدام قواعد @ font-face لخدمة الخطوط وتغليفها في استعلام وسائط في رأس بريدك الإلكتروني.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

يعد هذا الحل أسلوبًا ممتازًا لأنه لا يتطلب سمات فئة HTML تلويث التعليمات البرمجية الخاصة بك مع ضمان عودة Outlook إلى مجموعة الخطوط المعلنة. تحقق من المقالة الأصلية لـ Action Rocket لمعرفة المزيد حول هذه التقنية.

كيف يمكنك منع الروابط الزرقاء من الحدوث على الهاتف المحمول؟

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

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

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

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

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

ما هي أفضل طريقة للتعامل مع الصور سريعة الاستجابة؟ ماذا عن صور شبكية العين؟

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

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

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

بطبيعة الحال ، سترغب في تقديم بعض نص ALT عندما يتم تعطيل الصور وإعلان العرض: block ؛ لمنع المسافات البيضاء غير الضرورية حول الصورة. إذا كنت بحاجة إلى مزيد من التحكم في الصورة ، فيمكنك استهدافها بفئة و CSS في رأس بريدك الإلكتروني. فقط تذكر أن CSS المضمّن غير مدعوم في كل مكان.

عندما يتعلق الأمر بصور شبكية العين ، فإن أفضل رهان لك هو ببساطة إنشاء صورك بضعف حجم العرض المقصود للصورة في بريدك الإلكتروني. على سبيل المثال ، إذا كانت لديك صورة بحجم 600 × 200 بكسل ، فيمكنك إنشاؤها وحفظها كصورة 1200 × 400 بكسل. قم بتضمينه بشكل طبيعي في بريدك الإلكتروني. ستمنع سمة العرض التي ذكرتها سابقًا من عرضها كصورة ضخمة بشكل سخيف في عملاء مثل Outlook وستبدو صورك جميلة وواضحة على الأجهزة المزودة بشاشات شبكية.

هل من نصيحة لشخص يتطلع إلى استخدام صور GIF المتحركة في رسالة بريد إلكتروني؟

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

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

بينما يعتقد الكثير من الناس أن صور GIF هي للمتعة فقط ، فإن عددًا كبيرًا من شركات المنتجات تستخدم صور GIF المتحركة لإظهار التفاعلات مع منتجاتها وتعليم الأشخاص بشكل أساسي كيفية استخدام المنتجات قبل أن يلمسوها. إليك مثال رائع من MailChimp:

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

ما رأيك في استخدام الفيديو في البريد الإلكتروني؟

تمامًا مثل ملفات GIF المتحركة ، يمكن أن تكون مقاطع الفيديو طريقة ممتازة لجذب انتباه المشترك. لسوء الحظ ، تحظى مقاطع الفيديو نفسها بدعم أقل عبر عملاء البريد الإلكتروني. بينما كنا قادرين في السابق على استخدام خلفية فيديو في رسالة بريد إلكتروني ، إلا أنها كانت مدعومة فقط في Apple Mail و Outlook for Mac.

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

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

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

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

هل هناك أي أطر بريد إلكتروني سريعة الاستجابة توصي بها؟

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

بقدر ما تذهب أطر وقوالب البريد الإلكتروني سريعة الاستجابة ، هناك عدد متاح:

• سيربيروس من تيد جواس
• مخططات البريد الإلكتروني MailChimp
• مؤسسة زرب لرسائل البريد الإلكتروني
• MJML في Mailjet

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

عرض الشرائح والتسجيل

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

عرض الشرائح وتسجيل →