عرض البريد الإلكتروني في Outlook: كيف تعلمت أن أتوقف عن القلق وحب التوقعات

نشرت: 2021-07-02

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

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

إصدارات Outlook
تلميحات حول المراوغات في Outlook
الكود لإجراء الإصلاحات

الإصدارات العديدة لبرنامج Microsoft Outlook

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

توقعات 2007-2019

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

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

Outlook لنظام التشغيل Mac

هذا هو إصدار سطح مكتب Mac من Outlook. يستخدم Webkit كمحرك التقديم. مما يعني أنه عادةً ما يكون على قدم المساواة مع Apple Mail و iOS بقدر ما يتعلق الأمر بتقديم البريد الإلكتروني. إذا كان يبدو جيدًا في متصفحك ، فهناك فرصة جيدة أن يبدو جيدًا هنا.

Outlook.com وتطبيقات Outlook للأجهزة المحمولة

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

برنامج Outlook Office 365

يوجد إصداران مختلفان من Outlook Office 365 ، عميل البريد الإلكتروني لسطح المكتب وعميل البريد الإلكتروني المستند إلى الويب. إصدار سطح المكتب مشابه لبرنامج Outlook 2007-2019 ويستخدم Word كمحرك عرض (صعب للبريد الإلكتروني). يستخدم عميل البريد الإلكتروني المستند إلى الويب Webkit أو Blink ويعرض رسائل البريد الإلكتروني بشكل مشابه لـ Outlook.com (أسهل بكثير).

لا مزيد من رسائل البريد الإلكتروني المعطلة

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

تعلم كيف →

نظرة واحدة للحكم عليهم جميعا

في يناير ، أعلنت Microsoft عن رؤيتها "One Outlook" لاستبدال عملاء سطح المكتب بعميل واحد يعمل في كل مكان بدءًا من وقت ما في عام 2022.

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

افعل او لا تفعل ليس هناك تجربة

هل رأسك يدور بعد؟

إذا كان الأمر كذلك ، فلنستخلصها من أجلك: الفكرة الأساسية هي أننا نعمل مع محركي عرض مختلفين - Word و Webkit. Webkit أسهل في البرمجة ، و Word أكثر صعوبة. ليست جيدة أو سيئة حقا. إنها تتطلب فقط مناهج مختلفة ولها مراوغات مختلفة يجب أخذها في الاعتبار.

لنلقِ نظرة على بعض مشكلات العرض الشائعة في عملاء سطح المكتب في Outlook وكيفية حلها.

قم بتضمين سمات العرض والارتفاع في صورك

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

الآفاق — صورة شبكية بدون سمة عرض في Outlook مما يجعل البريد الإلكتروني أوسع

قم بتضمين نص ALT

لا تدع رسالة أمان Outlook تتحدث عن صورك. تأكد من تضمين نص ALT. خاصة وأن Outlook لا يعرض الصور افتراضيًا ما لم يقم الأشخاص بتشغيل الميزة.

تم حظر البريد الإلكتروني في Outlook بالصور

هل تستخدم الجداول

لقد قطع البريد الإلكتروني شوطًا طويلاً ويمكنك استخدام كتل <div> في الكثير من عملاء البريد الإلكتروني ، ولكن Outlook ليس واحدًا منهم. سيتجاهل Outlook معظم الأنماط التي تقوم بتطبيقها على علامات <div> بما في ذلك العروض والحشو. لذلك من المهم أن تستخدم علامات <table> للمحتوى الخاص بك بدلاً من ذلك.

استخدم التعليمات البرمجية الخاصة بـ Outlook لحل مشكلات العرض

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

قم بإضافة ارتفاعات الخطوط إلى الصور الصغيرة أو خلايا الجدول

يعيّن Outlook الحد الأدنى للارتفاع في خلايا الجدول والصور. لذلك إذا كنت تستخدم خلية جدول كمباعد أو لديك صورة صغيرة ، فتأكد من إضافة سمة ارتفاع السطر إلى العنصر مساوية للارتفاع الذي تريده أن يظهر. على سبيل المثال:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

هل الصحيح لقضايا تحجيم DPI

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

لحسن الحظ ، هناك حل. أولاً ، يجب عليك إضافة مساحة اسم XML إلى علامة HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

بعد ذلك ، أضف بعض التعليمات البرمجية لإصلاحها لتغيير حجم الصورة مباشرةً قبل علامة </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

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

✗ ليس هذا مع العرض = ”600 ″ :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

نعم ، هكذا مع style = ”width: 600px؛” :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

سيؤدي ذلك إلى إصلاح معظم مشكلاتك لـ 120 عميل DPI. ألق نظرة على هذه المقارنة جنبًا إلى جنب قبل وبعد هذا الإصلاح:

Outlook 2013 بمعدل 120 نقطة في البوصة (بدون إصلاح)	Outlook 2013 بمعدل 120 نقطة في البوصة (مع الإصلاح)

ما الفرق ، هاه؟

لا تتوقع أن تعمل تأثيرات التحويم

لا يدعم Outlook فئة التمرير الزائفة. لا يزال يتعين عليك تضمينه لإنشاء تفاعلات لزيادة إمكانية الوصول إلى بريدك الإلكتروني في عملاء البريد الإلكتروني الآخرين ، ولكن لا تتفاجأ عندما لا يعمل في Outlook.

لا تعتمد على صورة GIF متحركة لتوصيل وجهة نظرك

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

لا تستخدم المحتوى التفاعلي دون احتياطي

رسائل البريد الإلكتروني التفاعلية هي كبيرة لا لبرنامج Outlook. يعتمدون على ترميز AMP أو اختراق مربع الاختيار ، وكلاهما غير مدعوم في Outlook.

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

لا تقم بإضافة المساحة المتروكة أو الهوامش إلى الصور

يزيل برنامج Outlook الحشو والهوامش من الصور. تأكد من إضافة المساحة المتروكة لخلية الجدول حول الصورة بدلاً من ذلك. أو إذا كانت لديك الصورة في نفس الخلية مثل نسخة ، فأضف هامشًا إلى العلامة حول النسخة (<h1> ، <h2> ، <p> ، وما إلى ذلك).

الخوف هو قاتل البريد الإلكتروني: الكود الذي تحتاجه لمواجهة مخاوفك في Outlook

يتطلب ترميز بريد إلكتروني رائع لعملاء البريد الإلكتروني لسطح المكتب في Outlook القفز خارج HTML و CSS "العاديين". هناك ثلاثة أنواع من التعليمات البرمجية التي ستساعد في جعل رسائل البريد الإلكتروني الخاصة بك تتألق في هؤلاء العملاء: الترميز الشرطي وخصائص MSO و VML.

قد يكون العمل بشيء جديد مخيفًا ، لكنني أعدك أنه يستحق ذلك. وتلك اللحظة عندما تجعله يعمل بشكل صحيح؟ ستشعر وكأنك جعلت Kessel Run في أقل من 12 فرسخ فلكي.

الترميز الشرطي

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

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

يمكنك حتى استخدام هذا لاستهداف إصدارات معينة من عملاء سطح المكتب في Outlook عن طريق إضافة أرقام الإصدارات:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook هو أي شيء غير مباشر ، لذا فإن أرقام الإصدارات لا تتوافق مع اسم عميل البريد الإلكتروني:

برنامج Outlook 2000 = MSO 9
Outlook 2002 = MSO 10
برنامج Outlook 2003 = MSO 11
برنامج Outlook 2007 = MSO 12
برنامج Outlook 2010 = MSO 14
Outlook 2013 = MSO 15
Outlook 2016 و Outlook 2019 و Office 365 لسطح المكتب = MSO 16

وبعد ذلك يمكنك أن تصبح أكثر تعقيدًا من خلال استهداف نطاق من العملاء بأقل من (lt) ، أو أكبر من (gt) ، أو أقل من (lte) أو يساوي (lte) ، أو أكبر من أو يساوي (gte). على سبيل المثال:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

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

يمكنك أيضًا استخدام التعليقات الشرطية لإخفاء المحتوى من Outlook بقول "if! mso" بمعنى "إذا لم يكن mso":

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

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

ولكن هناك طرقًا لاستهداف عملاء الويب أيضًا ، على الرغم من عدم وجود طريقة لاستهداف عميل ويب Outlook واحد على الآخر. لذلك عندما تستهدف Outlook.com ، ستستهدف أيضًا عميل الويب Office 365 (ولكن ليس عميل سطح المكتب).

يمكنك استهداف عملاء Outlook على الويب من خلال استغلال حقيقة أن Outlook يقوم بإلحاق "x_" بجميع أسماء الفئات ، ولكنه لا يفعل ذلك لمُحدد السمات. لذلك إذا كان لديك فئة "foo" وترغب في معاملتها بشكل مختلف لعملاء ويب Outlook ، فيمكنك استهدافها باستخدام هذا الرمز:

[class~="x_foo"] { }

(بفضل Mark Robbins لهذا الإصلاح وإلى Dylan Smith على howtotarget.email.)

خصائص MSO

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

إخفاء mso: الكل ؛

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

قاعدة ارتفاع خط mso: بالضبط ؛

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

mso-padding-alt

هذا أقل شيوعًا ، لكن كان علي استخدامه من وقت لآخر. يتيح لك إعلان المساحة المتروكة الخاصة بـ Outlook. لذلك ، إذا لم يتم عرض المساحة المتروكة العادية الموجودة في الخلية بشكل صحيح في Outlook ، فيمكنك استخدام mso-padding-alt لتعيين القيم التي تناسب تصميمك لبرنامج Outlook.

حجم الخط mso-ansi

هذا واحد آخر لا أستخدمه إلا من حين لآخر. يتيح لك تعيين أحجام الخطوط الخاصة بـ Outlook. لذلك إذا كان Outlook يعرض الخط الخاص بك بلمسة واحدة أكبر من عملاء البريد الإلكتروني الآخرين وينتهي بك الأمر بسطر نهائي قصير من النسخة التي لا تريدها ، فأضف حجم الخط mso-ansi وقم بتعيين حجم الخط الذي يجعل نسختك مناسبة.

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

VML

يرمز VML إلى لغة توصيف المتجهات. إنه إصدار Microsoft من SVG ، لكن اللغة تم إهمالها ونادرًا ما يتم استخدامها (yay email!). تمتلك Microsoft وثائق VML المؤرشفة عبر الإنترنت ، لذلك لا يزال بإمكانك البحث عن كيفية استخدامها لإنشاء ناقلات في Outlook ، حيث لا تزال مدعومة. نظريًا ، عندما تنتقل Microsoft إلى نموذج "One Outlook" الخاص بها ، سنكون قادرين على ترك VML وراءنا.

تأكد من تضمين إعلان مساحة الاسم VML. عادةً ما أقوم بإضافته إلى عنصر <html> في نموذجي المعياري حتى أتمكن من استخدام VML كلما احتجت إلى:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

بمجرد الحصول على ذلك ، يمكنك إضافة أي VML إلى التعليمات البرمجية الخاصة بك داخل شروط MSO الشرطية:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

ستشكل هذه الشفرة مستطيلًا أزرق بحجم 200 × 50 بكسل. ربما ليس شيئًا يمكنك استخدامه بالفعل في رسالة بريد إلكتروني ، ولكن يمكنك استخدام VML لإضافة أزرار بزوايا مستديرة إلى التعليمات البرمجية الخاصة بك وصور الخلفية وتدرجات الخلفية. يحتوي Campaign Monitor على أداتين تم إنشاؤهما بواسطة Stig لمساعدتك في إنشاء صور خلفية أو أزرار بزوايا مستديرة. لقد وجدت أن هذه طريقة رائعة لإضافة VML عندما تتعلم فقط.

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

عش طويلا والبريد الإلكتروني

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

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

اختبر رسائل البريد الإلكتروني في Outlook باستخدام Litmus

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

ابدأ تجربتك المجانية →