قائمة تدقيق للتصميم المتجاوب
ما معنى التصميم المتجاوب
يعني التصميم المتجاوب أن تتكيف الصفحة مع المساحة المتاحة، من الهاتف الصغير إلى الشاشة العريضة، بدل أن تُثبَّت على مقاس واحد. ويغيّر الناس أيضًا حجم النص ويكبّرون ويدوّرون أجهزتهم، لذا يجب أن يصمد التخطيط أمام ذلك كله.
التخطيط والأحجام
- ابدأ بالجوال أولًا. صمم التخطيط الضيق أولًا ثم أضف قواعد للشاشات الأوسع باستعلامات <code>;min-width<;/code>;. يجبرك ذلك على ترتيب المحتوى بحسب الأهمية.
- حدّد نقاط الانكسار بحسب المحتوى. أضف نقطة انكسار حين يبدأ التخطيط بالاختلال، لا عند عرض جهاز بعينه.
- استخدم خطوطًا ومسافات مرنة. تحدد دالة CSS <code>;clamp()</code>; حدًا أدنى وقيمة مرنة في الوسط وحدًا أقصى، فتتدرج الأحجام بسلاسة بين نقاط الانكسار.
- أضف وسم viewport. بدون <code>;width=device-width, initial-scale=1</code>; تعرض متصفحات الجوال صفحة بعرض سطح المكتب وتصغّرها.
استخدم وحدات نسبية للعروض والمسافات حيثما أمكن، ودع flexbox أو grid يقرران كيف تلتف العناصر: ينشئ <code>;grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))</code>; تخطيطًا دون أي استعلام وسائط.
إعادة التدفق والتكبير واللمس
تضع WCAG شرطين ينبغي أن يحققهما التخطيط المتجاوب.
- إعادة التدفق (1.4.10، AA). يجب أن يعمل المحتوى بعرض يعادل 320 بكسل CSS دون تمرير في اتجاهين، باستثناء محتوى مثل جداول البيانات والخرائط الذي يتطلب تخطيطًا ثنائي الأبعاد.
- تغيير حجم النص (1.4.4، AA). يجب أن يمكن تكبير النص إلى 200% دون فقدان محتوى أو وظيفة. استخدم وحدات نسبية مثل <code>;rem<;/code>; وتجنب الصناديق ذات الارتفاع الثابت التي تقص النص.
- أهداف اللمس. تضع WCAG 2.2 حدًا أدنى لحجم الهدف هو 24 × 24 بكسل CSS (2.5.8، AA). والأهداف الأكبر مع مسافة حولها أسهل في الاستخدام على شاشات اللمس.
افحص هذه البنود مبكرًا. العروض الثابتة والارتفاعات الثابتة والتموضع المطلق هي الأسباب المعتادة للإخفاق، وتصحيحها في التصميم أرخص بكثير منه بعد البناء.
الصور والجداول والكلمات الطويلة
- استخدم صورًا متجاوبة: تتيح <code>;srcset<;/code>; و<code>;sizes<;/code>; للمتصفح اختيار ملف مناسب، وتمنع <code>;max-width: 100%</code>; الصور من تجاوز الحاوية.
- اترك الجداول العريضة تتمرر داخل حاويتها بدل أن تتمرر الصفحة كلها جانبيًا.
- عالج الكلمات والروابط الطويلة بالخاصية <code>;overflow-wrap: anywhere<;/code>; أو <code>;hyphens<;/code>; حتى لا تدفع التخطيط.
أدوات المتصفح مفيدة للفحص السريع، لكن الأجهزة الحقيقية تكشف سلوك اللمس وأشرطة المتصفح والأداء. اختبر في الوضعين الرأسي والأفقي، ومع تكبير النص، وباستخدام لوحة المفاتيح.
إذا ظهر تمرير أفقي فابحث عن العنصر الأعرض من الشاشة وعالجه.
خطط لكيفية تغير التنقل على الشاشات الصغيرة: زر قائمة أو شريط سفلي أو قائمة مختصرة. وأيًّا كان اختيارك فيجب أن تبقى الإجراءات الرئيسية في المتناول وبتسميات واضحة.
المصادر
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2, 1.4.4, 1.4.10 and 2.5.8. https://www.w3.org/TR/WCAG22/
- MDN Web Docs. Responsive web design. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.