التخطيط والتصميم المتجاوب

تخطيط الصفحة (Layout)

التخطيط هو ترتيب أقسام الصفحة (رأس، محتوى، شريط جانبي، تذييل). نبنيه بالعناصر الدلالية التي تعلّمناها:

<body>
  <header>الرأس</header>
  <nav>القائمة</nav>
  <main>
    <article>المحتوى</article>
    <aside>الشريط الجانبي</aside>
  </main>
  <footer>التذييل</footer>
</body>

🔑 HTML يحدّد البنية، وCSS يحدّد المظهر والترتيب. لا تستخدم الجداول للتخطيط.

أدوات التخطيط في CSS

البنية أعلاه تُرتّب بصريًا عبر CSS، وأشهر أداتين:

Flexbox — لترتيب العناصر في صف أو عمود.
CSS Grid — لتخطيط ثنائي الأبعاد (صفوف وأعمدة).

main {
  display: flex;
  gap: 20px;
}

(تفاصيلهما في مسار CSS.)

ما هو التصميم المتجاوب (Responsive)؟

أن يبدو موقعك جيدًا على كل الأحجام: جوال، لوحي، حاسوب. الخطوة الأولى في HTML هي وسم الـ viewport:

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

بدونه يظهر موقعك مصغّرًا وغير صالح على الجوال.

مبادئ التجاوب

استخدم وحدات مرنة (%, rem, vw) بدل البكسل الثابت حيثما أمكن.
اجعل الصور مرنة:

img { max-width: 100%; height: auto; }

استخدم Media Queries في CSS لتغيير التخطيط حسب عرض الشاشة:

@media (max-width: 600px) {
  main { flex-direction: column; }
}

نهج "الجوال أولًا" (Mobile First)

صمّم للجوال أولًا ثم وسّع للشاشات الكبيرة. لماذا؟ لأن أغلب زوّارك على الجوال — وهذا أيضًا أفضل للـ SEO (جوجل يعتمد فهرسة الجوال أولًا).

الأخطاء الشائعة

❌ نسيان وسم viewport → الموقع غير متجاوب أصلًا.
❌ عرض ثابت بالبكسل للحاويات → تكسّر على الجوال.
❌ صور بلا max-width → تتجاوز الشاشة.

خلاصة

ابنِ التخطيط بعناصر دلالية، ورتّبه بصريًا بـ Flexbox/Grid، واجعله متجاوبًا بوسم viewport ووحدات مرنة وMedia Queries، مع نهج الجوال أولًا.