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

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

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

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

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

التصميم المتجاوب والتصميم التكيّفي

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

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

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

وللمواقع المصممة باستخدام «دليل تصميم المواقع الإلكترونية»، فينصَح بوضع الأولوية للتصميم المتجاوب قبل التكيّفي، ولكن يمكن الأخذ في الاعتبار التصميم التكيُّفي إذا احتجت إلى تصميمات لأجهزة محددة عند بناء منتجك أو تطبيقك.

أساليب التصميم المتجاوب

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

يشجع نظام التصميم باستخدام أي من هذه الطرق، حيث صمِّمت جميع المكونات لتتجاوب مع استعلامات الوسائط في CSS وتمكّن من عمل تغييرات في الحجم والخط وغيرها.

ويستند نظام التصميم على TailwindCSS المُختص بتصميم واجهات المستخدم التي تعطي الأولوية للأجهزة المتنقلة، وننصح هنا بالتعرف أكثر على كيفية إدارة المخططات باستخدام Tailwind CSS لضمان تناسق تجربة المستخدم عبر الأجهزة المختلفة.

إرشادات التصميم المتجاوب للمصممين

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

• على المصمم الإلمام بمخططات الصفحات عن طريق الفهم والتخطيط للفواصل بمساعدة فريق التطوير.
• على المصمم أن يقرر إذا كان المخطط سيكون مستقلًا أم مرنًا لكل قسم من الأقسام أو بمعنى آخر أن يقرر إذا كان سيضع الموقع بأكمله داخل حاوية واحدة بعرض واحد أو أن تتباين أقسام الموقع في العرض.
   
  مثال: قد تصمم لشاشة بحجم 1536 بكسل، حيث تبلغ درجة دقة الفاصلة بها 1480 بكسل. وكمصممٍ، فعليك أن تقرر بهذه المرحلة إذا كنت تريد الصورة الرئيسية لموقعك أن تمتد لأعرض من 1480 بكسل وتصل إلى طرفيّ الشاشة، حيث تقوم عندها بتصميم الشريط أو الصورة الرئيسية بدرجة دقة 1536 بكسل وتحدد جميع الأقسام الأخرى بالموقع بحيث لا تزيد على 1480 بكسل.
• على المصمم أو مصنّف/منسّق المعلومات تصميم خريطة الموقع ووضع جميع القوالب المختلفة للمخططات أولًا ثم تحديد المكونات المشتركة بكل قالب.
• بعد ترتيب البيانات بالموقع، على الفريق أن يستخدم التصميمات السلكية الأولية بأقسام تعكس بنية كل قالب.
• وأخيرًا، على المصمم أن يتبنى مذهب وضع الأولوية للأجهزة المتنقلة عن طريق تصميم مخططات الصفحات للقوالب باستخدام الآتي:
  1. واجهة الهاتف المحمول
  2. واجهة الجهاز اللوحي بمعدل دقة 740 بكسل على شاشة بحجم 768 بكسل (اختياري)
  3. واجهة شاشة الكمبيوتر المكتبي بمعدل دقة 1280 بكسل على شاشة بحجم 1366 بكسل (اختياري)
  4. واجهة شاشة الكمبيوتر المكتبي بمعدل دقة 1480 بكسل على شاشة بحجم 1536 بكسل
• استخدم محتوى له علاقة بالسياق، ولذلك، ينصَح المصمم باستخدام محتوى نصي حقيقي ليتمكن من تصور الشكل النهائي له
  1. قد لا يتوفر لديك دائمًا محتوى حقيقي، ويجب عندها السعي للحصول على معلومات أكثر من الجهة عن مدى أهمية تعلق المحتوى بالسياق.
      
     على سبيل المثال، يمكن للمصمم أن يسأل أسئلة مثل «ما متوسط عدد الكلمات المتوقع إضافتها لهذه الصفحة؟» أو «هل سيتم إضافة فقرة قصيرة لوصف خبر؟»
  2. يلعب المحتوى دورًا مهمًا في التصميم، حيث يشترط على المصمم اتباع إرشادات المحتوى عند العمل على تصميمات الصفحات.
  3. علي المصمم دائمًا الانتباه إلى مجموعات الخطوط المتجاوبة ومدى استجابة المحتوى النصي بالأجهزة المختلفة.
      
     مثال: قد يتكون الوصف الموجز ببطاقة الأخبار من ثلاثة صفوف على شاشة كبيرة لكمبيوتر مكتبي، ويكون متناسقًا مع التصميم الكلي، ولكن إذا فتحت الصفحة ذاتها على كمبيوتر مكتبي آخر بشاشة أصغر، قد يزيد عدد الأسطر من ثلاثة إلى خمسة، مما ينتج عنه زيادة في ارتفاع البطاقة ويؤثر بالسلب على التصميم الكلي.
• صمَّم موقعك ليدعم اللغات المتعددة لأن دورك كمصمم يحتّم عليك معرفة أن كل موقع تابع لدولة الإمارات العربية المتحدة يجب أن يدعم صيغة النصوص من اليسار إلى اليمين ومن اليمين إلى اليسار.

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

إرشادات التصميم المتجاوب للمطورين

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

• ابدأ بإضافة فئات CSS والكود لشاشة بحجم الهاتف المحمول، مع تطبيق مذهب إعطاء الأولوية للأجهزة المتنقلة، ثم الانتقال إلى أحجام الشاشات بدلًا من البدء بها.
   
  مثال: إذا كانت الأحرف على هاتف محمول بحجم 16 بكسل وكان المصمم قد وضع بالفعل تصورًا للأحرف بحجم 18 أو 19 بكسل للشاشات الكبيرة، فيجب عندها البدء باختيار 16 بكسل كحجم للأحرف ثم تغيير حجمها في استعلامات الوسائط التي تطبّق على الشاشات الكبيرة وليس العكس. ويطبّق ذلك أيضًا على الهوامش الأساسية والداخلية وارتفاع السطر وحجم الصورة وما إلى ذلك.
• لا تعتمد أبدًا على تصفح المستخدم لموقعك من متصفح بحجم شاشة الجهاز لأنه قد يستخدمه بحجم صغير.
• يلعب Javascript دورًا مهمًا في تفاعل المستخدم على المواقع، ولذلك يجب أن تأخذ في الاعتبار دائمًا نتائج كود الـJavaScript الخاص بك على مختلف أحجام الشاشات.
• استخدم CSS فقط لعمل التغييرات بواجهة المستخدم، وإذا ظهرت الحاجة لعمل أي تغييرات أو إضافات على أي جهاز، فيمكنك عندها استخدام فئات CSS الأنسب لعمل التغييرات بواجهة المستخدم.
   
  مثال: قد ترغب في إضافة فئة بمسمى .mobile إلى عنصر على الموقع عند رصد مستخدمٍ يتصفح من هاتفه المحمول، حيث بإمكانك عندئذ تطبيق التأثير المتتالي لبرجمتها بحيث تؤدي إلى حدوث تغيرات بواجهة المستخدم كإخفاء أي قسم بالموقع أو إظهاره للمستخدم.
• استخدم المساحات الحاوية لكل قسم على حدا، وينصح باعتبار كل قالب صفحة وكأنه مجموعة من المساحات الحاوية بدلًا من تطبيق حاوية واحدة للصفحة بأكملها.
• احرص على اختبار الأحجام المختلفة للشاشات والإطارات واستخدام أدوات تمكّنك من قياس واجهة المستخدم على الوضع الأفقي أو الرأسي للهاتف المحمول، وخاصية inspector بمتصفح Chrome لمحاكاة واجهة الجهاز وتأكد من التغيير إلى الوضعين الأفقي والرأسي. ويمكنك أيضًا إضافة استعلامات الوسائط بكود CSS والتي تستهدف اتجاه الصفحة.
• اختر متصفحات متعددة لاختبار مدى توافق كل منها مع CSS وأضف إما Polyfill أو عدّل في كود CSS لإضافة مساحة للتراجع التدريجي بواجهة المستخدم.
  1. ناقش مع الإدارة أكثر المتصفحات توافقًا وإصدارات المتصفحات التي تحتاج إلى الدعم مستخدمًا أدلة تحليلية.
  2. استخدم إشعارات تحديثات المتصفح للمتصفحات القديمة جدًا التي لا يدعمها نظام التصميم.

يحتم عليك دورك كمطور معرفة وجوب دعم واجهات مواقع دولة الإمارات العربية المتحدة للصيغ التي تقرأ من اليمين إلى اليسار ومن اليسار إلى اليمين. وينصح نظام التصميم بإضافة صيغتيّ <body direction=”ltr”> و <body direction=”rtl”> للتحكم في العناصر بالواجهات لكلا الاتجاهين وأن يحتوي كود CSS على اتجاه الخط والهوامش الخارجية والداخلية واتجاهات الأيقونات عند تصميم الواجهات.

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