ما هو التصميم المتجاوب Responsive Design, وما أهميته في 2022

مع إنتشار الهواتف الذكية حول العالم أصبح الطلب على المواقع ذات التصميم المتجاوب Responsive Design مع حجم هذه الشاشات الصغيرة في تزايد مستمر، ولهذا تم دعم خواص التصميم المتجاوب في لغة التصميم CSS حتى يتم تهيئة المواقع مع جميع الأحجام المختلفة من الشاشات.

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

ما هو التصميم المتجاوب Responsive Design

التصميم المتجاوب هو ترجمة للمصطلح الإنجليزي Responsive Design، وهو أسلوب يتم إتباعه من قبل المصممين اثناء تصميم أي موقع، بحيث يتم تهيئة الموقع للعرض المناسب على مختلف الأحجام من الشاشات.

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

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

إقرأ أيضاً: ما هو البوتستراب Bootstrap، وما هي أهميته واستخداماته

مميزات التصميم المتجاوب

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

سنستعرض أهم مميزات التصميم المتجاوب في النقاط الآتية:

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

مقاسات الشاشات المتفق عليها

لا يوجد مقاسات مثبته يجب أن تتبعها ولا يمكنك الحياد عنها، هذا ليس بصحيح لأن تحديد المقاسات يعتمد عليك أثناء التصميم، ولكن يوجد مقاسات عامة يمكنك الرجوع إليها إذا أردت.

• الشاشات الصغيرة Small: وهي الأحجام التي تقل عن 600px ويتناسب هذا الحجم مع جميع الهواتف الذكية.
• الشاشات المتوسطة Medium: يتراوح من بين 600 إلى 900 وهي جميع الشاشات المتوسطة مثل الأجهزة اللوحية (التابلت) وشاشات الكمبيوتر الصغيرة.
• الشاشات الكبيرة Large: من 900 فيما فوق لكي يناسب الشاشات الكبيرة جميعها.

 

إقرأ أيضاً: ما هي لغة ال CSS – كل ما تحتاج معرفته وأكثر

 

 

الأدوات المستخدمة في التصميم المتجاوب

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

• Media Queries: هي أكواد CSS يتم إعطاؤها إلى المتصفح بمقاسات محددة مثل المذكورة في الأعلى من أجل تحديد حجم الشاشة ليتلائم مع المتصفح.
• Grid و Flex box: هي مزايا في لغة ال CSS يمكن استخدامها أيضاً لتوزيع العناصر بطرق مختلفة على حسب حجم الشاشة التي يفتح المستخدم من خلالها.
• إخفاء وإظهار عناصر من الصفحة: هذه الطريقة قد يلجأ إليها البعض عندما يكون الخيار الأفضل هو إزالة عنصر موجود في تصميم الشاشات الكبيرة، لأنه لا يتناسب مع الحجم الصغير من الشاشات.
• المتصفح: سوف تحتاج إلى المتصفح حتى تستطيع تجربة الكود والتصميم فإنه يتم التجربة على أكثر من متصفح، لاكتشاف الأخطاء إن وجدت.
• الهاتف المحمول (الموبايل): لابد من تجربة الموقع على الهاتف المحمول حتى تستطيع اصلاح أي أخطاء في التصميم قبل نشر وإطلاق الموقع.

مصادر التعلم والتطبيق

1- دورة شاملة من عدة دروس لتصميم موقع متجاوب من الصفر على قناة الزيرو ويب سكول

إذهب إلى الكورس من هنا

2- كورس 4 ساعات من قناة Freecodecamp

إذهب إلى الكورس من هنا

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