النهج الأمثل لتصميم الويب المتجاوب: هل تبدأ بالهاتف أم سطح المكتب؟

مقدمة: جدل النهج المتجاوب في تصميم الويب

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

لقد أجريتُ مؤخراً استطلاعاً للرأي على تويتر، وكانت النتائج مفاجئة حقاً. لم أتوقع فقط أن تكون النتائج معكوسة تماماً، بل كنت أعتقد أن نهج Mobile-First (الهاتف أولاً) سيحظى بما لا يقل عن 80% من الأصوات.

كما يوضح الرسم البياني، فاز نهج Desktop-First (سطح المكتب أولاً) بأكثر من 61% من الأصوات! في الردود، أوضح بعض المشاركين أسباب تفضيلهم للبدء بتصميم سطح المكتب. يمكن تلخيص الأسباب الرئيسية في النقاط التالية:

• هذا هو كل ما قدمه المصمم (Designer).
• هذه هي طريقة عمل فريقهم.
• تعلموا لغة CSS بهذه الطريقة.
• الموقع مخصص لسطح المكتب فقط، لذا بدا هذا هو التطور الطبيعي.
• العملاء يرغبون في رؤية نسخة سطح المكتب أولاً.

فهم النهجين: Mobile-First مقابل Desktop-First

لفهم الجدل بشكل أعمق، دعنا نوضح ما يعنيه كل نهج بالتحديد.

ما هو نهج Mobile-First؟

يعني نهج Mobile-First أننا نبدأ بكتابة أكواد CSS الخاصة بنا للأجهزة المحمولة أولاً، ثم نستخدم استعلامات الوسائط (Media Queries) لإضافة الأنماط والتصميمات لأحجام الشاشات الأكبر. بشكل عام، هذا يعني أن استعلامات الوسائط تستخدم خاصية min-width.

نحن نستخدم استعلامات الوسائط لإضافة أو تجاوز الأنماط لنقطة توقف (breakpoint) محددة وما هو أكبر منها، مثل هذا المثال:

.sales-points { padding : 3em 0 ; } @media ( min-width: 600px ) { .sales-points { display : flex; justify-content : space-between; } }

في هذا المثال، بالنسبة للشاشات الصغيرة، نطبق ببساطة بعض المسافات الداخلية (padding). بافتراض أن هذا القسم من الموقع يحتوي على عناصر فرعية، فإننا نحول هذه العناصر إلى أعمدة عند عرض لا يقل عن 600px. لذلك، عندما يكون عرض إطار العرض (viewport) 600px أو أكبر، سيكون لدينا أعمدة. وفي بقية الأوقات (الشاشات الأصغر)، تتكدس العناصر فوق بعضها البعض بشكل افتراضي.

ما هو نهج Desktop-First؟

كما خمنت على الأرجح، فإن نهج Desktop-First هو العكس تماماً. تُكتب أكواد CSS الخاصة بنا للشاشات الكبيرة أولاً، ثم نستخدم استعلامات الوسائط لإجراء تغييرات على الأحجام الأصغر، وعادةً ما نستخدم استعلامات وسائط max-width.

لماذا يُعد نهج Mobile-First الخيار الأمثل؟

على الرغم من نتائج الاستطلاع، هناك أسباب قوية تدفع المطورين المحترفين لتبني نهج Mobile-First. دعنا نستعرضها.

الاستجابة الطبيعية للمواقع

المواقع الإلكترونية تكون متجاوبة بشكل طبيعي حتى قبل أن نكتب سطراً واحداً من أكواد CSS. إذا قمت بإزالة ملف CSS من أي صفحة على الإنترنت، حتى لو كان موقعاً صُمم خصيصاً لحجم شاشة معين في عام 2001، فستجد أن لديك الآن موقعاً متجاوباً وصديقاً للجوال!

تعقيد أنماط سطح المكتب

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

حتى لو كان لديك موقع ويب بسيط جداً، لا ترغب في أن يمتد النص من جانب إلى آخر. انظر كيف سيبدو مقال هنا على أخبار FCC News إذا امتد النص من جانب إلى آخر:

يمكننا جميعاً أن نتفق على أنك لن تقرأ شيئاً كهذا أبداً، أليس كذلك؟ يجب أن أحرك رأسي قليلاً من اليسار إلى اليمين لقراءة سطر كامل على شاشتي. إنه أمر فظيع.

بساطة تخطيطات الهاتف المحمول

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

بالنسبة للعديد من المواقع، بمجرد إعداد الطباعة (typography) الخاصة بك، تكون قد أنجزت 70% من العمل. أشياء مثل:

• font-family
• font-size
• font-weight
• margin (على عناصر النص الخاصة بك)

بعد ذلك، يمكنك الانتقال وإجراء بعض أنماط التخطيط الأساسية جداً على عناصر التخطيط الخاصة بك، مثل:

• padding
• background-color
• color
• وربما بعض التعديلات باستخدام margin

في هذه المرحلة، ستبدو الأمور جيدة جداً من منظور التخطيط على الشاشات الصغيرة. هذا يعني، دون كتابة أي استعلام وسائط واحد، أن لديك موقعاً وظيفياً بالكامل على الهاتف المحمول. إذا كنت تشعر بالكسل بشكل خاص، أو لديك موقع بسيط جداً، يمكنك وضع max-width على الحاوية (container) الخاصة بك والانتهاء من الأمر برمته دون الحاجة إلى القلق بشأن استعلام وسائط على الإطلاق!

في معظم الأحيان، نرغب في تحسين التصميم لأحجام الشاشات الأكبر، ولهذا السبب أشعر أن Mobile-First هو الطريق الصحيح. إنه التطور الطبيعي للأعلى.

تقليل تكرار الأكواد

دعنا نقارن بين نهجي Mobile-First و Desktop-First باستخدام مثال عملي. في CodePen، تم تجميع تخطيط بسيط جداً باستخدام كلا النهجين. إذا فتحت الرابط وقمت بتغيير حجم إطار العرض، فسترى أن النتيجة النهائية هي نفسها تماماً. ولكن إذا كانت النتيجة النهائية باستخدام أي من النهجين هي نفسها تماماً، فلماذا يهم أي نهج تتبعه؟

يمكن أن يؤدي نهج Desktop-First إلى أكواد زائدة عن الحاجة. في المثال أعلاه، يستخدم نهج Desktop-First الكود التالي:

/* desktop-first */ .desktop-first .sales-points { display : flex; justify-content : space-between; } .desktop-first .sales-point { width : 30% ; } @media ( max-width: 600px ) { .desktop-first .sales-points { display : block; } .desktop-first .sales-point { width : 100% ; } }

كما ترى في CodePen، يعمل بشكل جيد تماماً، ولكن هناك مجموعة من الأكواد هنا التي أصبحت زائدة عن الحاجة عندما نستخدم نهج Desktop-First. لاحظ كيف نعلن أولاً عن display: flex فقط لإعادته إلى القيمة الافتراضية display: block في استعلام الوسائط. أيضاً، بالنسبة لأعمدتنا، نغير width ثم، مرة أخرى، نعود إلى القيمة الافتراضية لاحقاً.

يحتوي نهج Mobile-First على أكواد زائدة عن الحاجة أقل بكثير. لأنه لم يكن هناك أي تنسيق للنص أو ألوان الخلفية، لا يوجد تنسيق باستثناء ما أحتاجه في استعلامات الوسائط الخاصة بي!

/* mobile-first */ @media ( min-width: 600px ) { .mobile-first .sales-points { display : flex; justify-content : space-between; } .mobile-first .sales-point { width : 30% ; } }

تجنب إعادة تعيين الأنماط

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

في نهج Desktop-First، يجب أن أتعامل مع كليهما لأنني بحاجة إلى إعادة تعيين الأشياء إلى حالتها الافتراضية. حقيقة أنني أعيد تعيين أشياء مثل display و width إلى حالتها الافتراضية، بالنسبة لي، هي علامة حمراء. هذا يعني أنني أكتب شيئاً كان يمكن تجنبه. هذا يعني أنني أضيع وقتي.

متى قد تختلف القاعدة؟ استثناءات ومرونة في التصميم

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

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

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

خطوات عملية للبدء بنهج Mobile-First

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

• ابدأ بالطباعة (typography).
• أضف الألوان والمسافات الداخلية (padding).
• ضع أي شيء يتعلق بالتخطيط (layout) داخل استعلام وسائط min-width.

عند الانتهاء من تخطيطك، لن تكون قد أنجزت فقط نسخة سطح المكتب التي يتوق عميلك لرؤيتها، بل ستكون قد قطعت 90% من الطريق في نسختك المحمولة أيضاً، دون أن تفكر في الأمر حقاً.

تطوير مهاراتك في التصميم المتجاوب

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

الخلاصة التقنية

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