التصميم المتجاوب ومبدأ الموبايل أولًا: دليل عملي لمواقع تعمل على كل شاشة

بقلم محمد صقر · 2 نوفمبر 2026 · المواقع الإلكترونية · قراءة نحو 5 دقيقة

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

التصميم المتجاوب (Responsive Design) هو الحل: صفحة واحدة تتكيف مع كل مقاس شاشة. وفي هذا الدليل نبني الأساس خطوة بخطوة مع أمثلة جاهزة.

ما معنى «متجاوب» و«الموبايل أولًا»؟

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

الخطوة 1: وسم الـViewport

بدونه سيعرض الهاتف الصفحة بعرض افتراضي كبير ويصغّرها:

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

ولا تعطّل التكبير بـuser-scalable=no؛ فهذا يضر ذوي ضعف البصر وسهولة الوصول.

الخطوة 2: ابدأ بتخطيط مرن

Flexbox للصفوف والأعمدة المرنة

.nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

Grid للشبكات

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

هذه الشبكة تعرض عمودًا على الهاتف وعمودين على التابلت وأكثر على الحاسوب تلقائيًا بلا استعلامات.

الوحدات النسبية

استخدم % وrem وvw وclamp() بدل البكسل الثابت:

h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); }
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }

الدالة clamp تعطي حجمًا يتدرج بين حد أدنى وأعلى حسب الشاشة، فلا نحتاج نقاط توقف كثيرة.

الخطوة 3: نقاط التوقف (Breakpoints)

استخدم استعلامات الوسائط عند الحاجة فقط، وابدأ بالأصغر:

/* الأساس: للموبايل */
.hero { padding: 24px 16px; }

/* تابلت */
@media (min-width: 768px) { .hero { padding: 48px 32px; } }

/* حاسوب */
@media (min-width: 1100px) { .hero { padding: 72px 48px; } }

لا تربط نقاط التوقف بأجهزة محددة (آيفون كذا)؛ اجعلها حيث ينكسر تصميمك فعلًا بتغيير عرض النافذة.

الخطوة 4: صور وفيديو متجاوبة

img, video { max-width: 100%; height: auto; display: block; }

وللأداء قدّم صورة بحجم يناسب الشاشة:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
     sizes="(max-width: 640px) 100vw, 800px"
     width="1200" height="630" alt="وصف الصورة" loading="lazy" decoding="async">

• حدّد width وheight لتجنب القفز في التخطيط (CLS) (Core Web Vitals ومؤشر CLS).
• استخدم loading="lazy" للصور تحت الشاشة الأولى، ولا تطبقها على صورة العنوان الأولى (LCP).
• فضّل صيغ WebP أو AVIF عندما يدعمها المتصفح، مع الضغط الجيد.

الخطوة 5: نصوص مريحة للقراءة

• حجم الخط الأساسي 16px على الأقل على الموبايل (حقول الإدخال أقل من 16px تسبب تكبيرًا مزعجًا في آيفون).
• ارتفاع السطر 1.6 إلى 1.9 للعربية.
• عرض السطر 45 إلى 75 حرفًا على الشاشات الكبيرة.
• تباين كافٍ بين النص والخلفية (يوصى بنسبة 4.5:1 كحد أدنى حسب WCAG).
• خط عربي مقروء (مثل Cairo أو Tajawal) مع الأوزان اللازمة فقط لتخفيف التحميل.

الخطوة 6: أهداف اللمس والتنقل

• حجم الأزرار لا يقل عن نحو 44×44 بكسل مع مسافة بينها.
• قائمة جانبية أو همبرغر للتنقل على الموبايل، مع إبقاء النداء الرئيسي (اتصل، واتساب) ظاهرًا ودائمًا.
• لا تعتمد على الحوم (Hover)، فلا وجود له باللمس.
• نماذج قصيرة: كل حقل زائد يخفض الإكمال. استخدم أنواع الحقول الصحيحة (type="tel" وtype="email") لتظهر اللوحة المناسبة، وautocomplete لتسهيل التعبئة.

<label for="phone">رقم الهاتف</label>
<input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" required>

الخطوة 7: العربية واتجاه RTL

المواقع العربية تحتاج عناية إضافية:

• ضع lang="ar" dir="rtl" على عنصر html.
• استخدم الخصائص المنطقية بدل اليمين واليسار: margin-inline-start وpadding-inline وtext-align: start وinset-inline-end، فتنقلب تلقائيًا بين RTL وLTR.
• اعكس الأيقونات الاتجاهية (الأسهم) في RTL.
• اعتن بالأرقام والنصوص المختلطة (عربي مع إنجليزي)؛ استخدم unicode-bidi وdir="ltr" لأرقام الهاتف والأكواد.
• في موقع ثنائي اللغة، استخدم hreflang وعناوين URL منفصلة لكل لغة (دليل hreflang).

الخطوة 8: الأداء جزء من التجاوب

الهاتف يعني معالجًا أضعف وشبكة أبطأ. لذلك:

• قلل حجم الصور والسكربتات والخطوط.
• أجّل السكربتات غير الضرورية (defer).
• اعتمد على CSS بدل JavaScript للتأثيرات حيث أمكن.
• احترم تفضيل المستخدم لتقليل الحركة:

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

وللتحسين الشامل تسريع الموقع.

الخطوة 9: اختبر على الواقع

1. أدوات المطور في المتصفح: وضع الجهاز (Device Mode) للتجربة السريعة.
2. أجهزة حقيقية: جرّب على هاتفين مختلفين على الأقل (أندرويد وآيفون) وتابلت.
3. Lighthouse وPageSpeed: فحص الأداء وسهولة الوصول (Lighthouse).
4. تجربة بإصبع واحد: هل تصل لكل الأزرار بيد واحدة؟
5. شبكة بطيئة: فعّل تحديد السرعة (Throttling) لترى ما يشعر به المستخدم الفعلي.
6. تحقق من التمرير الأفقي: أي عنصر أعرض من الشاشة يسبب شريطًا أفقيًا.

مثال كامل: بطاقات خدمات متجاوبة

<section class="services">
  <article class="svc"><h3>تصميم المواقع</h3><p>مواقع سريعة متجاوبة.</p></article>
  <article class="svc"><h3>تطبيقات الموبايل</h3><p>أندرويد وiOS بكود واحد.</p></article>
  <article class="svc"><h3>السيو</h3><p>تحسين الظهور في جوجل.</p></article>
</section>

.services { display: grid; gap: 16px; padding: 24px 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.svc { padding: 20px; border-radius: 16px; border: 1px solid #ddd; }
.svc h3 { margin: 0 0 8px; font-size: 1.15rem; }

بهذه الأسطر تحصل على بطاقات تتكيف مع أي شاشة بلا استعلام وسائط واحد.

أخطاء شائعة

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

وإن أردت موقعًا يطبق هذا كله من البداية فهذا أساس عملنا في تصميم المواقع وتصميم UI/UX. وللقرار بين موقع وتطبيق موقع أم تطبيق.

أسئلة شائعة

أسئلة شائعة

اقرأ أيضاً

مصادر موثوقة للاستزادة

• الفهرسة للموبايل أولًا من جوجل
• CLS على web.dev
• إرشادات إتاحة المحتوى WCAG
• CSS على MDN