أفضل ممارسات التصميم المتجاوب (Responsive Design)

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

ابدأ من الجوال، لا من سطح المكتب

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

عملياً في Tailwind هذا يعني كتابة الحالة الافتراضية للجوال، ثم إضافة md: وlg: فوقها:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">…</div>

استخدم شبكات مرنة بدل عروض ثابتة

العرض الثابت بالبكسل هو السبب الأول للتجاوز الأفقي. استبدله بـ Flexbox أو Grid:

/* ❌ يتجاوز أي شاشة أضيق من 900 بكسل */
.container { width: 900px; }

/* ✅ يتكيّف */
.container { width: 100%; max-width: 900px; margin-inline: auto; }

وauto-fit مع minmax تعطي شبكة تتكيّف بلا نقاط توقف أصلاً:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

اختبر على ثلاثة عروض على الأقل

ثلاثة عروض تكشف معظم المشاكل:

• 375 بكسل — أضيق جهاز شائع. معظم أخطاء التخطيط تظهر هنا وحدها.
• 768 بكسل — نقطة الانتقال بين عمود وعمودين، وأكثر موضع ينكسر.
• 1280 بكسل — سطح المكتب المعتاد.

الاختبار عند نقطة التوقف نفسها لا حولها: كثير من الأخطاء تظهر عند 768 بكسل بالضبط وتختفي عند 770.

الصور: أكبر مصدر للبطء وللقفز

ثلاث قواعد مجتمعة:

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="800" height="450"
  loading="lazy" decoding="async"
  alt="وصف دقيق للصورة"
>

• srcset وsizes يمنعان تحميل صورة بعرض 1600 بكسل على شاشة 375.
• width وheight يحجزان المساحة قبل التحميل فلا يقفز المحتوى. هذا هو علاج CLS الأول.
• loading="lazy" لكل صورة تحت الطي — وليس لصورة الغلاف الأولى، فتأجيلها يبطئ أول رسم بدل أن يسرّعه.

أحجام اللمس والخطوط

الهدف اللمسي الأدنى الموصى به 44×44 بكسل تقريباً. زر ارتفاعه 28 بكسل قابل للنقر بالفأرة وصعب على الإصبع. في Tailwind: min-h-11 px-4 نقطة بداية جيدة.

ولا تنزل بحجم النص الأساسي عن 16 بكسل على الجوال. أقل من ذلك يدفع متصفحات iOS إلى تكبير الصفحة تلقائياً عند التركيز على حقل إدخال، فيبدو الموقع وكأنه «قفز».

الجداول والمحتوى العريض

الجدول أكثر عنصر يكسر التخطيط على الجوال. لا تصغّره — دعه يمرر داخل حاويته:

<div class="overflow-x-auto">
  <table class="w-full">…</table>
</div>

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

احترم إعداد حجم الخط في الجهاز

من يرفع حجم الخط في إعدادات هاتفه يفعل ذلك لأنه يحتاجه. التخطيط الذي ينفجر عند تكبير الخط بنسبة 130٪ ليس متجاوباً. اختبر بتكبير الخط في إعدادات النظام لا بتكبير المتصفح فقط — النتيجتان مختلفتان.

الحركة والتفضيلات

بعض المستخدمين يفعّلون «تقليل الحركة» لأسباب صحية. احترام هذا بضعة أسطر:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

قائمة فحص سريعة قبل النشر

1. لا يوجد تمرير أفقي على 375 بكسل.
2. كل صورة لها width وheight ونص بديل.
3. أهداف اللمس لا تقل عن 44 بكسل.
4. النص الأساسي 16 بكسل فأكثر.
5. الجداول داخل حاوية تمرير.
6. التخطيط سليم عند تكبير خط النظام 130٪.
7. وسم viewport موجود في <head>.

الأسئلة الشائعة

لماذا يُنصح بتصميم نسخة الجوال قبل نسخة سطح المكتب؟

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

ما الذي يسبب ظهور تمرير أفقي في الموقع على الجوال؟

السبب الأول هو العرض الثابت بالبكسل، فحاوية بعرض 900 بكسل تتجاوز أي شاشة أضيق منها، والحل استبدالها بـ Flexbox أو Grid أو بعرض 100% مع حد أقصى. كما يجب أن يمرر المحتوى العريض كالجداول وكتل الكود داخل حاويته، لا أن يمرر جسم الصفحة أفقياً.

ما مقاسات الشاشة التي أختبر عليها التصميم المتجاوب؟

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

كيف أمنع الصور من قفز المحتوى وإبطاء الصفحة على الجوال؟

حدّد width وheight لكل صورة لحجز مساحتها قبل التحميل، وهذا هو علاج CLS الأول، واستخدم srcset وsizes حتى لا تُحمَّل صورة بعرض 1600 بكسل على شاشة 375. وأضف التحميل المؤجَّل للصور تحت الطي فقط، لا لصورة الغلاف الأولى، لأن تأجيلها يبطئ أول رسم بدل أن يسرّعه.

ما أصغر حجم مناسب للأزرار والنصوص في مواقع الجوال؟

الهدف اللمسي الأدنى الموصى به 44×44 بكسل تقريباً، فالزر بارتفاع 28 بكسل قابل للنقر بالفأرة وصعب على الإصبع. ولا ينبغي أن يقل النص الأساسي عن 16 بكسل، لأن الأصغر منه يدفع متصفحات iOS إلى تكبير الصفحة تلقائياً عند التركيز على حقل إدخال.

خلاصة

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