لماذا عليك أن تبدأ في ممارسة تطوير الجوال أولاً

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

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

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

لكن لا تخف! إن أول تطوير للجوال موجود هنا ليوفر لك المتاعب ، واستثناءات الاستثناءات ، وتحميل الصفحات البطيء.

ماذا يحدث مع مطور برامج سطح المكتب أولاً

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

من خلال التطوير للشاشات الكبيرة ثم إضافة أنماط الهاتف إلى أسفل مستند CSS ، تظهر مشكلتان:

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

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

دعنا نلقي نظرة على بعض الحلول لهذه المشاكل.

كيف يبدو عرض الجهاز المحمول

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

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

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

1. اقرأ النمط الأول.
2. قم بتنزيل الصورة الكبيرة (التي سيتم استبدالها قريبًا).
3. تجسيد العنصر.
4. اقرأ أسلوب الهاتف المحمول.
5. قم بتنزيل الصورة الصغيرة (لتحل محل الصورة الكبيرة).
6. تقديم العنصر مرة أخرى.

ومع ذلك ، إذا تم استخدام طريقة Mobile-first ، فسيتم عرض الجهاز بالترتيب التالي:

1. اقرأ النمط الأول.
2. قم بتنزيل الصورة الصغيرة.
3. تخطي تصميم سطح المكتب فقط (لأنه لا ينطبق).
4. تقديم العنصر مرة واحدة.

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

لاحظ أن استعلامات الوسائط ستتغير من max-width إلى min-width مع تطوير الجوال أولاً. سيتم تطبيق استعلامات الحد الأقصى للعرض على جميع الأجهزة الأصغر من 1000 بكسل ، بينما سيتم تطبيق استعلامات الحد الأدنى للعرض على الأجهزة التي يزيد حجمها عن 1000 بكسل.

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

توقف عن محاربة نفسك

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

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

نظرًا لأننا أنشأنا موقعنا باستخدام طريقة سطح المكتب أولاً ، فإن CSS الخاص بنا سيبدو هكذا لعنصر .header الخاص بنا:

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

أولاً ، دعنا ننتقل إلى نهج المحمول أولاً. سنجعل الجوّال أسلوبنا الافتراضي غير المستفسر عن الوسائط (ملاحظة: لا تفعل ذلك في الإنتاج ، فسوف يكسر الموقع ويجعل عملاءك غاضبين).

دعنا نلقي نظرة على صورنا مرة أخرى حيث أن ذلك له أكبر تأثير على سرعة موقعنا.

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

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

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

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

اعمل بذكاء وليس بجهد أكبر

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

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

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