320 و 768 و 1024. هل تعني هذه الأرقام أي شيء لك؟
لا ، إنها ليست شفرة دافنشي ، وإنما هي عرض بالبكسل يربط العديد من المصممين بعرض شاشة الجوال والكمبيوتر اللوحي وسطح المكتب.
المشكلة التي أواجهها في هذا هي أن جوالي لا يتسع لـ 320 بكسل ، ولا يكون الجهاز اللوحي بعرض 768 بكسل ، وأن شاشة سطح المكتب ليست بعرض 1024 بكسل. هناك المئات من أحجام الشاشات المختلفة على مجموعة متنوعة من الأجهزة المختلفة ومع ذلك ما زلنا نفكر في تصميم الويب التفاعلي مثل 320 و 768 و 1024.
لقد شاهدت العديد من المواقع التي تستخدم نقاط التوقف الثلاث هذه لتصاميمها وببساطة إنشاء 3 تخطيطات ثابتة تتمركز في أقرب عرض.
هذا أفضل من امتلاك موقع قديم ، ثابت ، سطح المكتب فقط ، حيث إنه على الأقل يخدم عمودًا واحدًا ، إصدارًا مبسطًا للجوال وإصدارًا سهل اللمس للجهاز اللوحي ، ثم لماذا تنفصل جميع أحجام الشاشات الأخرى عن طريق عدم نقلها إلى الاعتبار؟
هل سيظل التصميم يعمل على الأحجام الأخرى ولكن ماذا يحدث عندما يكون لديك جهاز لوحي أصغر من 768؟ سيحصلون على تجربة الجوّال على جهاز لوحي! وعند عرضها على شاشة كمبيوتر محمول أصغر من 1024؟ سنرسل لهم تخطيط الجهاز اللوحي ونضحك لعدم وجود واحد من أحجام الشاشات الثلاث التي اعتبرناها جديرة.
عند إنشاء التخطيطات المتجاوبة ، يجب أن تهدف دائمًا إلى تعيين أكبر عدد ممكن من أبعادك بالنسب المئوية. يساعد هذا على ضمان نمو المحتوى الخاص بك وتقليصه بالتساوي من خلال أحجام مختلفة للشاشة ، وسيقوم بذلك بما يتناسب مع الجهاز الذي يتم عرضه عليه. يضمن هذا النهج أيضًا أن المحتوى الخاص بك يملأ دائمًا 90٪ (أو بقدر ما تحدده) من الشاشة بدلاً من 50٪ على الأرجح من الشاشة نظرًا لأن المحتوى يتمركز في حجم الشاشة الذي يمثل عددًا قليلاً من وحدات البكسل أقل من التالي نقطة التوقف المتاحة.
عند اختيار نقاط التوقف ، يجب دائمًا اتخاذ قراراتك استنادًا إلى الأماكن التي ينقطع فيها المحتوى وليس عرض شاشة الجهاز. بدلاً من إنشاء تصميم ثم تعديله ليلائم شاشة iPad بشكل مريح ، يجب عليك معرفة عرض المحتوى الخاص بك في صراع.
أميل إلى البدء بتصميم 1400 واسعًا وبسرعة جعل المتصفح أصغر حتى يكسر جزء من المحتوى التخطيط أو يقترب من القيام بذلك. ثم يحدد نقطتي التالي. لا يهم ما إذا كان في 1200 أو 800 أو 673 ، إذا كان المحتوى لا يزال يعمل فلماذا تغيير التخطيط؟
سوف تجد أنك سوف ينتهي بك الأمر مع نقاط توقف غريبة مثل 477 أو 982 وأنك قد يكون لديك 2 أو 6 أو 10 نقاط توقف مختلفة. الهدف هو أن يقرر المحتوى بدلاً من أحجام الشاشات المقصودة التي ترغب في عرضها.
مع مجموعة من الأجهزة المختلفة وأحجام الشاشة التي يتم إصدارها كل شهر ، من المستحيل تحديد مجموعة من نقاط التوقف المحددة لمشاريعنا المتجاوبة. والحقيقة هي أنه في حين أننا نستخدم متغيرًا مثل عرض الشاشة لتحديد التخطيطات المتجاوبة ، فإننا سنناضل من أجل تقديم تخطيط مثالي لكل حجم مختلف ولكن من خلال اتباع بعض النصائح الواردة أعلاه ، يمكننا على الأقل التأكد من أن المحتوى يتم عرضه دائمًا بأفضل شكل ممكن.
ما نقاط التوقف التي تستخدمها عادة؟ هل تتفادى نقاط التوقف تمامًا؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة تحميل واسعة عبر Shutterstock.