التصميم المتجاوب: موقع يعمل بسلاسة على كل الشاشات

 

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

ما المبادئ الأساسية للتصميم المتجاوب؟

التجاوب ليس حيلة واحدة بل مجموعة مبادئ تعمل معًا. وإذا فهمتها صار تطبيقها أسهل بكثير:

• وسم viewport: بدونه تعرض كثير من متصفحات الجوال الصفحة كأنها على شاشة حاسب كبيرة ثم تصغرها. فأضفه في head لتخبر المتصفح أن عرض الصفحة يساوي عرض الجهاز.

• التخطيط المرن: استعمل نسبًا ووحدات مرنة بدل عرض ثابت بالبكسل، فتتمدد العناصر وتنكمش بحسب المتاح.

• الصور المرنة: اجعل الصور لا تتجاوز عرض حاويتها، فلا تفيض خارج الشاشة.

• استعلامات الوسائط: تتيح تطبيق قواعد CSS مختلفة بحسب خصائص الجهاز، كعرض الشاشة. وبها تغير التخطيط عند نقاط معينة.

• المحتوى أولًا: قرر نقاط التحول بحسب حاجة المحتوى لا بحسب أجهزة بعينها، فالأجهزة كثيرة ومتجددة.

• اللمس لا الفأرة: الجوال يعتمد على اللمس، فصمم عناصر تفاعل كبيرة بما يكفي للأصابع.

• الأداء جزء من التجاوب: مستخدم الجوال قد يكون على شبكة أضعف، فالموقع الثقيل لا يعد متجاوبًا فعليًا حتى لو تكيف مظهره.

من أين تبدأ: الجوال أولًا؟

من أنفع القرارات أن تبدأ التصميم من أصغر شاشة ثم تتدرج إلى الأكبر، وهو نهج يسمى «الجوال أولًا»:

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

• ثم توسع بالاستعلامات: استعمل استعلامات من نوع «عرض أدنى» لإضافة تحسينات عند الشاشات الأوسع، كتحويل عمود واحد إلى عمودين أو ثلاثة.

• فوائده: يجبرك على ترتيب الأولويات، فما يناسب الشاشة الصغيرة هو الأهم. كما يعطي كودًا أبسط، لأن الجوال يحمل القواعد الأساسية فقط.

• الأداء: الأجهزة الأضعف لا تحمل قواعد الشاشات الكبيرة التي لا تحتاجها.

• متى تبدأ من الحاسب؟ لتطبيقات مكتبية معقدة تستعمل غالبًا على شاشات كبيرة، قد تقرر العكس. لكن لمعظم المواقع العامة الجوال أولًا خيار قوي.

• لا تحذف المحتوى على الجوال: إخفاء محتوى مهم عن مستخدمي الجوال تجربة سيئة، والأفضل إعادة تنظيمه.

• ارسم قبل أن تكتب: رسم تقريبي على الورق لكل حجم يوضح لك ما سيتغير ويوفر وقتًا في التعديل.

ما أدوات CSS التي تحقق التجاوب؟

تطورت أدوات CSS حتى صار التجاوب أسهل. وهذه أهم الأدوات التي ستعتمد عليها:

• الوحدات النسبية: النسبة المئوية، وrem وem للخطوط والمسافات، ووحدات إطار العرض مثل vw وvh. وهي تتكيف تلقائيًا بدل أن تثبت.

• الحد الأدنى والأقصى: max-width وmin-width تضعان حدودًا، فتمنع النص من التمدد المفرط على الشاشات العريضة، وتمنع الانكماش المفرط على الصغيرة.

• Flexbox: مع خاصية الالتفاف تنزل العناصر إلى السطر التالي حين لا تتسع، فتتجاوب دون استعلامات كثيرة.

• Grid: مع تعريف أعمدة تتكيف بحسب المساحة، فيتغير عدد الأعمدة وحده، وهي مناسبة للبطاقات والمعارض.

• الدالة clamp: تحدد قيمة لها حد أدنى وأقصى وقيمة مفضلة بينهما، وهي مفيدة لأحجام الخطوط والمسافات المرنة.

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

• استعلامات الحاويات: ميزة أحدث تسمح بتغيير شكل مكون بحسب حجم حاويته لا الشاشة، وتفيد في المكونات القابلة لإعادة الاستخدام. تحقق من دعم المتصفحات لها قبل الاعتماد الكامل عليها.

• اتجاه الكتابة: للعربية استعمل الخصائص المنطقية بدل اليمين واليسار لتتكيف الواجهة مع اتجاه اللغة.

كيف تتعامل مع الصور والخطوط والنصوص؟

كثير من مشكلات التجاوب تأتي من الوسائط والنصوص أكثر من التخطيط نفسه:

• صور لا تفيض: اجعل عرض الصورة لا يتجاوز حاويتها واحتفظ بنسبة أبعادها، وحدد الأبعاد في الصفحة لتجنب قفز المحتوى أثناء التحميل.

• صور متعددة الأحجام: استعمل خصائص srcset وsizes ليحمل الجوال نسخة أصغر، فيوفر بيانات وزمنًا. ويتيح عنصر picture اختيار صيغ أو صور مختلفة بحسب الحالة.

• الصيغ الحديثة: صيغ مثل WebP وAVIF تعطي حجمًا أقل لجودة مماثلة غالبًا، مع مراعاة دعم المتصفحات وتوفير بدائل.

• التحميل الكسول: أجّل تحميل الصور غير الظاهرة حتى يقترب الزائر منها، فتسرع الصفحة الأولى.

• أحجام الخط: اجعلها مريحة للقراءة على الجوال، وتجنب النصوص الدقيقة جدًا. واستعمل وحدات نسبية لتحترم تفضيلات المستخدم.

• طول السطر: السطور الطويلة جدًا تتعب العين على الشاشات العريضة، فحدد عرضًا أقصى معقولًا للنصوص.

• الخطوط العربية: اختر خطًا واضحًا يدعم العربية جيدًا بأوزان مناسبة، وانتبه لحجم ملفات الخطوط لأنها تؤثر في التحميل.

• الفيديو والمضمنات: اجعلها تحافظ على نسبة العرض إلى الارتفاع وتتكيف مع الحاوية.

كيف تختبر تجاوب موقعك؟

لا تكتفِ بتصغير نافذة المتصفح على حاسبك، فالواقع أغنى من ذلك. واجمع بين الأساليب:

• وضع الأجهزة في أدوات المطور: يحاكي أحجام شاشات مختلفة واتجاهها. وهو سريع وممتاز للتطوير اليومي.

• جهاز حقيقي: جرّب على هاتف فعلي، فالمحاكاة لا تنقل تمامًا اللمس والأداء ولوحة المفاتيح الظاهرة وسلوك التمرير.

• أكثر من متصفح: اختبر على المتصفحات الرئيسة، فبعض الخصائص تعمل بشكل مختلف قليلًا.

• أنماط الاستعمال: جرّب الوضعين الرأسي والأفقي، والتكبير، وتفضيل الخط الأكبر في إعدادات الجهاز.

• اختبر على شبكة بطيئة: أدوات المطور تتيح محاكاة اتصال أبطأ، لترى تجربة من لا يملك شبكة قوية.

• قوائم التحقق: هل يوجد تمرير أفقي غير مقصود؟ هل الأزرار كبيرة بما يكفي للمس؟ هل النص مقروء؟ هل تعمل القوائم على اللمس؟

• اسأل مستخدمين حقيقيين: شاهد شخصًا يستعمل موقعك على جواله بلا توجيه، وستكتشف ما لا تراه.

• راقب البيانات: أدوات التحليل تخبرك بأحجام شاشات زوارك فعلًا، فتركز اختباراتك عليها.

ما الأخطاء الشائعة في التصميم المتجاوب؟

بعض الأخطاء تتكرر في كثير من المواقع. وتجنبها يوفر عليك وقت التعديل:

• نسيان وسم viewport: يجعل كل قواعد التجاوب بلا أثر على كثير من الهواتف.

• عرض ثابت لعنصر واحد: صورة أو جدول أو كتلة كود بعرض ثابت قد تكسر الصفحة كلها على الجوال.

• نقاط تحول مبنية على أجهزة محددة: الأجهزة تتغير باستمرار. اختر النقاط بحسب متى ينكسر تخطيطك.

• أزرار صغيرة متقاربة: يصعب لمسها فتحدث نقرات خاطئة. اجعل مساحة اللمس مريحة وبينها مسافات.

• الاعتماد على التمرير فوق العناصر: تأثيرات تحدث عند مرور الفأرة لا تعمل باللمس، فلا تجعل معلومة أساسية تظهر بها.

• الجداول العريضة: تحتاج معالجة خاصة، كتمرير أفقي داخل حاويتها أو إعادة عرضها كبطاقات على الجوال.

• تجاهل الأداء: صور ضخمة وسكربتات كثيرة تجعل التجاوب الظاهري بلا قيمة. ولمقال الأداء تفصيل أكبر.

• إخفاء المحتوى بدل تنظيمه: يؤدي إلى اختلاف تجربة الجوال عن الحاسب بشكل مزعج.

أسئلة شائعة عن التصميم المتجاوب

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

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

هل تكفي مكتبة جاهزة للتجاوب؟

تساعد وتوفر وقتًا، لكن فهم المبادئ يمكّنك من معالجة ما لا تغطيه المكتبة، ومن تجنب كود زائد.

كم نقطة تحول أحتاج؟

أقل ما يمكن. ابدأ بتخطيط مرن يتكيف تلقائيًا، وأضف نقاط تحول فقط حيث ينكسر التصميم فعلًا.