معاينة بريد HTML
شاهد بريدك في جيميل على سطح المكتب والجوال

ماذا تعرض لك معاينة بريد HTML

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

وهذا يوفّر متاعب حقيقية. يغيّر جيميل أكثر مما يتوقع معظم الناس. يحذف بعض الوسوم، ويتجاهل بعض CSS، ويقصّ الرسائل الطويلة. لذلك فنظرة سريعة الآن أفضل من بريد معطوب لاحقًا.

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

كل شيء يحدث في متصفحك. بريدك بأسمائه وعروضه لا يغادر هذه الصفحة أبدًا.

عاين بريدًا قبل إرساله

الصق HTML أو افتحه فتظهر المعاينة فورًا. لا يوجد زر تضغطه. وإذا أردت أن تتجول فقط، اختر مثالًا واضغط «جرّب مثالًا».

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

معاينة البريد على سطح المكتب والجوال

يعرض سطح المكتب بريدك بعرض 760 بكسل، قريبًا من عرض جزء القراءة في جيميل. ويعرضه الجوال بعرض 375 بكسل، عرض هاتف شائع.

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

كيف يقرأ جيميل CSS الخاص بك

تحتفظ جوجل بصفحة اسمها CSS support in Gmail. تسرد كل خاصية يدعمها جيميل. ويتجاهل جيميل كل ما عداها.

اضبط القواعد على جيميل فتُسقط المعاينة كل ما تتركه القائمة. فمثلًا يختفي box-shadow وposition وتخطيطات flex. واضبطها على المتصفح العادي فلا تُسقط شيئًا، لتتمكن من المقارنة بين الاثنين.

المحددات واستعلامات الوسائط في جيميل

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

تتبع المعاينة الحدود نفسها. ويظهر المحدد المتخطى في الفحوص مع مثال، لتجده بسرعة.

سطر الموضوع ونص المعاينة

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

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

معاينة الوضع الداكن

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

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

الصور في المعاينة

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

ويبقى المربع يُظهر التصميم. كذلك، وبالإضافة إلى ذلك تخبرك الفحوص عن النص البديل المفقود والأعراض المفقودة والصور المضمّنة بصيغة base64 التي لا يعرضها جيميل.

ما يزيله جيميل من البريد

لا يشغّل جيميل السكربتات. كما يزيل الإطارات والنماذج والفيديو وSVG. ويحذف أيضًا معالجات الأحداث مثل onclick والروابط التي تبدأ بـ javascript:.

تفعل المعاينة الشيء نفسه وتسرد كل إزالة. لذلك تعرف بزر معطوب قبل قرائك.

حدّ القصّ عند 102 كيلوبايت

يقصّ جيميل الرسالة الأكبر من 102 كيلوبايت. ويخفي الباقي خلف رابط اسمه «عرض الرسالة بالكامل». وإذا كان سطر إلغاء الاشتراك في الأسفل فقد لا يراه القراء أبدًا.

أيضًا، يعرض مربع الحجم بريدك بالكيلوبايت. ولتصغيره احذف التعليقات وكرّر أنماطًا مضمّنة أقل ومرّر الكود عبر مصغّر HTML.

فحوص لقوالب البريد البارد

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

تنبّه الفحوص إلى المشكلات المعتادة. تحذّر من البريد الذي معظمه صور، ومن الروابط التي لا تؤدي إلى أي مكان، ومن غياب سطر إلغاء الاشتراك. وفي الولايات المتحدة يشرح دليل الامتثال لـ CAN-SPAM سبب أهمية هذا الأخير.

افتح ملفًا لديك بالفعل

تتيح لك معظم أدوات البريد تصدير HTML القالب. في الواقع، احفظه ملفًا واضغط «فتح ملف» فتظهر المعاينة. تعمل الملفات حتى 2 ميغابايت، وهذا أكثر بكثير مما سيعرضه جيميل.

افحص روابطك قبل الإرسال

الرابط المعطوب يكلفك قارئًا. تعدّ الفحوص كل رابط وتحذّر من الفارغ ومن http العادي ومن غير الآمن. وتبقى الروابط معطّلة في المعاينة، فلا تُبعدك نقرة خاطئة عن عملك.

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

قارن قواعد جيميل بالمتصفح العادي

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

المعاينة ليست اختبارًا كاملًا

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

كذلك يتصرف Outlook وApple Mail بشكل مختلف. الجداول والأنماط المضمّنة هي أأمن طريقة لبناء بريد واحد لها جميعًا.

حلول لأكثر المشكلات شيوعًا

استخدم الجداول للتخطيط وحدّد عرضًا لكل صورة. ضع الأنماط الأساسية مضمّنة. أضف نصًا بديلًا لكل صورة وأبقِ العمود الرئيسي قرب 600 بكسل. ثم عاين من جديد على الشاشتين.