منذ البداية، تم تصميم شبكة الويب العالمية لتكون غير حيادية. لا يهم نوع الأجهزة التي لديك. لا يهم نظام التشغيل الذي يعمل به جهازك. وعندما يكون بإمكانك الاتصال بالإنترنت، يمكنك الوصول إلى شبكة الويب العالمية.
في بدايات الويب، كان معظم الأشخاص يستخدمون أجهزة الكمبيوتر المكتبية. في الوقت الحالي، تتوفر خدمة الويب على أجهزة الكمبيوتر المكتبية والمحمولة والأجهزة اللوحية والهواتف القابلة للطي والثلاجات والسيارات. يتوقع الأشخاص حقًّا أن تبدو مواقع الويب جيدة بصرف النظر عن الجهاز الذي يستخدمونه. التصميم سريع الاستجابة يجعل هذا ممكنًا.
التصميم سريع الاستجابة ليس النهج الأول لتصميم مواقع الويب. في السنوات التي سبقت التصميم سريع الاستجابة، جرب مصممو الويب والمطورون العديد من الأساليب المختلفة.
تصميم بعرض ثابت
في أوائل التسعينيات، عندما أصبح الويب شائعًا لأول مرة، كانت معظم الشاشات تتضمن أبعاد شاشة 640 بكسل عرضًا في 480 بكسل في الطول. كانت هذه أنابيب أشعة الكاثود المحدب، ليس مثل شاشات الكريستال السائل المسطح التي لدينا الآن.
في الأيام التكوينية لتصميم الويب المبكر، كان من الآمن تصميم صفحات ويب بعرض 640 بكسل. ولكن بينما كانت التكنولوجيات الأخرى مثل الهواتف والكاميرات تحمِل تصغيرًا، أصبحت الشاشات أكبر (وفي النهاية أصبحت أكثر بساطة). في السابق، كانت أبعاد معظم الشاشات 800 × 600 بكسل. تغيرت تصميمات الويب وفقًا لذلك. بدأ المصممون والمطورون في افتراض أن 800 بكسل كانت طريقة افتراضية آمنة.
ثم أصبحت الشاشات أكبر مرة أخرى. أصبحت القيم التلقائية 1024 × 768. شعرت وكأنها سباق تسلح بين مصممي الويب ومصنعي الأجهزة.
سواء كان 640 أو 800 أو 1024 بكسل، كان اختيار عرض معين لتصميمه يُعرف باسم تصميم العرض الثابت.
إذا حددت عرضًا ثابتًا للتخطيط، فسيبدو تخطيطك جيدًا فقط بهذا العرض المحدد. إذا كان زائر موقعك الإلكتروني يحتوي على شاشة أعرض من العرض الذي اخترته، ستكون هناك مساحة مهدرة على الشاشة. يمكنك توسيط محتوى صفحاتك لتوزيع تلك المساحة بالتساوي أكثر (بدلاً من وجود مساحة فارغة على جانب واحد)، ولكنك لن تستفيد إلى أقصى حد من المساحة المتاحة.
وبالمثل، إذا وصل الزائر بشاشة أضيق من العرض الذي اخترته، فلن يتناسب المحتوى مع الوضع الأفقي. ينشئ المتصفح شريط زحف، وهو المكافئ الأفقي لشريط التمرير، ويضطر المستخدم إلى تحريك الصفحة بأكملها نحو اليسار واليمين لرؤية كل المحتوى.
تنسيقات سائلة
بينما استخدم غالبية المصممين تخطيطات العرض الثابت، اختار البعض جعل تخطيطاتهم مرنة. بدلاً من استخدام عرض ثابت لتنسيقاتك، يمكنك إنشاء تخطيط مرن باستخدام النسب المئوية لعرض الأعمدة. تعمل هذه التصميمات في أكثر من مواقف من التخطيط ذي العرض الثابت الذي يبدو صحيحًا بحجم واحد فقط.
وكانت هذه تسمى تخطيطات سائلة. ولكن في حين أن التخطيط السائل سيبدو جيدًا عبر نطاق واسع من العروض، إلا أنه سيبدأ في التدهور في الحدود القصوى. على الشاشة العريضة، يبدو التخطيط موسَّعًا. في الشاشة الضيقة، يبدو التنسيق مضغوطًا. كلا السيناريوهين ليسا مثاليين.
يمكنك الحد من هذه المشاكل باستخدام min-width وmax-width لتنسيقك.
ولكن بعد ذلك بأي حجم أقل من الحد الأدنى للعرض أو أعلى من الحد الأقصى للعرض، ستواجه المشكلات نفسها التي قد تواجهها في التخطيط بعرض ثابت.
على الشاشة العريضة، ستكون هناك مساحة غير مستخدمة تُهدر.
على شاشة ضيقة، سيتعين على المستخدم تحريك الصفحة بأكملها إلى اليسار واليمين لرؤية كل شيء.
الكلمة liquid هي مجرد أحد المصطلحات المستخدَمة لوصف هذا النوع من التنسيق. يُطلق على هذه الأنواع من التصميمات أيضًا اسم تخطيطات مرنة أو تخطيطات مرنة. وجاءت المصطلحات سلسة بالقدر نفسه كما لو كانت التقنية.
الشاشات الصغيرة
في القرن الحادي والعشرين، استمر حجم الويب في التزايد. وكذلك المراقبون. لكن ظهرت شاشات جديدة كانت أصغر من أي جهاز كمبيوتر مكتبي. مع وصول الهواتف المحمولة مع متصفحات ويب كاملة الميزات، واجه المصممون معضلة. كيف يمكنه التأكد من أن تصميماته ستبدو جيدة على كمبيوتر مكتبي وهاتف محمول؟ احتاجوا إلى طريقة لتصميم المحتوى ليناسب الشاشات الصغيرة التي تصل إلى 240 بكسل من حيث العرض وأكبر من آلاف البكسلات.
مواقع منفصلة
أحد الخيارات المتاحة هو إنشاء نطاق فرعي منفصل لزوّار الأجهزة الجوّالة. ولكن بعد ذلك، يتعين عليك الاحتفاظ بقاعدتين تعليمات برمجية وتصميمين منفصلين. ولإعادة توجيه الزوّار على الأجهزة الجوّالة، عليك إجراء تقصّي بواسطة وكيل المستخدم، ما قد يكون غير موثوق به ويسهل انتحال هويته. سيوقِف متصفِّح Chrome سلسلة وكيل المستخدم نهائيًا لأسباب تتعلق بالخصوصية. أيضًا، ما مِن خط واضح بين الأجهزة الجوّالة وتلك غير للأجهزة الجوّالة. ما هو الموقع الإلكتروني الذي يتم إرسال الأجهزة اللوحية إليه؟
التصاميم التكيُّفية
وبدلاً من إنشاء مواقع إلكترونية منفصلة على نطاقات فرعية مختلفة، يمكنك استخدام موقع إلكتروني واحد بتنسيقَين أو ثلاثة تنسيقات ذات عرض ثابت.
عند وصول استعلامات الوسائط لأول مرة إلى CSS، فتحت هذه الميزة المجال لجعل التنسيقات أكثر مرونة. لكن العديد من المطورين كانوا لا يزالون أكثر راحة في إنشاء تخطيطات ذات عرض ثابت. تضمن أحد الأساليب التبديل بين عدد قليل من التخطيطات ذات العرض الثابت في عروض محددة. يسمى بعض الأشخاص هذا تصميمًا متكيفًا.
سمح التصميم التكيفي للمصممين بتوفير تخطيطات بدت جيدة بعدة أحجام مختلفة، لكن التصميم لم يبد بشكل صحيح تمامًا عند عرضه بين تلك الأحجام. استمرت مشكلة المساحة الزائدة على الرغم من أنها لم تكن سيئة كما هو الحال في التخطيط الثابت العرض.
باستخدام طلبات بحث الوسائط في CSS، يمكنك منح المستخدمين التنسيق الأقرب إلى عرض المتصفّح. ولكن نظرًا لتنوع أحجام الأجهزة، فمن المحتمل أن يبدو التخطيط أقل من المثالي لمعظم الأشخاص.
تصميم الويب السريع الاستجابة
إذا كانت التخطيطات التكيفية عبارة عن مزيج من استعلامات الوسائط والتخطيطات ذات العرض الثابت، فإن تصميم الويب سريع الاستجابة هو مزيج من استعلامات الوسائط والتخطيطات السائلة.
صاغ إيثان ماركوت المصطلح ضمن مقالة A List Apart في العام 2010.
حدد إيثان ثلاثة معايير للتصميم سريع الاستجابة:
- شبكات مرنة
- وسائط مرنة
- الاستعلامات عن الوسائط
سيظهر تنسيق وصور الموقع الإلكتروني المتجاوب بشكل جيد على أي جهاز. لكن كانت هناك مشكلة واحدة.
عنصر meta لـ viewport
كان على المتصفحات على الهواتف المحمولة التعامل مع مواقع الويب المصممة بتخطيطات ذات عرض ثابت للشاشات الأوسع. افترضت متصفحات الجوّال بشكل افتراضي أن 980 بكسل كانت العرض الذي كان الأشخاص يصممون من أجله (وهي ليست خاطئة). لذا حتى إذا استخدمت تخطيطًا سلسًا، سيطبّق المتصفح عرضًا يبلغ 980 بكسل، ثم سيصغر حجم صفحة الويب المعروضة إلى عرض الشاشة الفعلي.
إذا كنت تستخدم تصميمًا سريع الاستجابة، فيجب عليك إخبار المتصفح بعدم القيام بذلك.
ويمكنك إجراء ذلك باستخدام عنصر meta في head من صفحة الويب:
<meta name="viewport" content="width=device-width, initial-scale=1">
هناك قيمتان مفصولتان بفواصل.
الْأَوِّلْ هُوَّ width=device-width.
يؤدي ذلك إلى إعلام المتصفّح بأنّ عرض الموقع الإلكتروني هو نفسه عرض الجهاز
(بدلاً من افتراض أنّ عرض الموقع الإلكتروني هو 980 بكسل).
القيمة الثانية هي initial-scale=1.
وهذا يوضح للمتصفّح مقدار إمكانية الضبط أو صغره.
فعند استخدام التصميم سريع الاستجابة، لن تحتاج إلى إجراء المتصفّح أي زيادة على الإطلاق.
مع وجود عنصر meta هذا، صفحات الويب جاهزة للاستجابة.
تصميم عصري سريع الاستجابة
أما اليوم، فلدينا القدرة على إنشاء مواقع ويب سريعة الاستجابة بطرق تتجاوز أحجام إطار العرض.
وتتيح ميزات الوسائط للمطوّرين الوصول إلى الإعدادات المفضّلة للمستخدم وتفعيل تجارب مخصّصة.
تمكن استعلامات الحاوية من امتلاك المكونات لمعلومات سريعة الاستجابة الخاصة بها.
يتيح العنصر picture للمصممين إمكانية اتّخاذ قرارات متعلقة بالاتجاه الفني استنادًا إلى نسب الشاشة.
التحقق من فهمك
اختبر معلوماتك حول تصميم الويب سريع الاستجابة
في عام 2021، يمكن أن يكون تصميم صفحات الويب بعرض ثابت.
في أي نوع من أحجام الشاشات تواجه التخطيطات السائلة عمومًا؟
المعايير الثلاثة الأصلية للتصميم سريع الاستجابة هي؟
التصميم سريع الاستجابة هو عالم مثير ومتزايد من الاحتمالات. في الجزء المتبقي من هذه الدورة، ستتعرف على هذه التقنيات وكيفية استخدامها لإنشاء مواقع ويب جميلة وسريعة الاستجابة للجميع.