كيف تتخذ النهج الصحيح لتصميم الويب سريع الاستجابة

لقد أجريت استطلاعًا على Twitter منذ فترة ، وقد فاجأتني النتائج.

لم أتوقع أن تكون النتائج في الاتجاه المعاكس فحسب ، بل اعتقدت أن الهاتف المحمول أولاً سيحصل على 80٪ على الأقل من الأصوات .

أظهر استطلاع على تويتر أن 61.5٪ من الناس يكتبون سطح المكتب أولاً ، مع 2212 صوتًا

في الردود ، أوضح بعض الأشخاص سبب كتابتهم لسطح المكتب أولاً. المحاور العامة لتلك الأسباب:

  • هذا كل ما قدمه المصمم
  • هذه هي الطريقة التي عمل بها فريقهم
  • لقد تعلموا CSS كتابتها لسطح المكتب فقط ، لذلك بدا هذا مثل التقدم الطبيعي
  • العملاء يريدون رؤية إصدار سطح المكتب

ما هو Mobile-First

Mobile-first عندما نبدأ بكتابة CSS للأجهزة المحمولة ثم نستخدم استعلامات الوسائط لإضافة التصميم لأحجام الشاشات الأكبر .

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

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

في هذا المثال ، بالنسبة للشاشات الصغيرة ، نقوم ببساطة بتطبيق بعض الحشو. بافتراض أن هذا القسم من الموقع يحتوي على أطفال فيه ، فإننا نحول هؤلاء الأطفال إلى أعمدة بعرض أدنى يبلغ 600px.

لذلك عندما يكون إطار العرض 600pxأو أكبر ، سيكون لدينا أعمدة. بقية الوقت ، تتراكم الأشياء.

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

لماذا يعتبر Mobile-First أسهل

تستجيب مواقع الويب بشكل طبيعي قبل أن نكتب سطرًا واحدًا من CSS .

إذا قمت بإزالة CSS من أي صفحة على الإنترنت ، حتى أن بعض المواقع تم إنشاؤها لحجم شاشة محدد للغاية في عام 2001 ، فلديك الآن موقع ويب سريع الاستجابة ومتوافق مع الأجهزة المحمولة!

تميل أنماط سطح المكتب إلى أن تكون أكثر تعقيدًا

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

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

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

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

تميل تخطيطات الأجهزة المحمولة إلى أن تكون بسيطة للغاية ، مما يجعل البدء فيها أمرًا سهلاً للغاية

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

بالنسبة للعديد من المواقع ، بمجرد إعداد أسلوب الطباعة الخاص بك ، تكون 70٪ من الطريق إلى هناك. اشياء مثل:

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

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

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

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

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

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

مقارنة بين الجوّال أولاً وسطح المكتب أولاً

يوجد أدناه CodePen الذي يحتوي على تخطيط بسيط للغاية تم وضعه معًا باستخدام نهج سطح المكتب أولاً والأول للهاتف المحمول.

إذا فتحت القلم ولعبت بحجم منفذ العرض ، فسترى أن النتيجة النهائية هي نفسها تمامًا.

ولكن إذا كانت النتيجة النهائية باستخدام أي من الطريقتين متطابقة تمامًا ، فلماذا يهم النهج الذي تتبعه؟

يمكن أن يؤدي 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 ، فهو يعمل بشكل جيد تمامًا ، ولكن هناك مجموعة من التعليمات البرمجية هنا والتي أصبحت زائدة عن الحاجة عندما نستخدم نهج سطح المكتب أولاً.

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

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

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

يجب أن تكون العودة إلى الإعدادات الافتراضية علامة حمراء

أدرك أن بعض الأشياء أكثر تعقيدًا من هذا (وسنصل إلى هناك قريبًا) ، لكن معظم ما يقلقني هنا هو من منظور التخطيط.

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

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

بعض الأشياء ليست بهذه البساطة

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

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

إذا قمت بالنقر فوق تشغيل على الفيديو ، فيجب أن يبدأ مباشرة حيث أعالج هذه المشكلة إذا كنت ترغب في رؤيتها أثناء العمل (17:41 فقط في حالة عدم بدء تشغيله في المكان الصحيح).

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

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

  1. ابدأ بالطباعة
  2. أضف الألوان والحشو
  3. ضع أي تخطيط مرتبط min-widthباستعلام وسائط

عندما تنتهي من التخطيط الخاص بك ، لن تكون فقط قد ألغيت إصدار سطح المكتب الذي يتوق عميلك لرؤيته ، ولكنك ستصل إلى 90٪ في هاتفك المحمول أيضًا ، دون التفكير حقًا حوله.

هل تواجه صعوبة في جعل الأشياء تستجيب؟

Making websites responsive is a topic that a lot of people tell me they struggle with. To help, I've created a free course called Conquering Responsive Layouts. It's put together as a 21-day challenge in which we'll cover a topic a week, with each one adding onto what we already learned.

I realize that we're all busy with kids, family, work, and more, so each day will only be 10-30 minutes worth of lessons, with 2-3 lessons a week. In between you'll have small challenges to complete, working your way up to being comfortable making responsive layouts.

The course is launching on the 13th of April and because it's a 21-day course, the doors close on that day. Click here to sign up to start conquering responsive layouts!

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