أفضل ممارسات التصميم المتجاوب (Responsive Design)
من mobile-first إلى الشبكات المرنة والصور المتجاوبة وأحجام اللمس — ممارسات عملية تجعل موقعك يعمل على كل شاشة
التصميم المتجاوب لم يعد ميزة إضافية. الأغلبية الساحقة من زوار المواقع في السوق السعودي يأتون من الجوال، وجوجل يفهرس النسخة المخصصة للجوال أولاً — أي أن ما يراه الزائر على شاشة صغيرة هو ما يقيّمه محرك البحث. هذه هي الممارسات التي تصنع الفرق فعلاً.
ابدأ من الجوال، لا من سطح المكتب
تصميم سطح المكتب أولاً ثم «ضغطه» ينتج دائماً نسخة جوال مزدحمة، لأن القرارات اتُّخذت لمساحة لا وجود لها على الهاتف. العكس أسهل بكثير: صمّم للشاشة الضيقة أولاً، حيث تُجبَر على ترتيب الأولويات، ثم أضف ما تسمح به المساحة كلما اتسعت.
عملياً في 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;
}
}قائمة فحص سريعة قبل النشر
- لا يوجد تمرير أفقي على 375 بكسل.
- كل صورة لها
widthوheightونص بديل. - أهداف اللمس لا تقل عن 44 بكسل.
- النص الأساسي 16 بكسل فأكثر.
- الجداول داخل حاوية تمرير.
- التخطيط سليم عند تكبير خط النظام 130٪.
- وسم viewport موجود في
<head>.
خلاصة
التصميم المتجاوب ليس مجموعة نقاط توقف بل قرار بأن التخطيط يتكيّف افتراضياً. ابدأ من الضيق، استخدم وحدات مرنة، احجز مساحة الصور، واختبر على العرض الذي يزورك منه أغلب الناس فعلاً.
