التصميم المتجاوب Responsive Design
في أيامنا هذه بعد إنتشار أجهزة الموبايل و التابلت في جميع الأحجام و إلى كل شخص فى العالم أصبح تصميم موقع متجاوب (Responsive Design) ليظهَر على جميع هذه الأجهزة (أجهزة الكمبيوتر المكتبية و الأجهزة اللوحية والهواتف) بصورة سليمة أمر ضروري و بدلاً من تصميم نسخة لكل جهاز ظهرت فكرة Responsive Design.
يُطلق عليه تصميم متجاوب Responsive Web Design سريع الإستجابة عند إستخدام CSS و HTML لتغيير حجم المحتوى أو إخفائه أو تقليصه أو تكبيرهُ أو نقله لجعله يبدو جيداً على أي شاشة.
ما أهمية التصميم المتجاوب Responsive Design
بدلاً تصميم موقع خاص بكل جهاز و هذا غير أن شبه مٌستحيل و مُكلِف و صعب الصيانة و كذلك نحن في تطور تام, كل يوم إختراع جديد و صدور أجهزة بمختلف الأحجام فمن الصعب عمل لكل جهاز تصميم خاص به, فكان التصميم المتجاوب Responsive web design هو الحل الأمثل لهذه المشكلة.
تكمُن أهمية التصميم المتجاوب بـ
1- ضمان حصول أي مُستخدم على أي جهاز على أفضل تجربة ممكنة على موقع الويب الخاص بك و الأكثر إتساقاً.
2- طريقة رائعة لتحسين المحتوى على موقعك و التأكد من أن الأشخاص الذين يستخدمون جهازاً محمولاً لا يرون سوى المعلومات الأساسية.
3- توفير الوقت, من المؤكد أن تصميم موقع الكتروني واحد يساهم في توفير الوقت فليس هناك داعي للقيام بخطوات تصميم موقع إلكتروني جديد في كل مرة يتم فيها إطلاق جهاز جديد و لا إلى القيام بعقد الكثير من اللقاءات.
محددات التصميم المتجاوب
من المُهم فهم أن التصميم المتجاوب له مُحددات حيث أن المواقع ذات الجودة العالية و الأداء السريع تحتاج إلى تصاميم بسيطة و صغيرة لذلك، فإن الرسومات كبيرة الحجم، الخلفيات المعقدة، حجم الخطوط التنوع، و رسومات الفلاش المتحركة تعمل على التقليل من سرعة الأداء, لذلك فإننا نعمل على تجهيز تصاميم بسيطة لتحقيق أداء أسرع و ملائم لأجهزة المستخدمين.
المقاسات الأساسية التي نعمل عليها في التصميم المتجاوب
1 - مقاس صغير small: أقل من 600 بكسل و سوف يعمل الموقع على معظم الموبايلات.
2 - مقاس متوسط medium: بين 600 إلى 900 بكسل و سوف يعمل الموقع على معظم أنواع التابلت بشكل صحيح.
3 - مقاس كبير larg: و 900 بكسل سوف يعمل على أجهزة الكمبيوتر بشكل صحيح.
من المهم معرفه أن مكونات الصفحة فى جميع المقاسات هي نفسها و لكن يتم إعادة تحجيم و ترتيب العناصر بما يتناسب مع شاشة العرض.
من الأدوات المهمه لتنفيذ تصميم المتجاوب
ا Media Queries الكود في CSS فيمكن من خلاله أن تُخبر المتصفح عندما يكون مقاس الشاشة اكبر من أو يساوى 600 غيّر شكل التصميم إلى التابلت (بما يتضمنه هذا من اكواد CSS من تجحيم لعناصر و حذف عناصر و إعادة ترتيب عناصر) و عند تجريب الكود على المتصفح سيقوم بعرض شكل معين للتصميم و عند تغير مقاس الشاشة يعرض شكل آخر للتصميم على حسب الكود.
مثال
إذا كانت نافذة المتصفح 600 بيكسل أو اصغر فسيكون لون الخلفية أزرق فاتح
طرق عمل Responsive Design
1 - mobile first.
2 - computer first.
من الأفضل إستخدام الطريقة الأولى بسبب إستخدام جهاز المحمول اكثر من جهاز الكمبيوتر, يعني أن غالبية الأشخاص يستخدمون هواتفهم للعثور على المحتوى الذي يحتاجون إليه, هناك حاجة كبيرة إلى مواقع الويب المتوافقة مع الجوّال و لذا فإن مهمتك هي توفيرها للمستخدمين.
صمم دائمًا للجوال أولاً يعني Mobile First التصميم للجوال قبل التصميم لسطح المكتب أو أي جهاز آخر (سيؤدي ذلك إلى جعل الصفحة تُعرَض بشكل أسرع على الأجهزة الأصغر), هذا يعني أنه يجب علينا إجراء بعض التعديلات في CSS الخاص بنا.
بدلاً من تغيير الأنماط عندما يقل العرض عن 600 بكسل يجب علينا تغيير التصميم عندما يُصبح العرض أكبر من 600 بكسل هذا سيجعل تصميمنا Mobile First.
إخفاء بعض العناصر بإستخدام Media Queries
عند الإنتقال من عرض على شاشة كمبيوتر إلى شاشه الهاتف المحمول (إخفاء العناصر الموجودة على أحجام الشاشات المختلفة).
تغيير حجم الخط باستخدام Media Queries
يمكنك أيضاً إستخدام إستعلامات الوسائط لتغيير حجم خط عنصر على أحجام شاشات مختلفة
