التأكد من أن التصميم يتكيف بشكل فعال مع أحجام واتجاهات الشاشات المختلفة لتوفير تجربة سلسة عبر الأجهزة

1. ١

   إعادة ترتيب الأعمدة والمكونات حسب مقاس الشاشة

   مقيس آليًاDGA-005-a

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

   تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.

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

   ما الذي يسقط فيها: تمرير أفقي على مقاس ٣٧٥ بكسل، أو قسم يختفي كليًا على الجوال بدل أن يعاد ترتيبه، فيفقد مستخدم الجوال محتوى يراه غيره.

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

   كيف تُعالَج: اعتمدوا الخصائص المنطقية والشبكات المرنة بدل العروض الثابتة، وامنعوا تجاوز المحتوى العريض بحاوية تمرير خاصة به بدل تمرير الصفحة كلها.

   نقاط متصلة:قابلية الاستخدام الكاملة على الأجهزة المحمولة ·استجابة شريط التنقل لجميع أحجام الشاشات ·وضوح مسار التصفح واستجابته على جميع الأجهزة

2. ٢

   قابلية الاستخدام الكاملة على الأجهزة المحمولة

   مقيس آليًاDGA-005-b

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

   تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.

   ما الذي يجتازها: وسم إطار العرض معلن ويسمح بالتكبير، ومساحات اللمس لا تقل عن ٤٤ بكسل، والتنقل الرئيسي يبلغه المستخدم على الجوال بخطوة واحدة.

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

   كيف تُقاس أو يُتحقق منها: يُقرأ وسم إطار العرض وقيوده، وتُقاس مساحات اللمس على المقاس الأصغر، ويُفحص بلوغ التنقل الرئيسي من الصفحة الأولى.

   كيف تُعالَج: احذفوا قيود التكبير من وسم إطار العرض، ووسّعوا مساحة اللمس إلى ٤٤ بكسل بالحشو لا بتكبير الخط، وأبقوا التنقل الرئيسي في متناول ضغطة واحدة.

   نقاط متصلة:إعادة ترتيب الأعمدة والمكونات حسب مقاس الشاشة ·استجابة شريط التنقل لجميع أحجام الشاشات ·دعم الإيماءات الأساسية على الأجهزة اللمسية

كيف تتحققون منه يدويًا

وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.

1. ١التقطوا الصفحة عند ثلاثة مقاسات على الأقل: 375px للجوال و768px للوحي و1440px لسطح المكتب
2. ٢افحصوا التجاوز الأفقي: إن زاد scrollWidth عن clientWidth فتلك مخالفة صريحة لا تحتاج حكمًا
3. ٣قارنوا إعادة التدفق بين المقاسات: عدد الأعمدة وترتيب الأقسام يجب أن يتغيّر فعليًا، لا أن يصغر المحتوى وحده
4. ٤افحصوا وسم viewport، ووجود user-scalable=no أو maximum-scale=1 منع للتكبير ومخالفة لإمكانية الوصول
5. ٥قيسوا أهداف اللمس على مقاس الجوال، ولا يقل التفاعلي منها عن 44×44px
6. ٦تحققوا من إتاحة التنقل على الشاشات الصغيرة: القائمة أو الدرج يفتح ويغلق ويصل إلى كل المسارات، ولا يكفي أن يكون موجودًا في الشيفرة

أخطاء شائعة في هذا المعيار

ما يرفقه التقرير مع كل ملاحظة

لقطات المقاسات الثلاثة + قيمة scrollWidth + قائمة العناصر < 44px + وسم viewport

كيف يُعالَج

1. ١ابدأوا بالتجاوز الأفقي، فهو أسرع ما يُرصد وأظهر ما يزعج المستخدم على الجوال
2. ٢احذفوا user-scalable=no و maximum-scale=1 من وسم viewport. منع التكبير لا مبرر له، ويسقط المعيار وحده
3. ٣ارفعوا أهداف اللمس إلى 44×44px عبر حشو العنصر لا عبر تكبير أيقونته
4. ٤راجعوا إعادة التدفق قسمًا قسمًا: ما لا يتغيّر ترتيبه بين المقاسات لم يُصمَّم متجاوبًا بل صُغِّر
5. ٥اختبروا التنقل على الجوال بالاستعمال لا بالنظر، وتنقّلوا إلى مسار عميق ثم عودوا

معايير متصلة

وفي الدليل: هل يشمل كود المنصات تطبيقات الجوال؟ · الاستجابة هي ما يقرر تجربة الجوال، والمقالة تفصّل نطاقها