تاريخ موجز لتصميم الويب المتجاوب: كيف تطورت المواقع لتناسب كل الشاشات؟

مقدمة: لماذا أصبح تصميم الويب المتجاوب ضرورة لا رفاهية؟

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

في هذا المقال نستعرض تاريخ تصميم الويب المتجاوب، بداية من الويب المبكر، مروراً بأساليب التكيّف الأولى مع أحجام الشاشات المختلفة، وصولاً إلى المفاهيم الحديثة مثل fluid grids وflexible images وmedia queries.

البداية: أول موقع في تاريخ الويب

في السادس من أغسطس عام 1991، ظهر أول موقع إلكتروني على الإنترنت. أنشأه Tim Berners-Lee ليشرح مشروع World Wide Web، وكان يعمل آنذاك على جهاز NeXT داخل مؤسسة CERN الأوروبية للأبحاث النووية.

ورغم أن النسخة الأصلية للموقع اختفت لاحقاً، أطلقت CERN في عام 2013 مشروعاً لحفظ الأصول الرقمية المرتبطة بولادة الويب. شمل ذلك استعادة أسماء الأجهزة الأصلية، وعناوين IP، ورابط URL الخاص بالموقع الأول. لم تُستعد نسخة 1991 كاملة، لكن أمكن إحياء نسخة من عام 1992.

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

تصميم الويب المبكر: البساطة قبل المرونة

في بدايات التسعينيات، كان تصميم المواقع شديد البساطة. اعتمدت أغلب الصفحات على العناوين والفقرات وقوائم الوصف مثل <dl> و<dt> و<dd> لتنظيم المعلومات.

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

في عام 1994، اقترح Håkon Wium Lie تقنية CSS أثناء عمله في CERN. وبعد ذلك بعامين، أصدر اتحاد الويب العالمي W3C أول مواصفة رسمية لـ CSS1. هنا بدأ التحول الحقيقي في تصميم الويب، إذ أصبح من الممكن فصل المحتوى عن التنسيق.

ومع تقنيات مثل JavaScript وFlash، صارت المواقع أكثر تفاعلاً وجرأة من حيث التصميم.

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

كيف تعامل المطورون قديماً مع اختلاف أحجام الشاشات؟

قبل انتشار الهواتف الذكية، كانت دقات العرض الشائعة محدودة نسبياً مثل 640x480 و800x600 و1024x768. لذلك لم يكن اختلاف الشاشات تحدياً ضخماً كما هو اليوم. ومع ذلك، حاول المطورون إيجاد أساليب تسمح للمواقع بالتكيف مع النوافذ والأجهزة المختلفة.

1) التخطيطات السائلة Liquid Layouts

من أوائل الخيارات الشائعة كان استخدام التخطيط ثابت العرض fixed-width أو التخطيط السائل liquid. في التخطيط الثابت يتم تحديد عرض المحتوى بوحدات دقيقة مثل px، بينما يعتمد التخطيط السائل على النِّسب المئوية مثل %.

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

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

2) التخطيطات المعتمدة على الدقة Resolution Dependent Layouts

في عام 2004، شرح Cameron Adams أسلوباً يعتمد على JavaScript لتبديل ملفات الأنماط stylesheets وفقاً لحجم نافذة المتصفح. عُرفت هذه الفكرة باسم resolution dependent layouts.

وفرت هذه الطريقة تحكماً أدق في شكل الموقع، ويمكن اعتبارها سلفاً مباشراً لما نعرفه اليوم باسم نقاط التوقف breakpoints.

لكنها كانت مرهقة، لأن المطور كان بحاجة إلى إنشاء ملفات تنسيق متعددة لكل دقة مستهدفة، مع اختبارها على عدد كبير من المتصفحات التي كانت تتعامل مع HTML وCSS وJavaScript بطرق مختلفة.

3) النطاقات الفرعية المخصصة للجوال Mobile Subdomains

مع انتشار أجهزة مثل Nokia وBlackBerry ثم iPhone، ظهر تحدٍ جديد: كيف يمكن تقديم تجربة مناسبة للشاشات الصغيرة جداً؟

أحد الحلول الذكية في ذلك الوقت كان إنشاء نسخة منفصلة للموقع مخصصة للجوال على نطاق فرعي مثل m.example.com. هذا ما يسمى m-dot site أو النطاق الفرعي للجوال.

على سبيل المثال، النسخة المكتبية من Facebook كانت على www.facebook.com:

بينما كانت النسخة المخصصة للجوال على m.facebook.com:

هذا النموذج قدم مزايا واضحة:

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

لكن له أيضاً عيوب مهمة:

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

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

ولادة مفهوم تصميم الويب المتجاوب

بحلول نهاية العقد الأول من الألفية، أصبح تصميم موقع يعمل على أحجام شاشات مختلفة أمراً شبه إلزامي. في عام 2010، نشر المطور Ethan Marcotte مقالاً مؤثراً في A List Apart قدّم فيه طريقة جديدة للتفكير في تصميم الويب المرن، وصاغ مصطلح Responsive Web Design.

اعتمد هذا المفهوم على ثلاثة أعمدة رئيسية:

1. الشبكات المرنة fluid grids
2. الصور المرنة flexible images
3. استعلامات الوسائط media queries

الشبكات المرنة Fluid Grids

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

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

الصور المرنة Flexible Images

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

من أشهر الحيل العملية لتحقيق ذلك استخدام الخاصية max-width: 100%.

في المثال التالي قد تتجاوز الصورة حدود الحاوية:

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }
</style>

<body>
  <div class="container">
    <img src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>

أما عند إضافة max-width: 100% فلن تتجاوز الصورة الحاوية:

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>

<body>
  <div class="container">
    <img class="my-image" src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>

بل وستُعاد موازنتها تلقائياً إذا تغيّر عرض الحاوية:

<style>
  .container {
    width: 600px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>

<body>
  <div class="container">
    <img class="my-image" src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>

استعلامات الوسائط Media Queries

تُعد media queries من أهم الأدوات التي رسخت تصميم الويب المتجاوب. وهي قواعد في CSS تُفعَّل عند تحقق شروط معينة تتعلق بنوع الوسيط مثل screen أو print، أو بخصائص مثل width وheight.

@media screen and (min-width: 500px) {
  background-color: red;
}

ومن خلال هذه الآلية ظهر مفهوم نقاط التوقف breakpoints، وهي اللحظات التي يتغير فيها التخطيط أو النمط بناءً على عرض الشاشة.

إليك مثالاً كاملاً:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }

  @media screen and (max-width: 500px) {
    .container {
      background-color: red;
    }
  }
</style>
<body>
  <div class="container">
    <img class="my-image" src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>
</html>

ومن المهم أيضاً استخدام وسم viewport حتى تعمل media queries بالطريقة المتوقعة على الهواتف:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

عندما يكون العرض 500px أو أقل، سيظهر العنصر بهذا الشكل:

وعندما يكون العرض 501px أو أكثر، يتغير النمط:

نهجان حديثان: Mobile-First أم Desktop-First؟

في الممارسات الحديثة، يوجد مساران رئيسيان لبناء التصميم المتجاوب:

نهج Mobile-First

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

نهج Desktop-First

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

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

ما الذي تعلمناه من هذا التطور؟

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

وهذا التطور لم يحسّن المظهر فقط، بل أثّر مباشرة في:

• تجربة المستخدم UX.
• الأداء وسرعة التحميل.
• إمكانية الوصول.
• تحسين الظهور في نتائج البحث.
• سهولة الصيانة والتطوير المستقبلي.

الخلاصة التقنية

من منظور تقني، لا يُعد تصميم الويب المتجاوب مجرد خيار بصري، بل هو إطار عمل فكري لبناء واجهات قادرة على خدمة المستخدم أينما كان وبأي جهاز استخدمه. وقد أثبتت التجربة أن الجمع بين fluid layouts وflexible media وmedia queries هو الأساس الأكثر استدامة لبناء مواقع حديثة قابلة للنمو. وإذا كان هناك درس جوهري من هذا التاريخ، فهو أن المرونة لم تعد تحسيناً إضافياً، بل شرطاً أساسياً لأي موقع يريد المنافسة في الويب الحديث.