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

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

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

 

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

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

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

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

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

 

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

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

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

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

 

كيف يعمل التصميم المتجاوب؟

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

1. الشبكات النسبية (Fluid Grids):

– تعتمد الشبكات النسبية أو الشبكات السائلة على تقسيم الصفحة إلى أعمدة وخلايا ذات نسب مئوية بدلاً من وحدات قياس ثابتة مثل البيكسل Pixel.

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

– مثال: إذا كان العنصر يشغل 50% من الشاشة، فإنه يظل بنفس النسبة بغض النظر عن حجم الجهاز.

2. الصور المرنة (Flexible Images):

– الصور المرنة تُصمم بحيث تتكيف مع حجم الحاوية التي تُعرض بداخلها دون فقدان جودتها.

– تُحدد الصور باستخدام CSS مع خصائص مثل:

– `max-width: 100%;`  

– `height: auto;`  

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

3. استعلامات الوسائط (Media Queries):

– تُستخدم استعلامات الوسائط في CSS لتطبيق أنماط تصميم محددة بناءً على خصائص الجهاز، مثل:

– عرض وارتفاع الشاشة.

– دقة الشاشة.

– اتجاه العرض (أفقي أو عمودي).

– تتيح استعلامات الوسائط تخصيص التصميم لعروض شاشات مختلفة.

– مثال عملي:

} (max-width: 768px) media@
} body
;font-size: 14px
{
{

– في المثال أعلاه، يتم تقليل حجم النص على الشاشات الصغيرة التي عرضها أقل من 768 بكسل.

كيف تكمل هذه العناصر بعضها البعض؟

1. الشبكات النسبية تنظم المحتوى على الصفحة بشكل ديناميكي.

2. الصور المرنة تضمن عرض الصور بشكل صحيح دون تجاوز الأبعاد.

3. استعلامات الوسائط تضيف مستوى إضافيًا من التخصيص لتلبية متطلبات الشاشات المختلفة.

النتيجة:

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

 

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

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

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

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

 

 

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

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

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

 

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

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

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

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

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

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