ندرك أنّه من الأفضل تصميم التطبيقات بطريقة متجاوبة لتوفير أفضل تجربة على الأجهزة المتعددة، ولكنّ التصميم المتجاوب يُعدّ أيضًا خيارًا جيدًا لتحسين إمكانية الاستخدام.
خذ موقعًا إلكترونيًا مثل 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 بكسل حجمًا مناسبًا لأي عنصر قابل للنقر عليه، يمكنك الاطّلاع على مزيد من الإرشادات حول العناصر التي يمكن التفاعل معها عند النقر.