3 كوارث التصميم السريع الاستجابة - وكيفية تجنبها
تُعد أساليب التصميم المتجاوبة مفيدة جدًا للمطورين لأنها تسمح لنا بعرض المحتوى على أوسع نطاق من الأجهزة دون الحاجة إلى الاحتفاظ بإصدارات منفصلة من الموقع وبدون بعض العيوب السلبية على طرق أخرى مثل التقشير والتنسيقات السائلة.
هذه المقالة ستسلط الضوء على مصممي الأخطاء الثلاثة الكبار الذين يواجهون التصاميم سريعة الاستجابة ، وستوفر بعض الاستراتيجيات لتجنب هذه الأخطاء.
قياس مقابل السائل مقابل الاستجابة
هناك الكثير من الارتباك حول هذه المصطلحات وغالبا ما يستخدمها المصممون بشكل غير صحيح بالتبادل. في الحقيقة ، كل واحدة من هذه هي خطوات تطورية متميزة في تقنية التخطيط التي ظهرت مع مرور الوقت بما يتماشى مع التقدم في التكنولوجيا.
تم تصميم تخطيط المقياس لتغيير حجم كل عنصر بالنسبة إلى كل عنصر آخر . فهي مستجيبة بمعنى أنها ستقوم بقياس المحتوى ديناميكياً استجابة للتغيرات في حجم إطار العرض. يظل التخطيط نفسه ثابتًا ، حيث يغير حجم كل عنصر للحفاظ على مظهر ثابت.
أعلاه: مثال لتخطيط القياس بمقاييس مختلفة: تصميم يضحى بالقابلية للتوافق.
تختلف تخطيطات السائل لأنهم يقيسون عناصر الحاوية بالنسبة إلى حجم إطار العرض . يتم تحقيق ذلك باستخدام وحدات نسبية مثل نظام الإدارة البيئية للتغلب على مشكلة تقلص النص. يمكن كسر التصميم من قبل المستخدم قياسه.
أعلاه: مثال لتخطيط مرن بحلقات مختلفة: التضحية بالتصميم للتوافق مع القراءة.
لا تستجيب التصميمات المتجاوبة لأي شيء. بدلاً من ذلك ، يتم تغيير ما يتم عرضه بناءً على حجم إطار العرض.
أعلاه: مثال على تخطيط متجاوب بدقة مختلفة.
الكوارث 1) القوائم التفاف
إذا كنت تستخدم شريط تنقل في أعلى صفحتك ، فمن المفترض أن يقوم التصميم المتجاوب "بدمجها" إلى تنسيق مدمج أكثر عند عرض الصفحة على شاشة صغيرة. ولكن هذا لا يعمل دائمًا بشكل مثالي إذا كانت مساحة العرض أوسع من نقطة الفاصل ، ولكنها صغيرة جدًا لعرض جميع عناصر القائمة في سطر واحد. والنتيجة هي قائمة تلتف.
هنالك العديد من الطرق لحل هذه المشكلة. الأول هو تقليل عدد العناصر المعروضة أفقيًا على شريط التنقل عن طريق تصنيفها إلى فئات وفئات فرعية. يمكنك بعد ذلك استخدام العناصر المنسدلة لعرض الفئات الفرعية عند تحديد فئة.
الطريقة الثانية هي تغيير نقطة الفاصل إلى قيمة أقل. العدد الفعلي المطلوب هو العرض الذي يبدأ عنده شريط التنقل بالفشل ، وليس حجمًا محددًا للجهاز.
الطريقة الثالثة هي استخدام قائمة مختلفة للأجهزة ، مثل الدرج المنزلق.
الكارثة 2) استخدام الصور ذات العرض الثابت
يتم تعيين مناطق المحتوى عادةً على حجم متعلق بإطار العرض. لذلك عندما تكون الصورة ذات العرض الثابت أكبر من حجم المساحة ، يحدث اقتصاص للصورة.
أعلاه: مثال على صورة ثابتة ذات عرض ثابت أكبر من اللازم: الآن تحتوي على أشرطة تمرير ومحتوى يتم دفعه خارج الشاشة.
يمكنك تجنب هذه المشكلة عن طريق استخدام الوحدات النسبية لتعيين عرض الصورة ، أو إذا كنت تستخدم إطارًا يدعمها (مثل Bootstrap) ، يمكنك استخدام فئة صور سريعة الاستجابة (مثل: class = "img-responsive" ).
أعلاه: نفس العنصر باستخدام أسلوب فئة الصورة المتجاوب: تم قطع شريط التمرير الآن.
الكارثة 3) تشويه العنصر
هذا واحد أكثر غامضاً قليلاً ، ولكن ما يحدث عندما يظهر تخطيطك على منفذ عرض صغير هو أن أي أعمدة غير معالجة تتصرف مثل الصفوف. هذه مشكلة لأن تشويه المحتوى يغير التسلسل الهرمي للتصميم دون قصد.
أعلاه: يصبح العمود صفًا ويشوه المحتوى.
الحل واضح ، ومع ذلك فإنه من المستغرب كم من الناس يعانون من ذلك: ببساطة تعيين الارتفاع والعرض وحشو العنصر بشكل صريح. إذا تحركت خارج الموضع وتغطي عناصر أخرى ، يمكنك إجبارها على أن تكون حيث تريد عن طريق التفافها في div وتحديد هوامش.
التخطيط يساعد على تجنب الأخطاء
لقد ناقشنا هذه المقالة فقط 3 حالات للتصدي استجابة الأكثر شيوعا واجهتها ، ولكن هناك الكثير من الطرق الأخرى لخطأ التصميم الجيد. منع الأخطاء ليست صعبة للغاية. تحتوي المتصفحات الحديثة على اختبار تخطيط سريع الاستجابة ، لذا خطط تصميمك جيدًا واختبره كثيرًا.