تشخيص تناقضات العرض المتجاوب

أين يمنع التصميم القراءة أو إتمام الإجراء؟

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

1. إنشاء المصفوفة

   أدرج الرئيسية والقسم والملف الطويل والنتائج والنموذج والأداة. جرّب 320 و390 و768 و1024 و1440 و1920 بكسل CSS ثم غيّر العرض تدريجياً بينها. أضف أطول العناوين وكل أنظمة الكتابة؛ قد يفوت خلل بين نقطتي تحول اللقطات المعتادة.

2. فحص القواعد المطبقة

   سجّل حجم الخط المحسوب وتباعد الأسطر والعرض وpadding وmargin والارتفاع الأدنى بأدوات المتصفح. حدّد القاعدة المطبقة وأولويتها. إصلاح h2 بصورة عامة قد لا يؤثر في محدد أدق. راجع نسخ المكوّن المعني.

3. إعادة توازن القراءة

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

4. اختبار الأعمدة

   افحص مجموعات من ثلاث وأربع وخمس بطاقات بمحتوى فعلي. تحوّل إلى عمود واحد قبل تضييق الفقرات. اختبر الروابط الطويلة والحقول. احتفظ بتمرير محلي واضح للجداول التي تحتاج إلى بُعدين.

5. فحص الصور

   قس الإطار ونسبته ثم currentSrc والبايتات المنقولة. يجب أن يصف sizes الحيز المشغول؛ نصف الصفحة ليس عرض الشاشة كله. تحقق من بقاء العنصر المفيد عند القص وحجز الأبعاد والتحميل المؤجل أسفل الجزء الأول.

6. إعادة التكبير والتفاعلات

   اختبر القراءة عند 200% وإعادة التدفق عند 400% على شاشة مناسبة. تنقل بين القوائم والأسئلة والحقول بلوحة المفاتيح. افحص التركيز والترتيب. في العربية راجع المحاذاة والأيقونات الاتجاهية والسلاسل اللاتينية. سجّل النتائج لكل رابط ولغة وعرض.

حالات وقرارات

حالات نموذجية لإعداد التحقق، وليست وصفًا لمهام منفذة أو ملاحظات فعلية.

الدليل المطلوب حفظه

• الرابط واللغة وعرض CSS والتكبير والمتصفح وحالة اللوحة.
• لقطة الخلل والقواعد المحسوبة المسؤولة.
• لقطة مماثلة بعد الإصلاح ونتيجة الإجراء.
• القوالب والترجمات المعاد اختبارها؛ افصل العيوب المتبقية عن الإصلاحات المثبتة.

مراجع رسمية

• MDN — تصميم الويب المتجاوب
• W3C — إعادة تدفق المحتوى

بروتوكولات ذات صلة

• تدقيق إمكانية الوصول عبر رحلة الويب
• تدقيق موقع متعدد اللغات
• قياس أداء الويب كما يختبره الزائر
• تدقيق النموذج من البداية إلى النهاية

فحوص قبل الاستنتاج

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