الدليل الشامل لشرح النقاط الحدية لصفحات الويب المتجاوبة

هل تساءلت عن كيفية عرض صفحة الويب على مختلف أحجام الشاشات؟ لتسهيل الأمر لنفكك السؤال باستخدام المثال التالي:

لنتخيل أن تصميم صفحة الويب هو مخطط هندسي لمنزل جديد وجميل. الأساس الّذي يستند عليه المنزل يمثل استعلامات الوسائط (Media queries)، يليه الطابق الأرضي الذي يُحدد كيف ستُبنى بقية المنزل. هذا الطابق الأرضي هو ما نعده نقطة حدِّية.

ما النقاط الحدية لصفحات الويب المتجاوبة؟

النقاط الحدِّية (Breakpoints)، بمفهوم تصميم صفحات الويب المتجاوبة، هي مجال من القيم مصحوبة باستعلام وسائط لتغيير تصميم الصفحة بمجرد أن يكون عرض نافذة المتصفّح داخلًا في المجال المذكور.

سيتغير في مثال استعلام الوسائط التالي تصميم الصفحة من العرض الأساسي 960 بكسل عندما تُعرض على شاشة 768 بكسل:

}(media only screen and (max-width: 768px@

/* هنا تكتب تعليمات CSS */
{

تنشئ التعليمة أعلاه نقطة حدِّية عند وصول عرض نافذة المتصفح لأقل من 768 بكسل.

النقاط الحدية القياسية

تحتوي صفحات الويب التفاعلية عادةً على نقطتين حدِّيتين على الأقل تستهدفان أجهزة الجوال الذكية والأجهزة اللوحية. على خلاف أجهزة الحاسوب، اعتمدت النقاط الحدِّية لأجهزة الجوال والأجهزة اللوحية على أجهزة الآيفون والآيباد باعتبارهما الأكثر شيوعًا في كل من تصنيفي الهواتف الذكية والأجهزة اللوحية.

رغم أن تلك الممارسة قابلة للنقاش، إلا أننا سنترك ذلك النقاش لوقت لاحق، ونصب تركيزنا في الاستعلامات التالية التي تمثل تلك القيم القياسية.

الاستعلام الخاص بأجهزة الجوال

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* هنا تكتب تعليمات CSS */

}

الاستعلام الخاص بالأجهزة اللوحية

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* هنا تكتب تعليمات CSS */
}

تفاصيل إضافية

الاستعلامان السابقان أساسيان لكنهما غير كافيين لتغطية جميع حالات الاستخدام. مثلاً إنشاء نقاط حدِّية اعتمادًا على الوضع الأفقي أو الرأسي للجهاز.

الوضع الرأسي للجوال

@media only screen and (max-device-width : 320px) {

/* هنا تكتب تعليمات CSS */

}

الوضع الأفقي للجوال

@media only screen and (min-device-width : 321px) {

/* هنا تكتب تعليمات CSS */

}

الوضع الرأسي للجهاز اللوحي

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* هنا تكتب تعليمات CSS */
}

الوضع الأفقي للجهاز اللوحي

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* هنا تكتب تعليمات CSS */

}

إنشاء نقاط حدية مخصصة

لماذا ننشئ نقاط حدية مخصصة؟

من المعروف أنه لا يوجد موقعان بُنيا بنفس الشكل. بوضع ذلك في الحسبان، من المنطقي التفكير أن موقعي ويب متجاوبين لا يمكن لتصميمهما المتفاعل الاكتفاء بالكامل باستخدام المعايير القياسية فقط للنقاط الحدِّية الخاصة بهما.

هنا تنبع الحاجة لتحديد أين ومتى يحتاج تصميم موقعك لمزيد من النقاط الحدِّية حتى داخل مجال الاستجابة للنقاط القياسية السابق ذكرها.

كيف تنشئ نقطة حدية مخصصة

يمكن إنشاء نقطة حدِّية مخصصة بسهولة حيث لا يتطلب الأمر سوى معرفة بالتعامل مع استعلامات الوسائط، لكن من السهل هنا ارتكاب الأخطاء وإنشاء نقاط حدِّية عديمة الجدوى.

لنفترض مثلًا أن موقعًا مّا يبدو سيئًا عند عرضه بنافذة تبلغ 355 بكسل. لإصلاح الخلل قد يقوم المطور بكتابة استعلام كهذا:

@media only screen and (max-device-width : 355px){

/* CSS هنا تكتب تعليمات */

}

مشكلة الاستعلام أعلاه أنه يحل مشكلة عرض محتوى الصفحة عند أجهزة عرضها 355 بكسل، لكنه يسبب مشاكل للأجهزة ذات عرض أقل من 355 بكسل.

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

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

@media only screen and (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) {

/* هنا تكتب تعليمات CSS */

}

هل يجب الاعتماد في النقاط الحدية على نوع الجهاز أم مخطط الصفحة؟

تخيل الوضع التالي، موقع جديد متفاعل يبدو رائعًا على جميع مقاسات شاشات الأجهزة الشائعة، لكن لديه مشكلة. عندما يقترب العرض من 400 بكسل تخرج الأمور عن السيطرة.

بما أنه من الصعب إيجاد أجهزة بمقاسات عرض قريبة من تلك النقطة قرر المطور تجاهلها وحسب. هل كان ذلك قرارًا حكيما؟ لا!.

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

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

لم سيجعلك هذا تبدو محترفًا في تصميم المواقع المتجاوبة؟

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

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

ستُترجم المفاهيم العميقة بدورها إلى رؤية أفضل لأعمالك من قبل عملائك وتمنحك أساسًا أقوى لبدء التفاوض معهم.

كيف تخصص نقطة حدية مثالية؟

أولاً: تأكد من تثبيت إضافة المتصفح المناسبة

إضافات مثل Resize Window لمتصفح كروم مناسبة لمهام كالتي ذكرناها، لأنها ستظهر أبعاد النافذة الحالية أسفل يمين الشاشة عندما تغيّر قياس النافذة.

ثانيًا: تأمّل في القيم بين النقاط الحدِّية الحسيّة

هنا ستبحث عن قيم العرض - بالبكسلات - التي يختل عندها تصميم الموقع مستعملًا إضافة مثل Resize Window. عليك تغيير قيمة عرض نافذة المتصفح تصغيرًا وتكبيرًا لإيجاد مجالات العرض التي تظهر بها مشاكل التصميم وتوثيقها حتى لو تطلب ذلك فحص كل حجم العرض بكسلًا تلو الآخر.

ثالثًا: أنشئ استعلامات الوسائط بنفسك

استعمل ببساطة أبعاد العرض التى سجلتها سابقًا لكتابة استعلامات وسائط شبيهة بالمُدرجة أعلاه وستكون قد انتهيت!

ماذا اغتنمت

1. النقاط الحدِّية هي حيث يصل عرض نافذة موقعك لمقاس معين لينتقل إلى تصميم متناسب مع ذلك العرض.
2. النقاط الحدِّية القياسية هي الخاصة بالجوال والجهاز اللوحي بالإضافة إلى اختلاف اتجاه عرضهما.
3. من المهم دائمًا اختبار موقعك على أبعاد غير معتادة لتعزيز تماسك موقعك وتجربة الزوار.
4. تأكد أن النقاط الحدِّية المخصصة لا تتعارض مع النقاط القياسية.
5. التصميم المتفاعل هو محاولة للتحضير للمستقبل، لذا فإن قضاء وقت طويل في التركيز على الأجهزة الحالية ليست ممارسة جيدة.
6. الحرص على جودة التصميم باختلاف أبعاد العرض سيجعلك تبدو محترفًا بالنسبة للعملاء.

ترجمة - وبتصرّف - للمقال The Ultimate Overview of Responsive Web Design Breakpoints من إعداد فريق موقع 1stwebdesigner.