من البداية، تم تصميم شبكة الويب العالمية لتكون حيادية. لا يهم الأجهزة التي لديك. لا يهم نظام التشغيل الذي يعمل عليه جهازك. يمكنك الوصول إلى شبكة الويب العالمية طالما أنه يمكنك الاتصال بالإنترنت.
في بدايات شبكة الويب، كان معظم الناس يستخدمون أجهزة الكمبيوتر المكتبية. يتوفّر الويب في الوقت الحالي على أجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف القابلة للطي والثلاجات والسيارات. يتوقع الأشخاص حقًا أن تبدو المواقع الإلكترونية جيدة بغض النظر عن الجهاز الذي يستخدمونه. التصميم سريع الاستجابة يجعل هذا ممكنًا.
التصميم سريع الاستجابة ليس النهج الأول لتصميم مواقع الويب. في السنوات السابقة للتصميم سريع الاستجابة، جرّب مصممو الويب والمطورون العديد من الأساليب المختلفة.
تصميم بعرض ثابت
في أوائل التسعينيات، عندما أصبح الويب رائجًا لأول مرة، تحتوي معظم الشاشات على أبعاد شاشة تبلغ 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، من المراهنة الآمنة على تصميم صفحات الويب بعرض ثابت؟
ما نوع أحجام الشاشة التي تتعارض التخطيطات السائلة بشكل عام؟
المعايير الثلاثة الأصلية للتصميم سريع الاستجابة؟
التصميم سريع الاستجابة هو عالم مثير ومتزايد من الاحتمالات. في بقية هذه الدورة، ستتعرفون على هذه التقنيات وكيفية استخدامها لإنشاء ومواقع ويب سريعة الاستجابة للجميع.