نهج التخطيط القائم على الجداول

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

تبدأ كل رسالة بريد إلكتروني متجاوبة بـ <table> خارجي بعرض 100% يعمل بوصفه جسم الرسالة، يليه جدول داخلي بعرض ثابت، غالبًا 600px، يحتوي على المحتوى الفعلي. ويُعد هذا النمط ذو المستويين أساس معظم القوالب المستخدمة في الإنتاج.

أدرج دائمًا cellpadding="0" cellspacing="0" border="0" في كل جدول. فمن دونها، يضيف Outlook فجوات غير متوقعة. وتخبر إضافة role="presentation" برامج قراءة الشاشة بتجاهل دلالات الجدول، وهذا صحيح لأن جداول التخطيط ليست جداول بيانات.

لإنشاء أعمدة متعددة، ضمّن جدولًا يحتوي على خليتي <td> داخل صف المحتوى. وتحمل كل خلية عمودًا. وتجنب div+float؛ إذ يتجاهل Outlook float ويكدس الأعمدة رأسيًا على أي حال، مما يفسد التصميم.

يبلغ عرض جزء المعاينة المكتبي المتعارف عليه نحو 600px. ويضمن التصميم بهذا العرض ظهور الرسالة بصورة مريحة من دون تمرير أفقي في Outlook وGmail لسطح المكتب وApple Mail وYahoo وThunderbird في الوقت نفسه.

للشاشات الصغيرة، استهدف خلايا الجدول الداخلي باستعلام وسائط يضبط العرض على 100% وdisplay على block، مما يؤدي إلى تكديس الأعمدة رأسيًا. ويحترم iOS Mail وGmail Android استعلامات الوسائط، بينما يتجاهلها Outlook 365 لسطح المكتب ويحافظ على تخطيط سطح المكتب بعرض 600px.

ينبغي تطبيق ألوان الخلفية والصور على خلايا <td>، لا على divs. إذ يدعم Outlook سمة bgcolor في td بصورة موثوقة، بينما قد تُزال background-color في CSS من div أو تُتجاهل تمامًا، بحسب برنامج البريد.

يحتاج Outlook إلى Vector Markup Language (VML) لصور الخلفية. غلّف background-image الحديثة في CSS بتعليقات شرطية <!--[if mso]>...<![endif]--> مع بديل v:rect مضمن، حتى يعرض Outlook الصورة بينما تستخدم جميع برامج البريد الأخرى CSS.

تجنب flexbox وgrid والخصائص المخصصة ذات الدعم المحدود ومعظم أساليب التموضع. والتزم بـ display: block/inline، والأبعاد الثابتة عبر السمات، والأنماط المضمنة. وقد يبدو الناتج قديمًا وفق معايير الويب، لكنه يُعرض بالطريقة نفسها في كل صندوق وارد.

استخدم cellpadding كسمة وخلية <td> واحدة تحتوي على المساحة الداخلية. فـ margins في خلايا الجداول غير موثوقة في Outlook، بينما padding في td مدعوم عالميًا. واجمع bgcolor وpadding في td نفسه لإنشاء مكونات «البطاقة» من دون divs.

أضف role="presentation" إلى كل جدول تخطيط حتى لا تعلن برامج قراءة الشاشة «صف، العمود 1 من 2». وأدرج أيضًا نصًا بديلًا لكل صورة، ونصًا حقيقيًا لأي محتوى بدلًا من صور النص، وترتيبًا واضحًا ومتسلسلًا للعناوين.

يستخدم تخطيط البريد الإلكتروني بتنسيق HTML جداول متداخلة مع cellpadding/cellspacing/border بقيمة صفر وrole="presentation". ويُوسّط جدول خارجي بعرض 100% جدولًا داخليًا بعرض 600px؛ وتشكل خلايا td المتداخلة الأعمدة التي يمكن لاستخبارات الوسائط تكديسها على الهاتف المحمول. تجنب flexbox وgrid، واستخدم bgcolor في td، وأضف بدائل VML لخلفيات Outlook.