تصميم مواقع الويب المتجاوب

لقطة شاشة لموقع ويكيبيديا بتصميم Vector 2022 المتجاوب ، على شاشة كمبيوتر (يسار) وعلى شاشة هاتف محمول (يمين). تُعيد العناصر ترتيب نفسها تلقائيًا لتصميم أكثر ملاءمة للأجهزة المحمولة.

التصميم المتجاوب للمواقع الإلكترونية ( RWD ) أو التصميم المتجاوب هو منهج لتصميم المواقع الإلكترونية يهدف إلى جعل صفحات الويب تُعرض بشكل جيد على مجموعة متنوعة من الأجهزة وأحجام النوافذ أو الشاشات، من أصغر حجم عرض إلى أكبر حجم، لضمان سهولة الاستخدام ورضا المستخدمين. ^{[ 1 ] [ 2 ]}

يقوم التصميم المتجاوب بتكييف تخطيط صفحة الويب مع بيئة العرض ^{[ 1 ]} باستخدام تقنيات مثل الشبكات المرنة القائمة على النسب، ^{[ 3 ] [ 4 ]} والصور المرنة، ^{[ 5 ] [ 6 ]} واستعلامات الوسائط CSS3 ، ^{[ 7 ] [ 8 ] [ 9 ]} وامتداد القاعدة ، ^{[ 10 ]} بالطرق التالية:@media

• يتطلب مفهوم الشبكة المرنة أن تكون أحجام عناصر الصفحة بوحدات نسبية مثل النسب المئوية، بدلاً من الوحدات المطلقة مثل البكسل أو النقاط . ^{[ 4 ]}
• يتم أيضًا تحديد حجم الصور المرنة بوحدات نسبية، وذلك لمنعها من الظهور خارج العنصر الحاوي لها . ^{[ 5 ]}
• تسمح استعلامات الوسائط للصفحة باستخدام قواعد أنماط CSS مختلفة بناءً على خصائص الجهاز الذي يتم عرض الموقع عليه، على سبيل المثال عرض سطح العرض (عرض نافذة المتصفح أو حجم الشاشة الفعلي).
• تتكيف التصميمات المتجاوبة تلقائيًا مع أي حجم شاشة جهاز، سواء كان جهاز كمبيوتر مكتبي أو كمبيوتر محمول أو جهاز لوحي أو هاتف محمول.

ازدادت أهمية تصميم المواقع الإلكترونية المتجاوبة مع ازدياد نسبة مستخدمي الأجهزة المحمولة إلى غالبية زوار المواقع. ^{[ 11 ] [ 12 ]} فعلى سبيل المثال، أعلنت جوجل في عام 2015 عن مبادرة "موبايلغيدون" وبدأت في تحسين ترتيب صفحات المواقع المتوافقة مع الأجهزة المحمولة عند البحث من خلالها. ^{[ 13 ]}

يُعد تصميم المواقع الإلكترونية المتجاوبة مثالاً على مرونة واجهة المستخدم . ^{[ 14 ]}

لخص لوك وروبليوسكي بعض تحديات تصميم المواقع المتجاوبة والمتوافقة مع الأجهزة المحمولة، وأنشأ دليلًا لأنماط تخطيط المواقع متعددة الأجهزة. ^{[ 15 ] [ 16 ] [ 17 ]} وأشار إلى أنه بالمقارنة مع نهج تصميم المواقع المتجاوبة البسيط، فإن نهج تجربة الجهاز أو تصميم المواقع المتجاوبة مع مكونات من جانب الخادم (RESS) يمكن أن يوفر تجربة مستخدم مُحسّنة بشكل أفضل للأجهزة المحمولة. ^{[ 18 ] [ 19 ] [ 20 ]} ويمكن أن يكون تطبيق مولد CSS من جانب الخادم للغات أنماط الصفحات مثل Sass جزءًا من هذا النهج. وقد أوصت جوجل بالتصميم المتجاوب لمواقع الهواتف الذكية على حساب النهج الأخرى. ^{[ 21 ]}

على الرغم من أن العديد من الناشرين قد طبقوا التصميمات المتجاوبة، إلا أن أحد التحديات التي واجهت تبنيها تمثلت في عدم مرونة بعض إعلانات البانر ومقاطع الفيديو. ^{[ 22 ]} ومع ذلك، أصبحت إعلانات البحث وإعلانات العرض (البانر) تدعم استهداف منصات أجهزة محددة وأحجام إعلانات مختلفة لأجهزة سطح المكتب والهواتف الذكية والأجهزة المحمولة الأساسية. وقد استُخدمت عناوين URL مختلفة لصفحات الهبوط لمنصات مختلفة، ^{[ 23 ]} أو استُخدمت تقنية Ajax لعرض متغيرات إعلانية مختلفة على الصفحة. ^{[ 24 ] [ 16 ] [ 25 ]} كما سمحت جداول CSS بتصميمات هجينة ثابتة ومرنة. ^{[ 26 ]}

تعددت طرق التحقق من صحة تصميمات المواقع الإلكترونية المتجاوبة واختبارها، ^{[ 27 ]} بدءًا من أدوات التحقق من مواقع الجوال ومحاكيات الجوال وصولًا إلى أدوات الاختبار المتزامنة مثل Adobe Edge Inspect . ^{[ 28 ]} وقد وفرت متصفحات Chrome وFirefox وSafari وأدوات المطورين أدوات لتغيير حجم نافذة العرض في التصميمات المتجاوبة، وكذلك فعلت جهات خارجية. ^{[ 29 ] [ 30 ]}

نصّت مواصفات W3C للغة HTML+ على ضرورة عرض مواقع الويب وفقًا لتفضيلات المستخدم. ^{[ 31 ]} إلا أن تخصيص تصميم صفحات الويب كان محدودًا. ولذلك، لجأ العديد من مطوري الويب إلى استخدام جداول HTML العادية كوسيلة لتخصيص التصميم وإضافة بعض الاستجابة الأساسية لمواقعهم في الوقت نفسه.

كان موقع Audi.com ، الذي أُطلق في أواخر عام 2001، أول موقع رئيسي يتميز بتصميم يتكيف بشكل ملحوظ مع عرض نافذة المتصفح ، ^{[ 32 ]} وقد أنشأه فريق من شركة Razorfish ضمّ يورغن سبانغل وجيم كالباخ ​​(هندسة المعلومات)، وكين أولينغ (التصميم)، ويان هوفمان (تطوير واجهة المستخدم). ونظرًا لمحدودية إمكانيات المتصفحات، كان بإمكان متصفح إنترنت إكسبلورر تعديل التصميم ديناميكيًا داخل المتصفح، بينما كان على متصفح نتسكيب إعادة تحميل الصفحة من الخادم عند تغيير حجمها.

أنشأ كاميرون آدامز عرضًا توضيحيًا في عام 2004. ^{[ 33 ]} وبحلول عام 2008، شاع استخدام عدد من المصطلحات ذات الصلة، مثل "مرن" و"سائل" ^{[ 34 ] و"مائع" و"مطاطي"، لوصف تصميمات المواقع. وكانت استعلامات الوسائط في CSS3 جاهزة تقريبًا للاستخدام العام في أواخر عام 2008/أوائل عام 2009. [ 35 ]} وقد صاغ إيثان ماركوت مصطلح " تصميم المواقع المتجاوب" ^{[ 36 ]} - وعرّفه بأنه شبكة مرنة/صور مرنة/استعلامات وسائط - في مقال نُشر في مايو 2010 في موقع A List Apart . ^{[ 1 ]} ووصف نظرية وممارسة تصميم المواقع المتجاوب في كتابه الموجز الصادر عام 2011 بعنوان " تصميم المواقع المتجاوب" . وقد صُنّف التصميم المتجاوب في المرتبة الثانية ضمن أهم اتجاهات تصميم المواقع لعام 2012 من قِبل مجلة .net ، بعد أن تصدّر المرتبة الأولى بفضل التحسين التدريجي . ^{[ 37 ]}

أطلق موقع ماشابل على عام 2013 اسم عام تصميم المواقع الإلكترونية المتجاوبة. ^{[ 38 ]}

يُعدّ تصميم المواقع الإلكترونية المتوافقة مع الأجهزة المحمولة أولاً والتحسين التدريجي مفهومين مترابطين يسبقان تصميم المواقع الإلكترونية المتجاوبة. ^{[ 39 ]} لا تدعم متصفحات الهواتف المحمولة الأساسية لغة جافا سكريبت أو استعلامات الوسائط ، لذا كان من الممارسات الموصى بها إنشاء موقع ويب أساسي ثم تحسينه ليتناسب مع الهواتف الذكية وأجهزة الكمبيوتر الشخصية ، بدلاً من الاعتماد على التدهور التدريجي لجعل موقع معقد وغني بالصور يعمل على الهواتف المحمولة. ^{[ 40 ] [ 41 ] [ 42 ] [ 43 ]}

مرونة واجهة المستخدم هي قدرة واجهة المستخدم على تحمل تغيرات كل من الخصائص الفيزيائية للنظام والبيئة مع الحفاظ على سهولة الاستخدام . ^{[ 44 ]}