الدليل النهائي لقوائم التعداد النقطي في بريد إلكتروني بتنسيق HTML
الدليل النهائي لقوائم التعداد النقطي في بريد إلكتروني بتنسيق HTML
نشرت: 2019-09-06
يمكن أن تكون القوائم النقطية مفيدة بشكل لا يصدق للتسلسل الهرمي للمحتوى. إنها تسمح للمشتركين بقراءة النقاط الرئيسية في بريدك الإلكتروني بسرعة وسهولة ويمكنهم فصل المعلومات المهمة عن باقي المحتوى الخاص بك.
ولكن كما هو الحال في كثير من الأحيان في تطوير البريد الإلكتروني ، فإن الشيء الذي يبدو بسيطًا للغاية - إضافة قائمة نقطية لا يمكن أن يكون علمًا للصواريخ ، أليس كذلك؟ - يتبين أنه أكثر تعقيدًا مما تعتقد. لا يعرض جميع عملاء البريد الإلكتروني القوائم النقطية بالطريقة نفسها. لذلك يتجنب بعض المطورين استخدام القوائم النقطية تمامًا أو استخدام الجداول لإجبارها على تشكيلها — وهو أسلوب يمكن أن يتسبب في حدوث مشكلات كبيرة للمشتركين الذين يستخدمون برامج قراءة الشاشة.
إذا كنت تتطلع إلى تضمين قوائم نقطية في رسائل البريد الإلكتروني الخاصة بك بطريقة تجعلها سهلة الوصول ومقاومة للرصاص عبر عملاء البريد الإلكتروني ، فلدينا الحل المناسب لك.
استخدام علامات القائمة للقوائم النقطية
هنا في Litmus ، نستخدم علامات القائمة عندما نرمز القوائم النقطية في رسائل البريد الإلكتروني الخاصة بنا:
يشير <ul> إلى قائمة غير مرتبة ، أو قائمة عناصر ذات تعداد نقطي
يشير <ol> إلى قائمة مرتبة ، أو قائمة مرقمة من العناصر
<li> يشير إلى عنصر سطر في قائمة عناصر غير مرتبة أو مرتبة
إذا كان تنفيذ علامات القائمة في رسائلك الإلكترونية أمرًا تهتم به ، فاقرأ!
كيف تبدأ مع القوائم الدلالية ذات التعداد النقطي
لبدء استخدام القوائم النقطية في رسائل البريد الإلكتروني الخاصة بك ، إليك الحد الأدنى من التعليمات البرمجية التي تحتاجها لجعلها تعمل.
في هذا الرمز ، ستلاحظ أمرين حرصنا على تضمينهما. أحدها هو تحديد النوع المعين للرصاصة التي نهتم بتضمينها في قائمتنا ، مع سمة نوع محددة في علامتي <ul> و <ol>. بالنسبة إلى <ul> ، حددنا زرًا على شكل قرص. بالنسبة إلى <ol> ، حددنا "A" - لذلك سيتم تحديد عناصر القائمة بـ A و B و C وما إلى ذلك - ولكن يمكن أيضًا استخدام الأرقام والأحرف الصغيرة والكبيرة والأرقام الرومانية في القوائم المرتبة. فيما يلي القائمة الكاملة لخيارات سمات النوع التي يمكنك استخدامها في البريد الإلكتروني:
خيارات نوع القائمة غير المرتبة
قرص (يُقرأ كـ "رصاصة" •)
دائرة (اقرأ باسم "دائرة بيضاء" ○)
مربع (يُقرأ على أنه "مربع أسود" ■)
ترتيب خيارات نوع القائمة
1 (رقم عشري افتراضي)
أ (الأبجدية الكبيرة)
أ (الأبجدية الصغيرة)
أنا (رقم روماني كبير)
أنا (رقم روماني صغير)
هناك بعض الأشياء التي يجب ملاحظتها حول كيفية تصميم الهامش في هذه القوائم. لقد قمنا أيضًا بتضمين " margin-left " في كلتا القائمتين. هذا للتأكد من أن الرصاصات تظهر داخل حدود الحاوية الخاصة بك بدلاً من عدم المحاذاة أو عدم الظهور على الإطلاق.
اعتبارات Gmail
والجدير بالذكر أن جوجل البريد الالكتروني (ولكن ليس تطبيق Gmail للجوال) هو عميل واحد لا يحتاج الهامش الأيسر لضمان الرصاص تجعل داخل حدود الصحيحة، وهو ما يعني القوائم الخاصة بك وسوف تشمل تلك المسافة البادئة اليسرى إضافية. إذا كنت بحاجة ماسة إلى أن تكون القوائم النقطية ممتلئة بالهامش الأيسر للحاوية الخاصة بك ، فيمكنك إعادة تعيين الهامش الأيسر إلى الصفر باستخدام رمز خاص بـ Gmail مثل:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
كما ترى ، قمنا بتضمين استعلام الوسائط المتجاوب للجوال للتأكد من أن إعادة تعيين الهامش لا تؤثر على تطبيق Gmail على الهاتف المحمول. أيضًا ، يرجى ملاحظة الترتيب الذي تمت كتابة CSS به . إذا وضعت CSS المستجيب للجوال قبل CSS لسطح المكتب ، فسيتم إبطال CSS المستجيب للجوال بسبب التسلسل.
ملاحظة: القوائم الدلالية ذات التعداد النقطي تستجيب بشكل طبيعي للجوّال ، لذا فإن هذا يعتبر فوزًا مع مزايا إمكانية الوصول!
تصميم الرصاص الخاص بك
إذا كنت تعتقد أنك بحاجة إلى إبقاء قوائمك النقطية بسيطة (نحن نفكر في الرصاص الأسود أو الدائري أو 1 ، 2 ، 3) ، فأنت مخطئ! يمكنك فعل أي شيء تقريبًا مع الرموز النقطية التي يمكنك القيام بها في الرسائل النصية في رسائل البريد الإلكتروني. هل تريد تغيير اللون ليتناسب مع دليل أسلوب علامتك التجارية؟ تفضل. هل لديك قائمة مرتبة وتريد استخدام خط مخصص لمطابقة بقية بريدك الإلكتروني؟ يمكنك بالتأكيد ويجب عليك. بالنسبة لأي قائمة ، يمكنك تغيير حجم ولون الرموز النقطية - وبالنسبة للقوائم المرتبة ، يمكنك تغيير الخط والخط الغامق أو المائل لأرقامك أو أحرفك أيضًا.
دعنا نرى ما يفعله بعض هذا التصميم بالكود الأصلي الخاص بنا من قبل.
هذا التصميم ليس صحيحًا تمامًا بعد ، على الرغم من ذلك. إذا لاحظت ، فقد تم تجاوز نمط الخط العام الذي قمنا بتعيينه مسبقًا لكل قائمة من خلال التصميم الذي أضفناه إلى الرموز النقطية نفسها. ما عليك سوى تحديث تصميم الرمز النقطي ، وليس النسخة التي تليها. يعد هذا إصلاحًا سريعًا — ببساطة قم بلف نص عناصر القائمة بعلامة <span> ذات نمط لإعادة تعيين النسخة إلى نمط الخط المقصود.
أفضل بكثير - يمكنك الآن تصميم قوائم ذات تعداد نقطي دلالية دون المساس بتصميم المحتوى المدرج.
تتداخل قوائمك
الآن بعد أن عرفت كيفية تضمين قائمة نقطية دلالية واحدة في بريدك الإلكتروني ، ماذا عن القائمة المتداخلة ؟
ليس من الصعب تقريبًا كما تعتقد تضمين القوائم المتداخلة بدون جداول. تحتاج ببساطة إلى ترميز قائمتك المتداخلة كما تفعل عادةً ، ولكن تأكد من أنها متداخلة داخل علامة <li> بدلاً من الخارج - وإلا فقد ترى بعض الرموز النقطية المارقة تظهر في عملاء البريد الإلكتروني مثل Gmail IMAP (GANGA). إليك كيف سيبدو هذا الرمز:
ترث القوائم المتداخلة النمط العام للقوائم الرئيسية ، لذلك لا تحتاج إلى أي مسافات أو أنماط إضافية للحفاظ على اتساق القوائم. ومع ذلك ، قد تظل التباعد خادعة - مفاجأة ، مفاجأة - في Outlook. فيما يلي نصائحنا للتأكد من الحفاظ على المسافات بالطريقة التي تريدها:
للتباعد الأفقي ، أضف مساحة يسار: #px؛ بالبُعد الصحيح للعلامة <li>. سيساعد هذا في التحكم في التباعد بين الرمز النقطي والنسخة. بالإضافة إلى ذلك ، لا تنس تضمين مؤشر الهامش الأيسر المذكور في بداية هذا الدليل لضمان عدم عرض الرموز النقطية بعيدًا عن نسختك.
ملاحظة: لسوء الحظ ، هذا لا يعمل مع Outlook لنظام التشغيل Windows.
للتباعد الرأسي ، أضف margin-bottom: #px؛ بالبُعد الصحيح للعلامة <li>. سيساعد هذا في زيادة التباعد الرأسي بين كل عنصر من عناصر القائمة.
استخدام الرموز أو الصور المخصصة للرموز النقطية
لقد قمت بتصميم الرموز النقطية - حاول الآن استخدام الصور أو الرموز ، بدلاً من ذلك!
على عكس تصميم الرموز النقطية لحجم أو خط مخصص ، فإن الرموز المخصصة والرموز النقطية للصور ليست مدعومة عالميًا عبر عملاء البريد الإلكتروني ، لذا تأكد من المتابعة بحذر واستخدم أداة مثل Litmus Email Previews للتأكد من عرض قوائمك جيدًا عبر أجهزة المشتركين.
بالنسبة إلى الكود الخاص بنا ، سنقوم بتغيير قوائمنا النقطية لتشمل قلوب ، بالإضافة إلى شعار Litmus الخاص بنا لبعض الصور المخصصة.
<head> البيانات الوصفية
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook لنظام التشغيل Windows (2007 ، 2010 ، 2013 ، 2016 ، 2019)
نظام التشغيل Windows 10
تطبيق Gmail
تطبيق Outlook
Outlook.com
بريد جوجل
لماذا طريقة الجدول ليست مثالية لإمكانية الوصول
لقد سمعتنا نقول إنه يجب تجنب استخدام الجداول عند ترميز القوائم النقطية. لكن لماذا؟
قد تعرف أو لا تعرف أن برامج قراءة الشاشة تزداد بشكل كبير في شعبيتها - من المتوقع أن يستخدمها 275 مليون شخص بحلول عام 2023. قد يستخدم المشتركون لديك برامج قراءة الشاشة لأنهم يعانون من إعاقة تتطلب ذلك ، أو لأنهم يريدون سماع رسائل البريد الإلكتروني لديهم أثناء تفريش أسنانهم في الصباح.
عندما يتعلق الأمر بالتسلسل الهرمي لمحتوى بريدك الإلكتروني ، فإننا ندعو إلى استخدام العلامات الدلالية قدر الإمكان - أي ، الاستخدام الهادف والمتعمد لـ <h1> و <h2> وما إلى ذلك ، مقابل عام <p> و <span > العلامات. ولكن عندما يتعلق الأمر بالعلامات الدلالية ، فإن إحدى النقاط الشائكة لمطوري البريد الإلكتروني هي القائمة النقطية أو غير المرتبة.
تواجه برامج قراءة الشاشة صعوبة في قراءة رسائل البريد الإلكتروني باستخدام الجداول. إذا حدد قارئ الشاشة جدولًا في رمز بريدك الإلكتروني ، فسيتم قراءته بصوت عالٍ كجدول. سيخبرك حرفيا عن كل موقف ومحتوى كل صف وعمود. قد يكون هذا كثيرًا بالنسبة للمشتركين الذين يستمعون إلى رسائل البريد الإلكتروني الخاصة بك ، ومن المؤكد أنه يجعل من الصعب عليهم جمع المحتوى المقصود. لنلقِ نظرة على هذه القائمة النقطية:
مشفرة بالطاولات ، سيبدو قليلا مثل هذا:
هذا ... ليس رائعًا ، أليس كذلك؟ عندما يتعلق الأمر بالقوائم النقطية ، يقوم العديد من المطورين بحل المشكلة المرئية عن طريق ترميز قوائم التعداد النقطي الزائف في الجداول. ولكن إذا كنت تعرف هذه الجداول بدا من هذا القبيل، هل يستمر إلى رمز القوائم الخاصة بك بهذه الطريقة؟
على عكس الجداول ، فإن العلامات <ul> و <ol> و <li> أسهل كثيرًا على قارئ الشاشة في الفهم. عندما يرى قارئ الشاشة هذه العلامات في رسالة بريد إلكتروني يقرأها بصوت عالٍ ، فسيقرأها للمشتركين لديك:
لبدء القائمة ، ستخبرك بعدد العناصر الموجودة في القائمة
سيصف نوع الرمز النقطي المستخدم للإشارة إلى كل عنصر من عناصر القائمة ، مما يلي:
القوائم المرتبة: الحرف الأبجدي الرقمي المرتبط أو الرقم الروماني (على سبيل المثال: " أ " ، " 2 " ، " 4 ")
لإنهاء القائمة ، ستظهر " خارج القائمة "
على سبيل المثال ، إليك قائمة نقطية يمكن الوصول إليها ، يقرأها قارئ الشاشة:
هذا يبدو أفضل بكثير من سماع مجموعة كاملة من الصفوف والأعمدة ، أليس كذلك؟ من الأسهل كثيرًا فهم المحتوى في القوائم عندما يُقرأ بصوت عالٍ بنفس الطريقة التي تقرأ بها القائمة داخل رأسك ، كما لو كنت تنظر إلى البريد الإلكتروني نفسه.
هل أنت جاهز لجعل قوائمك النقطية سهلة الوصول؟
هل لديك الدافع لجعل القائمة النقطية لبريدك الإلكتروني قابلة للوصول وتريد التأكد من عرضها جيدًا عبر عملاء البريد الإلكتروني والأجهزة؟ سيساعدك استخدام أداة مثل Litmus Email Previews على التأكد من أن قائمتك النقطية مقاومة للرصاص. بالإضافة إلى ذلك ، تساعدك عمليات التحقق الجديدة الخاصة بإمكانية الوصول في Litmus Checklist على معرفة ما إذا كانت رسائل البريد الإلكتروني الخاصة بك تتبع أفضل الممارسات الرئيسية المتعلقة بإمكانية الوصول والحصول على نصائح عملية حول كيفية جعل رسائل البريد الإلكتروني الخاصة بك أكثر شمولاً.
