اختبار التصميم المتجاوب

لماذا يهم

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

وتجعل WCAG ⁦2.2⁩، معيار إمكانية الوصول الصادر عن W3C، جزءاً من ذلك قابلاً للاختبار: إعادة التدفق عند ⁦320⁩ بكسل CSS (معيار النجاح ⁦1.4.10⁩)، ونص يمكن تكبيره إلى ⁦200%⁩ (⁦1.4.4⁩)، وعدم التقييد باتجاه واحد (⁦1.3.4⁩).

منفذ العرض ونقاط التوقف: اختيار العروض

منفذ العرض هو المساحة التي تُرتَّب فيها الصفحة، ويُقاس ببكسلات CSS. وتحدد متصفحات الجوال حجمه من <meta name="viewport" content="width=device-width, initial-scale=1">؛ ومن دون هذا الوسم ترتّب الصفحة بعرض يشبه سطح المكتب ثم تصغّرها. ونقطة التوقف عرضٌ، وأحياناً ارتفاع، يبدّل عنده استعلام الوسائط التخطيط، واستعلام الوسائط قواعد CSS لا تنطبق إلا ما دام شرط مثل min-width: 600px صحيحاً. وبين نقاط التوقف يتمدد التخطيط المرن ويتقلص مع منفذ العرض.

كل نقطة توقف هي الحد بين تخطيطين، فاختبر آخر عرض في التخطيط الأول وأول عرض في التخطيط التالي، لأن استعلام الوسائط الذي يخطئ ببكسل واحد لا يُخفق إلا عند هذين العرضين. ويشرح درس تحليل القيم الحدّية (Boundary Value Analysis) هذه التقنية بالتفصيل. خذ نقاط التوقف من نظام التصميم أو من شيفرة CSS نفسها (ابحث فيها عن @media، وتجعل أداة منسّق CSS ورقة الأنماط المصغّرة مقروءة)، لا من قائمة الهواتف الشائعة، لأن نقاط التوقف هي حيث يتغير التخطيط.

• أصغر عرض مدعوم، وغالباً ⁦320⁩ بكسل CSS.
• جانبا كل نقطة توقف: ⁦599⁩ و⁦600⁩ مع min-width: 600px، لكن ⁦600⁩ و⁦601⁩ مع max-width: 600px.
• سحبٌ بطيء عبر كل نطاق، لأن التخطيط المرن ينكسر أيضاً بين نقاط التوقف، وغالباً قرب الطرف الضيق.
• شاشة عريضة جداً يجب أن يتوقف فيها المحتوى عند عرضه الأقصى، وارتفاعات قصيرة مثل هاتف في الوضع الأفقي.

جرّبها: مولّد القيم الحدّية جرّبها: منسّق CSS

اتجاه الشاشة والتكبير وإعادة التدفق

تدوير الهاتف يبدّل عرض منفذ العرض وارتفاعه: فعرض ⁦360⁩ بكسل CSS في الوضع العمودي (Portrait) قد يصبح ⁦740⁩ في الوضع الأفقي (Landscape) ويعبر نقطة توقف في منتصف مهمة. ويشترط المعيار ⁦1.3.4⁩ في WCAG ألا يُقيَّد المحتوى باتجاه واحد ما لم يكن اتجاه بعينه ضرورياً.

أما تكبير المتصفح (Zoom) على الحاسوب فيكبّر كل بكسل CSS، فيضيق منفذ العرض: النافذة التي عرضها ⁦1280⁩ بكسل CSS يصبح عرضها ⁦640⁩ عند ⁦200%⁩ و⁦320⁩ عند ⁦400%⁩، وتُفعَّل استعلامات الوسائط نفسها كما في شاشة صغيرة. ويشترط المعيار ⁦1.4.4⁩ إمكان تكبير النص إلى ⁦200%⁩ دون فقدان محتوى أو وظيفة، ويشترط ⁦1.4.10⁩ أن يعمل المحتوى عند ⁦320⁩ بكسل CSS دون تمرير في اتجاهين، باستثناء أجزاء مثل جداول البيانات والخرائط. أما التكبير بإصبعين (Pinch zoom) على الهاتف فيكبّر الصفحة دون إعادة ترتيبها، فلا يختبر إعادة التدفق (Reflow).

• دوّر الشاشة في منتصف مهمة: يجب أن يبقى النص المكتوب والمرشحات وموضع التمرير ومربعات الحوار المفتوحة.
• كبّر النص وحده من إعداد حجم الخط في المتصفح لتكشف الصناديق ثابتة الارتفاع التي تقطع تسمياتها.
• أبلغ عن user-scalable=no، أو عن قيمة maximum-scale أقل من ⁦2⁩ مثل maximum-scale=1، في وسم منفذ العرض: فهما يحاولان منع الناس من تكبير الصفحة، وهذا إخفاق في المعيار ⁦1.4.4⁩.

مثال تطبيقي: خطة اختبار لقائمة المنتجات

تعرض قائمة المنتجات في متجرٍ عموداً واحداً وزر القائمة تحت ⁦600⁩ بكسل CSS، وعمودين من ⁦600⁩، وأربعة أعمدة وشريط قائمة كاملاً من ⁦1024⁩، ولا يزيد عرض المحتوى أبداً على ⁦1200⁩. وشيفرة CSS مكتوبة بنهج الجوال أولاً (Mobile-first): @media (min-width: 600px) و@media (min-width: 1024px)، فالعرضان ⁦600⁩ و⁦1024⁩ هما أول عرض في كل تخطيط جديد.

يمرّ المختبِر على الخطة أدناه في شريط أدوات الأجهزة، ثم يكرر مسار الإضافة إلى السلة على هاتف Android حقيقي وجهاز iPhone حقيقي. ويظهر عيبان: من ⁦600⁩ إلى ⁦680⁩ بكسل تُقطع تسمية «أضف إلى السلة»، وتدوير الهاتف يمسح المرشحات المختارة. ويأتي تقرير العيب الثاني بعد الخطة.

• ⁦320 × 640⁩: الحد الأدنى وعرض إعادة التدفق؛ عمود واحد بلا تمرير أفقي.
• ⁦599⁩ و⁦600⁩، و⁦1023⁩ و⁦1024⁩: جانبا كل نقطة توقف، مع سحب بطيء عبر كل نطاق.
• ⁦1920 × 1080⁩: يتوقف المحتوى عند ⁦1200⁩ بكسل في منتصف الشاشة.
• ⁦360 × 740⁩ يُدار إلى ⁦740 × 360⁩ أثناء التصفية: عمودان مع بقاء المرشحات وموضع التمرير.
• نافذة عرضها ⁦1280⁩ بكسل عند ⁦200%⁩ و⁦400%⁩: عمودان ثم عمود واحد، وكل وظيفة في المتناول.

Title:    قائمة المنتجات: تُمسح المرشحات المختارة بعد تدوير الهاتف
Where:    /products، الإصدار 3.8.0 على Staging
Device:   هاتف Android حقيقي، Chrome؛ ويتكرر في شريط أدوات الأجهزة: 360 x 740 ثم 740 x 360
Steps:    1. افتح قائمة المنتجات في الوضع العمودي (منفذ العرض 360 x 740)
          2. اختر المرشحين «المقاس 42» و«اللون: أسود»
          3. دوّر الهاتف إلى الوضع الأفقي (منفذ العرض 740 x 360)
Expected: تخطيط بعمودين، والمرشحان ما زالا مختارين، والقائمة ما زالت مصفّاة
Actual:   تخطيط بعمودين، والمرشحات ممسوحة، والقائمة كاملة بلا تصفية
Notes:    يحدث أيضاً عند تغيير حجم نافذة الحاسوب عبر 600 px، فهو مرتبط بنقطة
          التوقف لا بالجهاز. ولا يضيع شيء ما دام العرض في جانب واحد من 600.

جرّبها: مولّد سيناريوهات الاختبار

ما يستطيع شريط أدوات الأجهزة إخبارك به وما لا يستطيع

شريط أدوات الأجهزة هو الأداة المناسبة لهذا المسح: تكتب أحجاماً دقيقة أو تسحب عبر نطاق، وتدوّر الشاشة، وفي Chrome تعرض استعلامات الوسائط أشرطةً فوق الصفحة. واختيار جهاز جاهز (Device preset) يرسل أيضاً وكيل المستخدم (User agent) الخاص بذلك الهاتف، ويمكنك قراءته بأداة محلل وكيل المستخدم. لكنه يبقى متصفح حاسوب يقلّد هاتفاً، فأكّد المسارات التي يتوقف نجاحها على التخطيط على أجهزة حقيقية. فهو لا يحاكي ما يلي:

• محرك الهاتف: اختيار iPhone الجاهز في Chrome لا يعرض الصفحة بمحرك WebKit الذي يستخدمه Safari.
• أشرطة متصفح الجوال التي تختفي وتعود؛ و100vh هو الارتفاع مع إخفائها، فقد تفقد اللوحة الممتدة بطول الشاشة حافتها السفلية.
• لوحة المفاتيح على الشاشة، التي قد تخفي الحقل المحدد أو زر إرسال ثابتاً.
• عدم دقة الإصبع: الأهداف الصغيرة أو المتزاحمة التي تُخفق في المعيار ⁦2.5.8⁩ (⁦24 × 24⁩ بكسل CSS أو تباعد كافٍ) تبدو سليمة مع الفأرة.
• إعدادات حجم النص في الهاتف وأداؤه الفعلي، فإبطاء المعالج والشبكة (Throttling) لا يعطي إلا تقريباً له. وإعداد التكبير في الشريط نفسه يغيّر حجم المعاينة فقط، لا منفذ العرض ببكسلات CSS.

جرّبها: محلّل User-Agent

عيوب التجاوب الشائعة

• التمرير الأفقي: عرض ثابت، أو كلمة أو رابط طويل بلا مواضع للفصل، أو جدول عريض، أو صورة بلا عرض أقصى.
• محتوى مغطّى أو بعيد المنال: ترويسة أو تذييل ثابت فوق حقل أو زر، أو مربع حوار أطول من منفذ عرض قصير ولا يمكن تمريره.
• وظائف مفقودة: إجراء مخفي بـ display: none على الجوال دون طريق آخر إليه، أو قائمة لا تُفتح أو لا تُمرَّر في الوضع الأفقي.
• نص مقطوع وحالة مفقودة: تسميات تقطعها الترجمات الأطول أو النص المكبَّر، ومدخلات أو مرشحات تعود إلى البداية بعد التدوير، غالباً لأن الصفحة تبدّل المكونات عند نقطة توقف.
• فجوات وتداخلات بين الاستعلامات: مع max-width: 767px وmin-width: 768px لا تنطبق أيٌّ من القاعدتين على العروض الكسرية مثل ⁦767.5⁩، التي تظهر على بعض الشاشات عالية الكثافة وعند بعض مستويات التكبير؛ ومع max-width: 768px وmin-width: 768px تنطبق القاعدتان معاً عند ⁦768⁩.
• صور ممدّدة أو مقصوصة أو ضبابية، وفي الصفحات التي تُكتب من اليمين إلى اليسار (RTL) قائمة جوال تنزلق من الجهة الخاطئة.

جرّبها: مولّد Lorem Ipsum جرّبها: مولّد بيانات اختبار متعددة اللغات

أسئلة شائعة

المراجع

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)الشرح التوضيحي لكل إرشاد ومعيار نجاح في WCAG 2.2: الغرض، ومن يستفيد، والأمثلة والتقنيات (غير إلزامي).
• Responsive web design — MDNMDN Web Docs (Mozilla)التصميم المتجاوب عملياً: تخطيطات مرنة باستخدام flexbox وgrid، واستعلامات الوسائط، ووسم viewport، لتعمل الصفحة نفسها على مختلف أحجام الشاشات.
• Responsive web design basicsGoogle (web.dev)أساسيات التصميم المتجاوب: ضبط منفذ العرض (viewport)، وتحجيم المحتوى ليلائمه، واستخدام استعلامات الوسائط بنقاط توقف يحددها المحتوى لا الجهاز.