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

ما هو التصميم المتجاوب؟

في ٢٠١٠ كان المستخدم بيتصفح الإنترنت من الكمبيوتر بس. النهارده، أكتر من ٦٠٪ من زيارات الويب بتيجي من الموبايل. والمستخدم ممكن يبدأ مهمة على الموبايل ويكمّلها على اللابتوب ويراجعها على التابلت.

التصميم المتجاوب (Responsive Design) معناه إن التصميم بيتكيف تلقائيًا مع حجم الشاشة اللي المستخدم بيستخدمها — من ٣٢٠px (أصغر موبايل) لـ ٢٥٦٠px (شاشة كبيرة) وأكتر.

المصطلح اخترعه Ethan Marcotte في ٢٠١٠ وبقى المعيار الأساسي في تصميم الويب. الفكرة إن المحتوى زي الماء — بياخد شكل الإناء اللي بيتحط فيه.

نهج Mobile-First

ليه نبدأ من الموبايل؟

في الماضي، المصممين كانوا بيصمموا للديسكتوب الأول وبعدين "يقلّصوا" التصميم للموبايل. ده كان بيأدي لمشاكل كتير:

• عناصر بتتقطع أو بتتراكب
• محتوى مش مرئي
• تجربة موبايل سيئة

نهج Mobile-First بيعكس العملية: ابدأ بالتصميم للشاشة الأصغر وبعدين وسّع تدريجيًا. الفوائد:

• التركيز: الشاشة الصغيرة بتجبرك تركز على الأهم — أيه المحتوى الأساسي فعلاً؟
• الأداء: التصميم البسيط بيتحمّل أسرع — والموبايل محتاج سرعة
• التوسع أسهل: إضافة محتوى لشاشة أكبر أسهل من حذفه من شاشة أصغر
• الأولوية: لما المساحة محدودة، بتتعلم ترتب المعلومات حسب أهميتها

عملية Mobile-First في التصميم

1. صمّم للموبايل أولاً (٣٧٥px): حدد المحتوى الأساسي والتدفق
2. وسّع للتابلت (٧٦٨px): أضف أعمدة ومحتوى جانبي
3. وسّع للديسكتوب (١٤٤٠px): استغل المساحة الكبيرة بتخطيط أغنى
4. اختبر كل حجم: تأكد إن التصميم سلس في كل مرحلة

نقاط التوقف (Breakpoints)

نقاط التوقف هي الأحجام اللي التصميم بيتغير عندها. مش محتاج نقطة توقف لكل جهاز — محتاج نقاط توقف عندما يحتاج المحتوى يتغير.

نقاط التوقف الشائعة

الاسم	العرض	الاستخدام
xs	< ٤٧٥px	موبايلات صغيرة
sm	٤٧٥ - ٦٣٩px	موبايلات كبيرة
md	٦٤٠ - ٧٦٧px	تابلت عمودي
lg	٧٦٨ - ١٠٢٣px	تابلت أفقي
xl	١٠٢٤ - ١٢٧٩px	لابتوب صغير
2xl	١٢٨٠ - ١٥٣٥px	ديسكتوب
3xl	١٥٣٦px+	شاشة كبيرة

نقاط التوقف في Tailwind CSS

Tailwind بيوفر نقاط توقف جاهزة:

• sm: ٦٤٠px
• md: ٧٦٨px
• lg: ١٠٢٤px
• xl: ١٢٨٠px
• 2xl: ١٥٣٦px

أيه اللي بيتغير عند كل نقطة توقف؟

• عدد الأعمدة: ٤ على الموبايل → ٨ على التابلت → ١٢ على الديسكتوب
• تخطيط العناصر: عمودي على الموبايل → أفقي على الديسكتوب
• حجم الخطوط: أصغر على الموبايل وأكبر على الديسكتوب
• التنقل: Hamburger على الموبايل → شريط أفقي على الديسكتوب
• الإخفاء/الإظهار: بعض العناصر بتختفي على الموبايل (Sidebar مثلاً)

التخطيطات المرنة (Fluid Layouts)

النسب بدل الأرقام الثابتة

بدل ما تحدد عرض عمود بـ ٤٠٠px، حدده بـ ٣٣.٣٣٪ (ثلث العرض). كده العمود بيتكيف مع أي عرض شاشة.

CSS Grid و Flexbox

في التطوير، التخطيطات المرنة بتتبني بـ:

Flexbox — للتخطيطات في اتجاه واحد (أفقي أو عمودي):

• شريط تنقل: عناصر بجانب بعض
• قائمة عناصر: واحد تحت التاني

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

• شبكة كروت: ٣ أعمدة × عدد صفوف
• تخطيط صفحة كاملة: header + sidebar + content + footer

الخطوط المرنة (Fluid Typography)

بدل ما تحدد حجم ثابت لكل نقطة توقف، استخدم خطوط مرنة بتتغير بسلاسة:

الفكرة إن حجم الخط بيتغير تدريجيًا بين حد أدنى وحد أقصى:

• على شاشة ٣٢٠px: العنوان ٢٤px
• على شاشة ١٤٤٠px: العنوان ٤٨px
• بين الاتنين: الحجم بيتغير تدريجيًا

في CSS، ده بيتعمل بـ clamp():
font-size: clamp(1.5rem, 1rem + 2vw, 3rem)

الصور المرنة

الصور لازم تتكيف مع حجم الحاوي:

• max-width: 100% عشان الصورة ما تخرجش عن حدود الحاوي
• استخدم نسب ثابتة (Aspect Ratio) عشان الصورة ما تتشوهش
• وفّر أحجام مختلفة من الصورة لأحجام الشاشات المختلفة (srcset)

أنماط التجاوب (Responsive Patterns)

١. تحويل الأعمدة (Column Drop)

أشهر نمط — الأعمدة اللي جنب بعض على الديسكتوب بتنزل تحت بعض على الموبايل.

مثال: ٣ كروت بجانب بعض على الديسكتوب → كارد واحد في كل صف على الموبايل.

متى تستخدمه: للمحتوى اللي كل جزء مستقل عن التاني — كروت، منتجات، مقالات.

٢. تدفق مرن (Mostly Fluid)

زي Column Drop بس مع عرض محدود على الشاشات الكبيرة. المحتوى بيوصل لحد أقصى (max-width) وبعدين الهوامش بتزيد.

مثال: محتوى بعرض ١٢٠٠px كحد أقصى — على شاشة ١٩٢٠px، فيه هوامش كبيرة من الجانبين.

متى تستخدمه: أغلب المواقع والتطبيقات — هو النمط الافتراضي.

٣. تبديل التخطيط (Layout Shifter)

التخطيط بيتغير بشكل جذري بين أحجام الشاشات — مش بس أعمدة بتنزل تحت بعض.

مثال: على الموبايل — Tab Bar في الأسفل. على التابلت — Sidebar مطوي. على الديسكتوب — Sidebar مفتوح.

متى تستخدمه: لما التجربة محتاجة تكون مختلفة فعلاً على كل جهاز.

٤. إظهار/إخفاء (Off Canvas)

محتوى معين بيكون مخفي على الشاشات الصغيرة وبيظهر لما المستخدم يطلبه.

مثال: قائمة التصفية في متجر إلكتروني — على الديسكتوب ظاهرة في Sidebar. على الموبايل مخفية ورا زر "فلتر".

متى تستخدمه: للمحتوى الثانوي اللي مش أساسي على الشاشات الصغيرة.

٥. الجدول المتجاوب (Responsive Table)

الجداول مشكلة كبيرة على الموبايل. فيه حلول مختلفة:

• تمرير أفقي: الجدول يفضل زي ما هو بس المستخدم يمرر أفقيًا
• تحويل لكروت: كل صف بيتحول لكارد فيه كل البيانات
• إخفاء أعمدة: الأعمدة الأقل أهمية بتختفي على الموبايل
• تكديس: الأعمدة بتتحول لصفوف

مناطق اللمس (Touch Targets)

على الموبايل، المستخدم بيتفاعل بإصبعه مش بالماوس. الإصبع أقل دقة بكتير من مؤشر الماوس.

الحد الأدنى لمنطقة اللمس

• Apple HIG: ٤٤ × ٤٤ نقطة
• Material Design: ٤٨ × ٤٨dp
• WCAG: ٢٤ × ٢٤px كحد أدنى (AA)، ٤٤ × ٤٤px (AAA)

القاعدة العملية: أي عنصر تفاعلي على الموبايل لازم يكون ٤٤px على الأقل في الارتفاع والعرض.

مسافات بين العناصر التفاعلية

لازم يكون فيه ٨px على الأقل بين أي عنصرين تفاعليين على الموبايل. المستخدم اللي بيضغط على زر ما يضغطش على الزر اللي جنبه بالغلط.

مناطق الإبهام (Thumb Zone)

لما المستخدم ماسك الموبايل بإيد واحدة:

• المنطقة السهلة: أسفل الشاشة في النص
• المنطقة المتوسطة: أسفل الشاشة على الأطراف وأعلى الشاشة في النص
• المنطقة الصعبة: أعلى الشاشة على الأطراف

الدرس: حط الإجراءات الأهم والأكتر تكرارًا في أسفل الشاشة. عشان كده Tab Bar بيكون في الأسفل والأزرار الرئيسية بتكون في منطقة الإبهام.

التصميم المتجاوب في Figma

إعداد الإطارات

صمّم كل شاشة ٣ مرات على الأقل:

• موبايل: ٣٧٥ × ٨١٢ (iPhone 13/14)
• تابلت: ٧٦٨ × ١٠٢٤ (iPad)
• ديسكتوب: ١٤٤٠ × ٩٠٠

Auto Layout المتجاوب

استخدم Auto Layout مع Fill Container عشان المكونات تتكيف:

كارد مرن:

• العرض: Fill Container (بياخد عرض الحاوي)
• الارتفاع: Hug Contents (بياخد ارتفاع المحتوى)
• الصورة: Fill Container + نسبة ثابتة

شبكة كروت مرنة:

• على الديسكتوب: Auto Layout أفقي + Wrap
• على الموبايل: Auto Layout عمودي

Constraints في Figma

لو مش بتستخدم Auto Layout (في حالات نادرة):

• Left & Right: العنصر بيتمدد مع تغيير عرض الإطار
• Center: العنصر بيفضل في النص
• Scale: العنصر بيكبر ويصغر بنسبة

أنماط التنقل المتجاوبة

الديسكتوب → الموبايل

الديسكتوب	الموبايل
شريط تنقل أفقي كامل	Hamburger Menu أو Bottom Tab Bar
Sidebar مفتوح دايمًا	Sidebar مخفي (Drawer)
Breadcrumbs	زر رجوع
Tabs أفقية	Tabs قابلة للتمرير أو Dropdown
جدول كامل	كروت أو جدول قابل للتمرير
Multi-column form	Single-column form
Hover tooltips	Long press أو info icon

نصائح مهمة

• ما تخفيش محتوى مهم على الموبايل — لو المحتوى مهم، لازم يكون موجود على كل الأحجام
• ما تعملش موقع موبايل منفصل (m.example.com) — استخدم تصميم متجاوب واحد
• اختبر على أجهزة حقيقية — المحاكي مش بيوري كل المشاكل

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

في Figma

• استخدم Prototype Mode واضبط Device على أحجام مختلفة
• استخدم Figma Mirror لاختبار التصميم على موبايلك الحقيقي

في المتصفح

• Chrome DevTools: اضغط Ctrl+Shift+M لفتح محاكي الأجهزة
• غيّر حجم النافذة يدويًا وشوف التصميم في كل حجم
• Responsively App: أداة بتعرض الموقع على أحجام متعددة في وقت واحد

على الأجهزة الحقيقية

• الموبايل الشخصي: أول وأهم اختبار
• BrowserStack: اختبر على أجهزة حقيقية عن بُعد
• أجهزة مختلفة: لو ممكن، اختبر على iPhone وAndroid وiPad على الأقل

أخطاء شائعة في التصميم المتجاوب

١. تصميم الديسكتوب أولاً

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

٢. نقاط توقف كتير

٣-٤ نقاط توقف كافية لأغلب المشاريع. كل نقطة إضافية بتزود التعقيد في التصميم والتطوير والصيانة.

٣. أزرار صغيرة على الموبايل

زر ٣٠px على الموبايل مستحيل المستخدم يضغط عليه بسهولة. ٤٤px حد أدنى.

٤. تجاهل الشاشات الكبيرة

كتير من المصممين بيصمموا للموبايل والديسكتوب بس ويتجاهلوا الشاشات الكبيرة (٢٥٦٠px+). النتيجة: محتوى رفيع في نص شاشة ضخمة. حدد max-width واستخدم المساحة بذكاء.

٥. نص مش قابل للقراءة

حجم الخط اللي بيبان كويس على الديسكتوب ممكن يكون صغير جدًا على الموبايل. ١٦px هو الحد الأدنى للنص العادي على الموبايل.

٦. عدم اختبار المحتوى الحقيقي

Lorem Ipsum مش بيبيّن المشاكل. استخدم محتوى حقيقي — عناوين طويلة، أسماء طويلة، نصوص عربية. المحتوى الحقيقي بيكشف مشاكل اللي المحتوى الوهمي بيخبيها.

قائمة تحقق للتصميم المتجاوب

قبل ما تسلّم أي تصميم، اسأل نفسك:

• هل صممت لكل أحجام الشاشات المطلوبة؟
• هل كل الأزرار والعناصر التفاعلية ٤٤px على الأقل على الموبايل؟
• هل النصوص مقروءة على كل الأحجام؟
• هل التنقل سهل على كل الأجهزة؟
• هل المحتوى الأساسي مش مخفي على أي حجم شاشة؟
• هل الصور متكيفة ومش بتتشوه؟
• هل فيه مسافة كافية بين العناصر التفاعلية على الموبايل؟
• هل التصميم بيبان كويس في الوضع الأفقي (Landscape) كمان؟

تمرين عملي

صمّم صفحة رئيسية لموقع شخصي بـ ٣ أحجام:

الموبايل (٣٧٥px):

1. Header بسيط + Hamburger Menu
2. Hero Section بعنوان وزر CTA
3. قسم "أعمالي" — كروت تحت بعض
4. قسم "عني" — نص وصورة
5. Footer

التابلت (٧٦٨px):

1. Header + تنقل مرئي جزئيًا
2. Hero أكبر
3. كروت في صفين (٢ في كل صف)
4. "عني": صورة جنب النص
5. Footer بعمودين

الديسكتوب (١٤٤٠px):

1. Header كامل + كل الروابط ظاهرة
2. Hero كبير مع صورة جانبية
3. كروت في ٣ أعمدة
4. "عني": تخطيط غني
5. Footer بـ ٤ أعمدة

ابدأ بالموبايل واتأكد إن كل حاجة شغالة وبعدين وسّع. لاحظ كيف قرارات التصميم على الموبايل بتحسّن التصميم على الشاشات الأكبر كمان.