مبادئ التصميم المتجاوب والأولوية للهاتف المحمول

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

التصميم المتجاوب للويب (RWD) هو نهج لبناء المواقع يضمن أن الصفحة تبدو وتعمل بشكل جيد على كل جهاز وحجم شاشة -- من الهواتف الذكية الصغيرة إلى شاشات سطح المكتب الكبيرة. بدلاً من إنشاء مواقع منفصلة لمستخدمي الهاتف المحمول وسطح المكتب، يستخدم التصميم المتجاوب قاعدة كود واحدة تتكيف في تخطيطها وصورها وخطوطها مع المساحة المتاحة على الشاشة. صاغ هذا المصطلح إيثان ماركوت في عام 2010، وأصبح منذ ذلك الحين النهج القياسي لتطوير الويب الحديث.

قبل التصميم المتجاوب، كان المطورون يبنون مواقع محمولة منفصلة تماماً (غالباً ما تُستضاف على m.example.com)، مما كان يعني صيانة قاعدتي كود، والتعامل مع تكرار المحتوى، وإدارة عمليات إعادة التوجيه. حل التصميم المتجاوب هذه المشاكل بتقديم ثلاثة مكونات أساسية: الشبكات المرنة، والوسائط المرنة، واستعلامات الوسائط. معاً، تسمح هذه الأدوات لمستند HTML واحد بأن يقدم نفسه بشكل مناسب عبر جميع نوافذ العرض.

اليوم، التصميم المتجاوب ليس اختيارياً -- بل هو متطلب أساسي. تستخدم Google فهرسة الجوال أولاً، مما يعني أنها تقيّم بشكل أساسي نسخة الجوال من موقعك لترتيب البحث. يتوقع المستخدمون تجارب سلسة عبر الأجهزة، والشركات التي تفشل في توفيرها تفقد التفاعل والتحويلات.

وسم Viewport الوصفي

وسم viewport الوصفي هو أهم جزء من الترميز للتصميم المتجاوب. بدونه، ستعرض متصفحات الهاتف المحمول صفحتك بعرض سطح مكتب افتراضي (عادةً 980 بكسل) ثم تُقلص كل شيء ليتناسب مع الشاشة، مما ينتج عنه نص صغير غير مقروء. يخبر وسم viewport الوصفي المتصفح بكيفية التحكم في أبعاد الصفحة والتكبير.

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

دعنا نفصل كل جزء من خاصية content:

• width=device-width -- يضبط عرض نافذة العرض ليتطابق مع عرض شاشة الجهاز. على هاتف بعرض 375 بكسل CSS، ستكون نافذة العرض 375 بكسل، وليس 980 بكسل الافتراضية.
• initial-scale=1.0 -- يضبط مستوى التكبير الأولي عند تحميل الصفحة لأول مرة. القيمة 1.0 تعني بدون تكبير -- بكسل CSS واحد يساوي بكسل واحد مستقل عن الجهاز.

/* سيء -- يمنع التكبير، انتهاك لإمكانية الوصول */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

/* جيد -- يسمح بتكبير المستخدم */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

نهج الجوال أولاً مقابل سطح المكتب أولاً

عند بناء موقع متجاوب، يجب أن تقرر الاتجاه الذي تكتب منه CSS الخاص بك. هناك نهجان: الجوال أولاً وسطح المكتب أولاً. هذا الاختيار يؤثر بشكل جذري على كيفية هيكلة أوراق الأنماط واستعلامات الوسائط.

نهج سطح المكتب أولاً

في نهج سطح المكتب أولاً، تكتب CSS الأساسي للشاشات الكبيرة ثم تستخدم استعلامات max-width لتجاوز الأنماط للشاشات الأصغر تدريجياً. كان هذا النهج التقليدي قبل أن يصبح تصفح الهاتف المحمول مهيمناً.

/* الأنماط الأساسية: مصممة لسطح المكتب */
.container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
}

.sidebar {
    width: 300px;
}

.main-content {
    flex: 1;
}

/* تجاوز الأجهزة اللوحية */
@media (max-width: 1024px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }
    .sidebar {
        width: 250px;
    }
}

/* تجاوز الهاتف المحمول */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
}

نهج الجوال أولاً

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

/* الأنماط الأساسية: مصممة للهاتف المحمول */
.container {
    width: 100%;
    padding: 0 16px;
}

.sidebar {
    width: 100%;
    margin-bottom: 20px;
}

.main-content {
    width: 100%;
}

/* الأجهزة اللوحية: إضافة تخطيط جنباً إلى جنب */
@media (min-width: 768px) {
    .container {
        display: flex;
        gap: 30px;
        padding: 0 20px;
    }
    .sidebar {
        width: 250px;
        margin-bottom: 0;
    }
    .main-content {
        flex: 1;
    }
}

/* سطح المكتب: التوسع إلى العرض الأقصى */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .sidebar {
        width: 300px;
    }
}

لماذا يُنصح بنهج الجوال أولاً

يُنصح بشدة بنهج الجوال أولاً لعدة أسباب مقنعة:

• الأداء -- أجهزة الهاتف المحمول لديها معالجات واتصالات شبكة أبطأ. مع نهج الجوال أولاً، CSS الأساسي هو الأصغر والأبسط. الهواتف تحمّل فقط الأنماط الأساسية؛ ولا تحمّل أبداً تجاوزات سطح المكتب التي لا تحتاجها. في نهج سطح المكتب أولاً، يجب على الهواتف تحميل جميع أنماط سطح المكتب ثم تجاوزات الهاتف المحمول -- مما ينتج عنه المزيد من CSS للتحليل.
• التحسين التدريجي -- نهج الجوال أولاً يتبع بشكل طبيعي فلسفة التحسين التدريجي. تبدأ بتجربة أساسية تعمل في كل مكان، ثم تضيف تحسينات للأجهزة التي يمكنها التعامل معها. هذا يضمن أن كل مستخدم يحصل على تجربة وظيفية بغض النظر عن قدرات جهازه.
• أولوية المحتوى -- التصميم للشاشات الصغيرة أولاً يجبرك على تحديد أولويات المحتوى. مع المساحة المحدودة، يجب أن تقرر ما هو مهم حقاً. هذا الانضباط ينتج عنه تصميمات أنظف حتى على سطح المكتب لأنك حددت بالفعل المحتوى الأساسي.
• واقع حركة المرور -- أكثر من 60% من حركة مرور الويب العالمية تأتي من الأجهزة المحمولة. التصميم لغالبية المستخدمين أولاً أمر منطقي عملياً.
• تحسين محركات البحث -- تستخدم Google فهرسة الجوال أولاً، وتقيّم نسخة الجوال من موقعك لترتيب البحث. الموقع المبني بنهج الجوال أولاً يتوافق مباشرة مع كيفية زحف Google وترتيب الصفحات.
• CSS أبسط -- كود الجوال أولاً يميل لأن يكون أبسط. إضافة تعقيد التخطيط من خلال استعلامات min-width أكثر بديهية من إزالة التعقيد من خلال استعلامات max-width. أنت تبني بدلاً من أن تهدم.

التفكير بالمحتوى أولاً

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

1. جرد المحتوى -- اسرد كل جزء من المحتوى تحتاجه الصفحة: العناوين، والنص الأساسي، والصور، والفيديوهات، ودعوات الإجراء، والتنقل، والنماذج، وروابط التذييل.
2. تحديد الأولويات حسب الأهمية -- رتب كل عنصر محتوى حسب أهميته لأهداف المستخدم. العنوان الرئيسي ودعوة الإجراء الرئيسية يجب أن تكون في الأعلى؛ التنقل الثانوي وروابط وسائل التواصل الاجتماعي يمكن أن تأتي لاحقاً.
3. تصميم تخطيط العمود الواحد -- رتب المحتوى في تدفق عمود واحد عمودي بترتيب الأولوية. هذا هو تخطيط الهاتف المحمول الخاص بك. كل مستخدم، بغض النظر عن الجهاز، يرى المحتوى بهذا الترتيب المحدد الأولويات.
4. التحسين للشاشات الأوسع -- فقط عندما تنتقل إلى نقاط توقف أوسع تقدم تخطيطات متعددة الأعمدة وأشرطة جانبية وترتيبات أكثر تعقيداً. لكن أولوية المحتوى المحددة في الخطوة 2 تبقى الأساس.

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

التخطيطات المرنة مقابل الثابتة

فهم الفرق بين التخطيطات المرنة والثابتة أمر أساسي للتصميم المتجاوب.

التخطيطات الثابتة

التخطيط الثابت يستخدم قيم بكسل مطلقة للعرض. قد يكون الحاوي بعرض 960 بكسل أو 1200 بكسل بالضبط. إذا كانت نافذة العرض أضيق من العرض الثابت، يظهر شريط تمرير أفقي. كانت التخطيطات الثابتة شائعة قبل التصميم المتجاوب لكنها تُعتبر الآن قديمة لمعظم حالات الاستخدام.

/* ثابت: يتعطل على الشاشات الصغيرة */
.container {
    width: 960px;
    margin: 0 auto;
}

.sidebar {
    width: 300px;
    float: left;
}

.main-content {
    width: 660px;
    float: right;
}

التخطيطات المرنة

التخطيط المرن يستخدم عرضاً يعتمد على النسب المئوية (أو وحدات حديثة مثل vw) بحيث تتناسب العناصر بشكل متناسب مع نافذة العرض. قد يكون الحاوي بعرض 90% من نافذة العرض بدلاً من 960 بكسل ثابتة. التخطيطات المرنة تتكيف بسلاسة مع أي حجم شاشة بدون تمرير أفقي.

/* مرن: يتكيف مع أي حجم شاشة */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar {
    width: 30%;
}

.main-content {
    width: 65%;
}

الصور والوسائط المرنة

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

/* اجعل كل الصور متجاوبة افتراضياً */
img {
    max-width: 100%;
    height: auto;
}

/* نفس الشيء للفيديو والمحتوى المضمن */
video,
embed,
object {
    max-width: 100%;
    height: auto;
}

قاعدة max-width: 100% تخبر الصورة بألا تتجاوز أبداً عرض حاويها. إذا كان الحاوي بعرض 300 بكسل على الهاتف، ستتقلص الصورة إلى 300 بكسل. إذا كان الحاوي بعرض 800 بكسل على سطح المكتب، ستكون الصورة 800 بكسل (حتى عرضها الطبيعي). height: auto يضمن الحفاظ على نسبة العرض إلى الارتفاع -- الصورة تتناسب بشكل متناسب بدلاً من التشوه.

مجموعة أدوات التصميم المتجاوب

يعتمد التصميم المتجاوب للويب على ثلاث أدوات أساسية تعمل معاً. فهم كل منها وكيفية تفاعلها أمر ضروري:

1. الشبكات المرنة

بدلاً من أعمدة ثابتة العرض مُقاسة بالبكسل، تستخدم الشبكات المرنة وحدات نسبية (نسب مئوية، وحدات fr، وحدات vw) بحيث يتكيف التخطيط مع عرض نافذة العرض. CSS Grid وFlexbox الحديثان يجعلان الشبكات المرنة أسهل بكثير في التنفيذ من الشبكات القديمة المعتمدة على float.

/* بطاقات تتكيف تلقائياً مع المساحة المتاحة */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* لا حاجة لاستعلامات وسائط! الشبكة تضبط تلقائياً
   عدد الأعمدة بناءً على المساحة المتاحة.
   - شاشة ضيقة: عمود واحد
   - شاشة متوسطة: عمودان
   - شاشة واسعة: 3 أو 4 أعمدة */

2. الوسائط المرنة

يجب تقييد جميع عناصر الوسائط (الصور والفيديوهات والإطارات المضمنة وSVG) بحاوياتها. تقنية max-width: 100% الموصوفة أعلاه هي أبسط نهج. للسيناريوهات الأكثر تعقيداً، يمكنك استخدام خاصية object-fit، أو عنصر <picture>، أو خاصية srcset.

3. استعلامات الوسائط

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

/* 1. شبكة مرنة: عرض مبني على النسب المئوية */
.page-wrapper {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. وسائط مرنة: الصور تحترم الحاوي */
img {
    max-width: 100%;
    height: auto;
}

/* 3. استعلامات وسائط: ضبط التخطيط عند نقاط التوقف */
.content-area {
    width: 100%;  /* الهاتف: عرض كامل */
}

@media (min-width: 768px) {
    .content-area {
        display: flex;
        gap: 30px;
    }
    .main-content {
        flex: 2;
    }
    .sidebar {
        flex: 1;
    }
}

نقاط التوقف: الأحجام الشائعة وأفضل الممارسات

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

نقاط توقف مبنية على الأجهزة

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

• 320 بكسل -- هواتف صغيرة (iPhone SE، أجهزة قديمة)
• 375 بكسل -- هواتف قياسية (iPhone 12/13/14/15)
• 768 بكسل -- أجهزة لوحية في الوضع العمودي (iPad)
• 1024 بكسل -- أجهزة لوحية في الوضع الأفقي / حواسيب محمولة صغيرة
• 1200 بكسل -- حواسيب مكتبية قياسية
• 1440 بكسل -- حواسيب مكتبية كبيرة
• 1920 بكسل -- شاشات Full HD

نقاط توقف مبنية على المحتوى (مُنصح بها)

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

/* الأساس: أنماط الهاتف المحمول، عمود واحد */
.article-text {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 16px;
}

/* عندما تصبح السطور طويلة جداً للقراءة المريحة (~65 حرفاً) */
@media (min-width: 600px) {
    .article-text {
        max-width: 65ch;
        margin: 0 auto;
        padding: 0 24px;
    }
}

/* عندما يكون هناك مساحة كافية لشريط جانبي */
@media (min-width: 900px) {
    .page-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 40px;
    }
}

/* عندما يحتاج التخطيط لحد أقصى للعرض */
@media (min-width: 1280px) {
    .page-layout {
        max-width: 1200px;
        margin: 0 auto;
    }
}

أنماط التصميم المتجاوب

على مر السنين، ظهرت عدة أنماط تخطيط متجاوب مثبتة. فهم هذه الأنماط يساعدك في اختيار النهج المناسب لمحتواك. تحدد وثائق مطوري Google أربعة أنماط أساسية:

1. المرن في الغالب (Mostly Fluid)

نمط المرن في الغالب يستخدم تخطيطاً متعدد الأعمدة بعرض مرن على الشاشات الكبيرة ويتحول إلى عمود واحد على الشاشات الصغيرة. يضبط بشكل أساسي الهوامش والحشو عند نقاط التوقف. منطقة المحتوى الرئيسية تستخدم max-width لمنعها من التمدد بشكل كبير على الشاشات الكبيرة.

/* الهاتف: عمود واحد، عرض كامل */
.col {
    width: 100%;
    padding: 16px;
}

/* الأجهزة اللوحية: عمودان */
@media (min-width: 600px) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .col-main {
        width: 60%;
    }
    .col-side {
        width: 40%;
    }
    .col-full {
        width: 100%;
    }
}

/* سطح المكتب: عرض أقصى مع هوامش تلقائية */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
        margin: 0 auto;
    }
}

2. إسقاط الأعمدة (Column Drop)

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

/* الهاتف: كل الأعمدة متراصة */
.col-1, .col-2, .col-3 {
    width: 100%;
}

/* متوسط: عمودان، الثالث يسقط أسفل */
@media (min-width: 600px) {
    .wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .col-1 {
        width: 60%;
    }
    .col-2 {
        width: 40%;
    }
    .col-3 {
        width: 100%;
    }
}

/* كبير: ثلاثة أعمدة جنباً إلى جنب */
@media (min-width: 1024px) {
    .col-1 {
        width: 50%;
    }
    .col-2 {
        width: 25%;
    }
    .col-3 {
        width: 25%;
    }
}

3. تحويل التخطيط (Layout Shifter)

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

/* الهاتف: تراص بسيط */
.header, .content, .sidebar, .footer {
    width: 100%;
}

/* الأجهزة اللوحية: الشريط الجانبي ينتقل لليمين */
@media (min-width: 768px) {
    .page {
        display: grid;
        grid-template-areas:
            "header  header"
            "content sidebar"
            "footer  footer";
        grid-template-columns: 2fr 1fr;
    }
    .header  { grid-area: header; }
    .content { grid-area: content; }
    .sidebar { grid-area: sidebar; }
    .footer  { grid-area: footer; }
}

/* سطح المكتب: الشريط الجانبي ينتقل لليسار، التخطيط يتحول */
@media (min-width: 1200px) {
    .page {
        grid-template-areas:
            "sidebar header  header"
            "sidebar content content"
            "footer  footer  footer";
        grid-template-columns: 250px 1fr 1fr;
    }
}

4. خارج الإطار (Off Canvas)

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

/* الهاتف: التنقل مخفي خارج الشاشة */
.nav {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: #1a1a2e;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.nav.is-open {
    transform: translateX(280px);
}

.hamburger-btn {
    display: block;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
}

/* سطح المكتب: التنقل مرئي دائماً */
@media (min-width: 1024px) {
    .nav {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        transform: none;
    }

    .hamburger-btn {
        display: none;
    }
}

التحسين التدريجي

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

عملياً، التحسين التدريجي للتصميم المتجاوب يعني:

• HTML أولاً -- المحتوى قابل للقراءة والتنقل بمجرد HTML فقط، بدون الحاجة لـ CSS أو JavaScript.
• CSS أساسي -- إضافة تنسيق أساسي يعمل على جميع الشاشات: الخطوط والألوان والمسافات. هذا هو تخطيط العمود الواحد للهاتف المحمول.
• CSS مُحسّن -- استخدام استعلامات الوسائط لإضافة تخطيطات متعددة الأعمدة وخطوط أكبر ومعالجات بصرية أغنى للشاشات الأوسع.
• استعلامات الميزات -- استخدام @supports لإضافة CSS متقدم (مثل Grid أو subgrid) فقط للمتصفحات التي تدعمه، مع توفير بديل أبسط للمتصفحات القديمة.
• تحسينات JavaScript -- إضافة ميزات تفاعلية مثل الكاروسيلات والنوافذ المنبثقة والرسوم المتحركة للمتصفحات التي تدعمها، مع ضمان عمل المحتوى الأساسي بدون JavaScript.

/* الأساس: يعمل في جميع المتصفحات */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    width: 100%;
}

@media (min-width: 768px) {
    .card {
        width: calc(50% - 10px);
    }
}

/* تحسين: استخدام CSS Grid إذا كان مدعوماً */
@supports (display: grid) {
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .card {
        width: auto; /* Grid يتحكم في الحجم */
    }
}

سير عمل عملي للجوال أولاً

إليك سير عمل خطوة بخطوة لبناء صفحة متجاوبة باستخدام نهج الجوال أولاً. اتباع هذا السير باستمرار سيساعدك في إنشاء تصميمات متجاوبة جيدة البنية وسهلة الصيانة:

الخطوة 1: البدء بـ HTML دلالي

اكتب HTML أولاً، بدون أي تنسيق. ركز على تسلسل المحتوى والعناصر الدلالية وإمكانية الوصول. تأكد من أن الصفحة قابلة للقراءة والاستخدام كـ HTML عادي بدون أي تنسيق. هذا هو خط الأساس النهائي.

الخطوة 2: إضافة أنماط الهاتف الأساسية

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

/* الخطوط والألوان الأساسية */
:root {
    --primary: #2563eb;
    --text: #1f2937;
    --bg: #ffffff;
    --spacing: 16px;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0;
}

/* تخطيط عمود واحد */
.container {
    width: 100%;
    padding: 0 var(--spacing);
}

/* تراص جميع الأقسام */
.hero, .features, .about, .contact {
    padding: var(--spacing) 0;
}

/* التنقل: قائمة عمودية بسيطة على الهاتف */
.nav-list {
    list-style: none;
    padding: 0;
}

.nav-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

الخطوة 3: إضافة نقطة توقف الأجهزة اللوحية

وسّع متصفحك حتى يبدأ التخطيط في الظهور بشكل محرج. عادةً حوالي 600-768 بكسل، ستحتاج لتقديم بعض الترتيبات متعددة الأعمدة وزيادة المسافات وضبط الخطوط.

@media (min-width: 768px) {
    :root {
        --spacing: 24px;
    }

    .container {
        max-width: 720px;
        margin: 0 auto;
    }

    /* شبكة ميزات بعمودين */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* تنقل أفقي */
    .nav-list {
        display: flex;
        gap: 20px;
    }

    .nav-list li {
        padding: 0;
        border-bottom: none;
    }
}

الخطوة 4: إضافة نقطة توقف سطح المكتب

استمر في التوسيع. حوالي 1024-1200 بكسل، من المرجح أنك تحتاج لحاوي أوسع وخطوط أكبر وشبكات بثلاثة أو أربعة أعمدة وأشرطة جانبية ومسافات بيضاء أكثر سخاء.

@media (min-width: 1024px) {
    :root {
        --spacing: 32px;
    }

    body {
        font-size: 1.125rem;
    }

    .container {
        max-width: 1100px;
    }

    /* ميزات بثلاثة أعمدة */
    .features-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
    }

    /* تخطيط جنباً إلى جنب للمحتوى + شريط جانبي */
    .page-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 40px;
    }
}

الخطوة 5: الاختبار عبر الأجهزة

استخدم أدوات المطور في المتصفح للاختبار عند عروض نوافذ عرض متنوعة. تحقق من كل انتقال لنقطة توقف. اختبر على أجهزة حقيقية إن أمكن. انتبه لأهداف اللمس (44×44 بكسل على الأقل)، وقابلية قراءة النص، وما إذا كان أي محتوى مخفياً أو مقطوعاً.

الخطوة 6: التحسين والتنقيح

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