نعلم أنها فكرة جيدة أن التصميم سريع الاستجابة لتوفير أفضل تجربة لأجهزة متعددة، لكن التصميم سريع الاستجابة يؤدي أيضًا إلى تحقيق الفوز في إمكانية الوصول.
فكِّر في موقع مثل Udacity:
يمكن للمستخدم ضعاف النظر الذي يواجه صعوبة في قراءة النص المطبوع بخط صغير تكبير الصفحة، ربما بنسبة 400٪. نظرًا لتصميم الموقع بشكل متجاوب، ستُعيد واجهة المستخدم إعادة ترتيب نفسها لـ "إطار عرض أصغر" (في الواقع للصفحة الأكبر)، وهو أمر رائع لمستخدمي سطح المكتب الذين يحتاجون إلى تكبير الشاشة ولمستخدمي برامج قراءة شاشة الهاتف المحمول أيضًا. أي أنه موقف مربح لكلا الطرفين. في ما يلي الصفحة نفسها التي تم تكبيرها بنسبة 400%:
في الواقع، من خلال التصميم سريع الاستجابة، نلبي القاعدة 1.4.4 من قائمة تحقق WebAIM، والتي تنص على أن الصفحة "... يجب أن تكون قابلة للقراءة وفعّالة عند مضاعفة حجم النص".
يُعد استعراض جميع التصميمات سريعة الاستجابة خارج نطاق هذا الدليل، ولكن إليك بعض النقاط الرئيسية التي ستفيد تجربتك سريعة الاستجابة وتمنح المستخدمين وصولاً أفضل إلى المحتوى الخاص بك.
استخدام العلامة الوصفية لإطار العرض
<meta name="viewport" content="width=device-width, initial-scale=1.0">
سيؤدي ضبط width=device-width إلى مطابقة عرض الشاشة بوحدات بكسل مستقلة عن الجهاز،
وضبط initial-scale=1 ينشئ علاقة 1:1 بين وحدات بكسل CSS ووحدات البكسل المستقلة عن الجهاز.
حيث يؤدي ذلك إلى توجيه المتصفح إلى ملاءمة المحتوى مع حجم الشاشة،
حتى لا يرى المستخدمون مجموعة من النصوص المكتوبة.
راجع تغيير حجم المحتوى وفقًا لإطار العرض للتعرف على مزيد من المعلومات.
السماح للمستخدمين بالتكبير/التصغير
من الممكن استخدام العلامة الوصفية لإطار العرض لمنع التكبير أو التصغير من خلال ضبط maximum-scale=1 أو user-scaleable=no.
تجنب القيام بذلك، واسمح للمستخدمين بالتكبير إذا كانوا بحاجة إلى ذلك.
التصميم بمرونة
تجنب استهداف أحجام شاشة معينة وبدلاً من ذلك استخدم شبكة مرنة، وإجراء تغييرات على التنسيق عندما يفرض المحتوى. كما رأينا في مثال Udacity أعلاه، فإن هذا النهج يضمن استجابة التصميم سواء كانت المساحة المنخفضة ناتجة عن شاشة أصغر أو مستوى تكبير/تصغير أعلى.
يمكنك قراءة المزيد عن هذه الأساليب في مقالة أساسيات تصميم الويب السريع الاستجابة.
استخدام الوحدات النسبية للنص
لتحقيق أقصى استفادة من شبكتك المرنة، استخدم الوحدات النسبية مثل em أو rem لأشياء مثل حجم النص، بدلاً من قيم البكسل. تتيح بعض المتصفحات تغيير حجم النص في إعدادات المستخدم المفضّلة فقط، وإذا كنت تستخدم قيمة البكسل للنص، لن يؤثر هذا الإعداد في نسختك. ومع ذلك، إذا كنت قد استخدمت وحدات نسبية طوال الوقت، فسيتم تحديث نسخة الموقع لتعكس تفضيل المستخدم.
سيتيح ذلك إعادة تدفق الموقع الإلكتروني بالكامل مع تكبير المستخدم، ما يوفّر تجربة القراءة التي يحتاجها لاستخدام موقعك الإلكتروني.
تجنُّب إلغاء ربط العرض المرئي بترتيب المصدر
سيتبع الزائر الذي يتصفح موقعك باستخدام لوحة المفاتيح ترتيب المحتوى في مستند HTML. عند استخدام طرق تنسيق حديثة مثل Flexbox وGrid، من السهل جعل العرض المرئي لا يتطابق مع ترتيب المصدر. وقد يؤدي ذلك إلى تنقّل شخص يستخدم لوحة المفاتيح بسرعة في الصفحة، ما قد يسبب إزعاجًا للمستخدمين.
تأكد من اختبار تصميمك في كل نقطة توقف عن طريق التنقل في المحتوى، هل لا يزال التدفق عبر الصفحة منطقيًا؟
يمكنك الاطّلاع على مزيد من المعلومات عن إلغاء الربط بالشاشة المصدر والشاشة المرئية.
اعتنِ بأدلة مكانية
عند كتابة نسخة مصغّرة، تجنَّب استخدام اللغة التي تشير إلى مكان العنصر على الصفحة. على سبيل المثال، الإشارة إلى التنقل "على اليسار" ليس منطقيًا في إصدار الهاتف المحمول عندما يكون التنقل في الجزء العلوي من الشاشة.
التأكّد من أنّ أهداف النقر كبيرة بما يكفي على الأجهزة التي تعمل باللمس
في الأجهزة التي تعمل باللمس، احرص على أن تكون أهداف النقر كبيرة بما يكفي لتسهيل تنشيطها بدون النقر على روابط أخرى. الحجم الجيد لأي عنصر قابل للنقر هو 48 بكسل، يمكنك قراءة المزيد من الإرشادات حول أهداف النقر.