فى ايامنا هذه بعد انتشار اجهزة الموبيل والتابلت الى كل شخص فى العالم تقريبًا اصبح تصميم موقع متجاوب ويظهر على هذه الاجهزة بصورة سليمة امر ضرورى وبدلًا من تصميم نسخة موقع لكل جهاز ظهرت فكرة Responsive Design
محتوي المقال
اذا فما هو التصميم المتجاوب Responsive Web Design
ببساطة هو عملية استجابة الموقع الخاصة بك من سلوك وشكل إلى التغير فى مقاس الشاشة الذى يعرضه او الدوران orientation للموبيل و التابلت بمعنى اخر فنفس تصميم الموقع يظهر بصورة مناسبة على كل جهاز سواء كمبيوتر مكتبى او لابتوب او تبلت او موبيل
عن طريق استخدام HTML و CSS و بعض Jquery لاعادة تحجيم او تكبيراو تحريك او حتى اخفاء المحتوي او جزء منه لجعله المحتوي يظهر بشكل جيد على اي شاشة عرض
والسؤال الان لماذا التصميم المتجاوب Responsive Web Design بهذه الاهمية ؟
بدلًا تصميم موقع خاص بكل جهاز معروف وهذا غير ان شبه مستحيل ومكلف وصعب الصيانة وكذلك عند صدور اجهزة جديدة بمقاسات جديدة فما العمل !
فكان التصميم المتجاوب هو الحل الامثل لهذه المشكلة ولتوضيح اهميته انظر النسبة الاتيه لاستخدام المواقع من قبل الاجهزة المختلفة
كما هو واضح فان للموبيل نصيب كبير فى الدخول على المواقع فعدد الموبيلات على 2.6 مليار موبيل فلا يمكن ببساطة اهمل كل هذه الاعداد واضاعة هذه الفرص لانجاح الموقع والوصول اليه الى قدر اكبر من الناس ما المقاسات التى نصمم عليها ؟
فى الحقيقة لا يوجد مقاسات قياسية وثابتة فبالطبع هناك الكثير والكثير من احجام الموبيلات والتابلت و الموضوع فى توسع ولكن هناك مقاسات شهيرة يمكن العمل عليها
مقاسات اساسية
- Small : اقل من 600 بكسل وسوف يعمل الموقع على معظم الموبيلات بشكل صحيح
- medium : بين 600 الى 900 بكسل وسوف يعمل الموقع معظم انواع التابلت بشكل صحيح
- large : فوق 900 بكسل وسوف يعمل على اجهزة الكمبيوتر بشكل صحيح
مكونات الصفحة فى جميع المقاسات هى نفسها ولكن اعادة تجحيم وترتيب العناصر بما يتناسب مع شاشة العرض
الادوات لتنفيذ هذه المهمة
- متصفحك قم بتجريب تصميمك على اكثر من متصفح وقم باعادة تحجيم المتصفح لرؤية المقاسات المختلفة وهذه الاضافة على متصفح جوجل كروم تساعدك فى هذه المهمة هنا بتحديد مقاسات شهيرة لانواع مختلفة من الاجهزة المكتبية والموبيل والتابلت و هذا الموقع مفيد ايضًا
- جهاز الموبيل اداة مهمة اخرى لتجريب التصميم عليها فهى الاكثر دقة
- Fluid Grid وهو اسلوب قائم على التصميم فى CSS عن طريق النسب المئوية وليس عن طريق البكسل فعلى سبيل المثال عرض المحتوي على شاشة الكمبيوتر هو 930 بكسل ولكنك تريد تخفيضه عرضه على الموبيل إلى 320 بكسل لتحويل هذا إلى نسبة مئوية 320/930 = 34.4% بالتالى نقوم بضبط المقاس إلى 34.4 % على الموبيل بالتالى بغض النظر عن مقاس الموبيل ستكون نسبة العنصر 34.4 %
- Media Queries الكود السحرى فى هذه CSS فيمكن به ان تخبر المتصفح التالى : عندما يكون مقاس الشاشة اقل من او يساوى 480 : غيرشكل التصميم إلى التابلت (بما يتضمنه هذا من اكواد CSS من تجحيم لعناصر وحذف عناصر واعادة ترتيب عناصر) وعند تجريب الكود على المتصفح سيقوم بعض شكل معين للتصميم وعند تغير مقاس الشاشة يعرض شكل اخر للتصميم على حسب الكود
اشياء اخرى عليك وضعها فى الحسبان
- التصميم المتجاوب ليس تحويل شكل الموقع من الكمبيوتر إلى الموبيل فقط ولكن عليك وضع تجربة المستخدم فى الاعتبار وتفاعل الموقع مع مستخدم الموبيل يختلف عن تفاعل الموقع مع مستخدم الكمبيوتر
- التصميم على الموبيل يتطلب تضيق فى المسافات و الفواصل لان مقاس الموبيل صغير بطبيعة الحال عن الكمبيوتر فعليك مرعاة هذه النقطة وتقليل padding و margin عن تصغير الشاشة
- تجاوب الصورايضًا شئ مهم فعليك التفكير فى كيف ستظهر حجم الصورة على الكمبيوتر الكبير وكيف ستكون على الموبيل فيجب ان تكون الصورة مرنة فى الجحم ويمكن ذلك عن طريق النسبة المئوية
- قائمة navbar ويوجد اشكال متعددة لشكل القائمة فى الموبيل واشهرهم فى الصورة التالية
اطر العمل
يوجد الكثير من اطر العمل التى تسهل عملية بناء تصميم متجاوب ولعل اشهرها هو Bootstrap يمكنك الاصلاع على درس كامل لشرح Bootstrap هنا
واخيرًا تذكر دائمًا ان اهم شئ هو تجربة المستخدم UX ويمكنك فهم العملية بوضع نفسك دائمًا مكان مستخدم الموقع
