عدد الكلمات: ~١٩٠٠ · مدة القراءة: ١٠ دقائق

الهاتف أولاً

كيف تُصمّم موقعاً يُفكّر بعقل الهاتف، قبل أن يُفكّر بعقل الحاسوب

ملاحظة للقارئ: هذا المقال مستقل تماماً ويمكنك قراءته منفرداً. لكن إذا كنت تريد فهم كيف يُبنى هيكل الصفحة الذي سنُصمّمه هنا، فننصحك بمراجعة مقالتنا: لغة الهيكل: أساسيات HTML — ومقالتنا: التنسيق البصري: CSS للمبتدئين.

افتح هاتفك الجوال الآن، وابحث عن أي شيء في غوغل. لاحظ كيف تتصرف النتائج التي تظهر لك: بعضها تقرأه براحة تامة، وبعضها تضطر فيه إلى التكبير والتمرير يميناً ويساراً كأنك تقرأ خريطةً قديمة. الفرق بين الموقعين ليس في المحتوى، بل في قرار اتخذه المُصمّم: هل بنى موقعه للشاشة الكبيرة ثم “ضغطه” على الهاتف، أم أنه بدأ بالهاتف من اليوم الأول؟ في هذا المقال من منصة ذي يزن، سنتعلم سويةً فلسفة “الجوال أولاً” (Mobile-First)، ولماذا أصبحت المعيار الذي لا يمكن تجاهله، وكيف تُطبّقها عملياً.

لماذا الجوال أولاً؟ — قصة انقلاب

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

الأرقام العالمية اليوم تقول إن ما بين ٦٠٪ و٧٠٪ من تصفّح الإنترنت يأتي من الهواتف الذكية. وغوغل تحديداً تُقيّم مواقعك أولاً بعيني الجوال لا الحاسوب، وهذا يؤثر مباشرةً على ترتيبك في نتائج البحث، وهو ما سنتناوله بالتفصيل في مقال السيو من هذه السلسلة.

المشكلة الحقيقية ليست في أن الموقع “يبدو سيئاً” على الجوال، بل في أن الزائر يغادر في ثوانٍ إذا لم يجد ما يريده بسهولة — وغوغل تُلاحظ ذلك.

ما هو الجوال أولاً؟ الخياطة العكسية

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

هذا بالضبط ما تقوله فلسفة “الهاتف أولاً”: ابدأ بتصميم تجربةٍ مثاليةٍ لشاشةٍ صغيرةٍ بمعالجٍ محدودٍ وإنترنتٍ ربما أبطأ، ثم وسّعها وأثرِها لشاشاتٍ أكبر. حين تبدأ هكذا، تُجبر نفسك على أسئلةٍ جوهرية: ما أهم شيء يُريد الزائر أن يراه؟ ما الذي يمكن الاستغناء عنه؟ هذه الأسئلة تُنتج مواقع أكثر وضوحاً وتركيزاً حتى على الحاسوب.

الاستجابة: حين يُفكّر الموقع بنفسه

قبل أن نكتب أيّ كود، نحتاج إلى فهم الأداة التي تجعل هذا كله ممكناً: التصميم المتجاوب (Responsive Design). والأداة التقنية خلفه هي ما يُسمى Media Queries — استفسارات الوسيط، أو بالعربية البسيطة: “أسئلة يسألها الموقع للشاشة”.

يُشبه الأمر ثوباً ذكياً يسأل: “ما قياسك؟”، فإذا أجبته بقياسٍ صغيرٍ انكمش شكلاً، وإذا أجبته بكبير تمدد بشكلٍ آخر. وهذا كله يحدث تلقائياً عبر أسطر CSS بسيطة.

نقاط الكسر: حيث تتغيّر التجربة

حين نتحدث عن الاستجابة، نتحدث عن نقاط الكسر (Breakpoints)، وهي عروضٌ محددةٌ تتغيّر عندها طريقة عرض الموقع. الأكثر شيوعاً ثلاث نقاطٍ رئيسية:

والآن لنرَ كيف يبدو هذا في CSS الحقيقي. النقطة الجوهرية في “الهاتف أولاً” هي أن الأنماط الأساسية تُكتب خارج أي استفسار، وتعمل على الهاتف افتراضياً، ثم نُضيف استفسارات للشاشات الأكبر:

/* القاعدة — تعمل على الهاتف افتراضياً */
.container {
  display: block;      /* عمود واحد */
  padding: 16px;
  font-size: 16px;
}

.menu {
  display: none;       /* القائمة مخفية في الهاتف */
}

.menu-toggle {
  display: block;      /* زر "القائمة" يظهر على الهاتف */
}

/* للتابلت فصاعداً */
@media (min-width: 600px) {
  .container {
    display: flex;
    gap: 20px;
  }
}

/* للحاسوب فصاعداً */
@media (min-width: 1024px) {
  .menu {
    display: flex;     /* القائمة الكاملة تظهر */
  }
  .menu-toggle {
    display: none;     /* زر "القائمة" يختفي */
  }
}

لاحظ نبرة الكود: الهاتف هو الحالة الطبيعية، والحاسوب هو الاستثناء الذي نُضيفه لاحقاً — وليس العكس.

إطار العرض Viewport: الإطار الذي يرى منه الهاتف

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

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

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

التطبيق العملي: صفحةٌ تتجاوب

سنبني صفحةً بسيطةً تحتوي على قسمٍ ترحيبيٍ وثلاث بطاقات معلوماتٍ، تظهر في عمودٍ واحدٍ على الهاتف وثلاثة أعمدةٍ على الحاسوب. ملف واحد باسم responsive-page.html تُنشئه في أي مجلد على حاسوبك.

تنبيه لمستخدمي ويندوز: حين تحفظ الملف من المفكرة (Notepad)، تأكد من اختيار “All Files” في نوع الملف وكتابة الاسم كاملاً مع الامتداد .html، وإلا سيُضيف ويندوز امتداد .txt خلف الكواليس ولن يُفتح الملف في المتصفح.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحتي المتجاوبة</title>
  <style>

    /* ===== القاعدة: الهاتف أولاً ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      color: #333;
    }

    header {
      background: #c0392b;
      color: white;
      text-align: center;
      padding: 30px 16px;
    }

    header h1 {
      font-size: 1.6em;
      margin-bottom: 8px;
    }

    .cards-container {
      display: flex;
      flex-direction: column;   /* عمود واحد على الهاتف */
      gap: 16px;
      padding: 20px 16px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .card h2 {
      color: #c0392b;
      margin-bottom: 10px;
    }

    /* ===== التابلت: عمودان ===== */
    @media (min-width: 600px) {
      .cards-container {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .card {
        flex: 1 1 calc(50% - 8px);  /* عمودان */
      }
    }

    /* ===== الحاسوب: ثلاثة أعمدة ===== */
    @media (min-width: 900px) {
      .card {
        flex: 1 1 calc(33.333% - 11px);  /* ثلاثة أعمدة */
      }
    }

  </style>
</head>
<body>

  <header>
    <h1>مرحباً بك في موقعي</h1>
    <p>هذه الصفحة تتجاوب مع كل الشاشات</p>
  </header>

  <div class="cards-container">

    <div class="card">
      <h2>خدماتي</h2>
      <p>وصف مختصر للخدمات التي أقدمها وما يميزها عن غيرها.</p>
    </div>

    <div class="card">
      <h2>أعمالي</h2>
      <p>نماذج من مشاريعي السابقة ومعرض الأعمال المنجزة.</p>
    </div>

    <div class="card">
      <h2>تواصل معي</h2>
      <p>كيفية الوصول إليّ والتفاصيل المتعلقة بطرق التواصل.</p>
    </div>

  </div>

</body>
</html>

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

تطبيقات الويب التقدمية — حين يتحوّل الموقع إلى “تطبيق”

هنا نصل إلى فكرة تستحق لحظة توقف: ماذا لو استطاع موقعك أن يُثبَّت على الهاتف مثل تطبيق فعلي، يظهر على الشاشة الرئيسية بأيقونة خاصة ويعمل حتى في حالة ضعف الإنترنت؟ هذا بالضبط ما تعنيه تطبيقات الويب التقدمية (Progressive Web Apps — PWA).

الـ PWA ليست تقنيةً واحدة، بل مجموعة خصائص تُضيفها للموقع تدريجياً (ومن هنا جاءت كلمة “تقدمية”):

الخاصية الأولى — ملف البيان (Manifest)

ملف JSON صغير يُخبر الهاتف باسم تطبيقك، وأيقونته، ولون شريط العنوان، وكيف يُعرض حين يُفتح من الشاشة الرئيسية. هو كود صغير تضيفه إلى كود صفحة موقعك:

<link rel="manifest" href="/manifest.json">

ثم تنشئ ملف manifest.json بجانب ملف HTML:

{
  "name": "اسم موقعي",
  "short_name": "موقعي",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#c0392b",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

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

الخاصية الثانية — عامل الخدمة (Service Worker)

هذا هو “الخادم الصامت” الذي يعمل خلف الكواليس: يحفظ ملفات موقعك في ذاكرة الهاتف ويقدّمها حين يضعف الاتصال أو ينقطع. إعداده يتطلب استضافةً حقيقيةً (ليس فقط ملف محلي) وهو موضوعٌ أعمق مما يتسع له هذا المقال، لكن المهم أن تعرف أنه موجودٌ وأن الطريق إليه ليس مُعقّداً حين تصل لذلك المستوى.

فكرة الـ PWA لا تعني أنك ستُنشئ “تطبيقاً منافساً لتويتر”! بل تعني أن موقع طبيبك أو ورشة الحداد في حيّك يمكنهما أن يُثبَّتا على هاتف العميل ويعملا بدون إنترنت لعرض ساعات العمل والعنوان.

إذا كنت تستخدم ووردبريس، فماذا يعنيك هذا كله؟

ربما تتساءل: “أنا أستخدم ووردبريس وقالباً جاهزاً، فهل أحتاج كل هذا؟” الجواب: لا تحتاج كتابة الكود، لكنك تحتاج فهم المفاهيم لأسبابٍ عمليةٍ جداً:

أولاً، حين تختار قالباً ووردبريس، ستجد في صفحة وصفه عباراتٍ مثل “Fully Responsive” أو “Mobile-First Design”، والآن تعرف ما تعنيه هذه الكلمات وكيف تتحقق منها فعلياً قبل الشراء.

ثانياً، أي إضافة (Plugin) تُضيفها لموقعك تُضيف معها أكواداً ونصوصاً وصوراً، وقد تُبطئ تجربة الهاتف. معرفتك بمفهوم “الهاتف أولاً” تجعلك تسأل: “هل هذه الإضافة تؤثر على سرعة الهاتف؟”

ثالثاً، أداة مثل غوغل PageSpeed Insights، أدخل فيها رابط موقعك وستُعطيك تقييماً منفصلاً للهاتف والحاسوب مع توصياتٍ محددة. هذه التوصيات ستفهمها الآن.

خلاصة المقال والخطوة القادمة

تعلمنا سويةً أن فلسفة “الهاتف أولاً” ليست مجرد طريقةٍ تقنية، بل طريقة تفكير: أن تبدأ من الأساسي ثم تُضيف، لا أن تبدأ من المُعقَّد وتُجتزئ. وتعلمنا كيف تعمل الـ Media Queries بمنطق “الهاتف هو الطبيعي”، وكيف يُحوّل ملف Manifest موقعك إلى تجربةٍ شبيهةٍ بالتطبيق. نصيحةٌ صادقة: افتح موقعك أو موقع أيّ شخصٍ تعرفه على هاتفك الآن، وانتبه كيف تتصرف فيه بشكلٍ غريزي. ذلك الشعور بالسهولة أو الإحباط هو المعيار الحقيقي لنجاح التصميم.

الخطوة التالية الموصى بها:

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

المراجع والمصادر:

1. توثيق MDN Web Docs حول التصميم المتجاوب: Responsive Design — MDN
2. دليل غوغل لمواقع الهاتف وتقييم PageSpeed: PageSpeed Insights
3. توثيق تطبيقات الويب التقدمية (PWA): Progressive Web Apps — web.dev

منصة ذي يزن © 2026