قبل أن تمضي وقتًا طويلاً في التفكير في دقة الشاشة الدقيقة لتصميمك ، يجب أن تتذكر أن جميع تصميمات الويب الحديثة سريعة الاستجابة ، مما يعني أنها مصممة للتكيف عبر مختلف دقة الشاشة. بتصميم واحد ، تحتاج إلى دعم كل شيء بدءًا من أصغر شاشات الأجهزة المحمولة وحتى شاشات سطح المكتب فائقة الدقة.
مع تصميم ويب سريع الاستجابة، يمكنك إنشاء تنسيقات أكثر عمومية للجوال والجهاز اللوحي وسطح المكتب. يتم تحديد متى وكيف يتم تبديل كل عنصر صفحة إلى مكانه لهذه التخطيطات من خلال نقاط فصل خاصة مكتوبة في ملف CSS. يتم تحديد نقاط التوقف هذه من خلال بعض درجات دقة الشاشة الشائعة.
على الرغم من أنك لن تستهدف قرارات محددة أو تقوم بإعداد حجم ثابت لتصميماتك ، فسوف تفكر في الشاشة قرارات في إنشاء نقاط توقف وإنشاء انتقالات سلسة بحيث يبدو موقعك جيدًا عبر كل جهاز و حجم الشاشة.
قرارات سطح المكتب المشتركة
- دقة عالية قياسية تبلغ 1280 × 720 - قد تعرف هذا أفضل مثل 720 بكسل. كانت الدقة القياسية عالية الدقة عندما أصبحت الدقة العالية أول مرة شائعة. ربما لن تجد العديد من الشاشات الجديدة باستخدام هذا القرار ، ولكن لا يزال هناك الكثير منها في البرية منذ أن كانت أكثر شهرة.
- 1366 × 768 - إنها دقة غير عادية ، لكنها تحظى بشعبية كبيرة في أجهزة الكمبيوتر المحمولة الصغيرة وبعض الأجهزة اللوحية. إذا كنت تتعامل مع الطرف السفلي أجهزة Chromebook، هناك فرصة جيدة أن يكون هذا هو الحل الذي تستهدفه.
- 1920x1080 الأكثر شيوعًا - عندما تفكر في أجهزة سطح المكتب ، فمن المحتمل أنك تتعامل مع 1920x1080 ، والمعروف باسم 1080p. هذا القرار في كل مكان على الإطلاق. لا تزال معظم شاشات سطح المكتب بدقة 1080 بكسل ، والكثير من أجهزة الكمبيوتر المحمولة بالحجم الكامل كذلك. ستجد أيضًا حصة مناسبة من الأجهزة اللوحية بدقة 1080 بكسل في المناظر الطبيعية أيضًا.
- 2560 × 1440 - 1440p هي أرضية وسطية غريبة أخرى في صورة دقة الشاشة. إنها أعلى مما قد تفكر فيه 2 كيلو ، لكنها ليست 4 كيلو. ومع ذلك ، فهو حل شائع في سوق شاشات الألعاب ، وهو بديل ميسور التكلفة للحصول على دقة 4k كاملة. اعتمادًا على موقعك ، قد يكون أو لا يستحق دعم 1440p.
- 3840x2160 المستقبل القريب - هذا كامل 4k أو Ultra HD. في حين أن 4k عادة ما تكون مخصصة لأجهزة الكمبيوتر الشخصية المتطورة الآن ، فإن الأسعار آخذة في الانخفاض ، وتقنية الرسومات تتحسن ، والطلب على 4K مدفوع من قبل سوق التلفزيون ، حيث يكون أكثر شيوعًا. من الآمن أن نفترض أنه خلال السنوات القليلة المقبلة ، سيتفوق 4K بسهولة على 1080 بكسل كمعيار واقعي ، لذلك يستحق بالتأكيد حساب 4K الآن.
الكمبيوتر اللوحي / قرارات المناظر الطبيعية المشتركة
قد لا تكون الأجهزة اللوحية شائعة كما كانت من قبل ، ويبدو أن زيادة أحجام الهواتف المقترنة بأجهزة الكمبيوتر المحمولة القابلة للتحويل قد خفضت بشكل كبير من حصتها في السوق. ومع ذلك ، فإن حساب دقة الجهاز اللوحي يتداخل بشكل كبير مع أجهزة الكمبيوتر المكتبية والمحمولة. قد تكون قادرًا على استخدام نقاط توقف الجهاز اللوحي لإنشاء نقاط توقف لبعض العناصر المزعجة التي لا تتناسب مع دقة معينة.
- يجب أيضًا أن تأخذ دقة الجهاز اللوحي في الاعتبار للأجهزة التي يتم الاحتفاظ بها في الوضع الرأسي. لن يتصفح الجميع على جهازهم اللوحي المثبت في الوضع الأفقي ، لذا يجب إضافة نقطة توقف واحدة على الأقل للكمبيوتر اللوحي المشترك الذي يتم تثبيته في الوضع الرأسي.
- 1280 × 800 دقة كانت شائعة - تحتوي الأجهزة اللوحية القديمة ، والأجهزة اللوحية ذات النهاية المنخفضة ، والأجهزة اللوحية الأصغر بشكل شائع على بعض أقراص Amazon Fire التي لا تزال تستخدم أيضًا 1280 × 800. هذه واحدة من آخر قرارات الأجهزة المحمولة حقًا على الأجهزة اللوحية.
- 1920 × 1200 شائع على الأجهزة اللوحية مقاس 7 بوصات و 8 بوصات - في الوضع الأفقي ، يمكنك الاعتماد على نفس نقاط التوقف مثل 1080 بكسل ، معظم الوقت. ومع ذلك ، عندما ترى واحدة من هؤلاء في المناظر الطبيعية ، فإن الوضع مختلف كثيرًا. هذه الدقة شائعة بين الكثير من الأجهزة اللوحية مقاس 7 و 8 بوصات ، بما في ذلك Amazon Fire.
- أقراص أبل 2048 × 1536 -هذه هي دقة الكمبيوتر اللوحي الأكثر شيوعًا من Apple. إنه مشابه بدرجة كافية لـ 1440 بكسل لإحداث فرق بسيط للغاية ، ولكن مرة أخرى ، الصورة غير عادية. على أي حال ، من المستحسن اختبار موقعك على هذا القرار للتأكد من عدم حدوث أي شيء غريب على أجهزة iPad.
تبدأ الأجهزة اللوحية عالية الدقة في الوصول إلى منطقة سطح المكتب. في معظم الأوقات ، لا تحتاج حتى إلى حسابها لأن الدقة تقع ضمن نطاق قمت بحسابه بالفعل. من الجيد دائمًا إجراء الاختبار للتأكد من ذلك تمامًا.
قرارات المحمول المشتركة
من السهل التعامل مع الأجهزة المحمولة. هناك مجموعة متنوعة من الأجهزة ، بما في ذلك الأجهزة القديمة التي لا تزال قيد الاستخدام ، وليس من السهل تغطيتها جميعًا. لهذا السبب يحظى تصميم الجوّال أولاً بشعبية كبيرة. الفلسفة بسيطة. ابدأ بأبسط تصميم للهاتف المحمول أولاً ، وقم بالبناء عليه للشاشات الأكبر والأكبر. بهذه الطريقة ، تعمل حتى أقدم الأجهزة وأصغرها ، ولكن بمحتوى أقل وميزات أقل. الموقع ليس معوقًا ، فهو يعرض فقط المعلومات الأكثر أهمية والتي يتم الوصول إليها بشكل شائع أولاً.
إليك خدعة ممتعة للتعامل مع الهواتف ؛ اقلب قرارات سطح المكتب إلى جانبهم. بالتأكيد ، هناك قيم متطرفة غير عادية ، لكن معظم الهواتف الحالية تتبع هذا النمط.
- 720 × 1280 شائع على الأجهزة القديمة - لعدد من السنوات ، كان 720 بكسل على جانبه هو المعيار الأكثر شيوعًا للجهاز المحمول. في هذه الحالة ، لا داعي للقلق بشأن الوضع الأفقي ، نظرًا لأنه يشبه سطح المكتب 720 بكسل. ما عليك سوى تغطية الدقة الرأسية بعرض 720 بكسل.
- 1080x1920 الوسط - كان 1080p هو المعيار لفترة طويلة جدًا. لا يزال شائعًا جدًا على الأجهزة متوسطة المدى. إذا كنت ستدعم دقة هاتف واحدة فقط ، فهذه هي.
- 1440x2560 أعلى نهاية الحالية - تزداد الأجهزة المحمولة حجمًا ، وتستمر الشاشات في الحصول على دقة أعلى وأعلى. 1440p هو معيار مثير للاهتمام نظرًا لوجود مجموعة متنوعة من عروض الشاشة - الأطوال في هذه الحالة - التي تقع ضمن هذا النطاق. على كل من أجهزة الكمبيوتر المكتبية والجوالة ، فإن الأكثر شيوعًا هو 1440 × 2560. هذا يعطي الشاشة نسبة العرض إلى الارتفاع 16: 9 الشائعة. على الهاتف المحمول ، يكون الأمر أقل أهمية من أجهزة الكمبيوتر المكتبية لأن طول الجهاز لا يؤثر كثيرًا على تصميماتك.
قبل أن تدعم لحسن الحظ ثلاث درجات دقة للجوّال فقط ، يجب أن تدرك أيضًا أن بعض الأشخاص يستخدمون هواتف قديمة يبعث على السخرية ذات شاشات صغيرة. يجب عليك دائمًا إنشاء حد أدنى من الدقة لضمان أن يبدو موقعك جيدًا حتى بالنسبة لشخص يستخدم هاتفًا منذ عدة سنوات.
نصائح بسيطة يجب وضعها في الاعتبار
من السهل أن تأخذ مجموعة من الحقائق حول دقة الشاشة والجريان السطحي والبدء في محاكاة التصميمات ، وهذا بالضبط عندما تواجه مشكلة. هناك بعض الأفكار الرئيسية التي يجب وضعها في الاعتبار عند تصميم موقع ويب ، وهي صحيحة في معظم المواقف ، إن لم يكن جميعها.
- التصميم المتجاوب مائع - قد تشعر بالرغبة في بناء مجموعة ضخمة من نقاط التوقف في CSS لحساب كل حجم ومكان للشاشة. هذه طريقة رائعة لدفع نفسك للجنون. يُقصد بتصميم الويب سريع الاستجابة أن يكون مرنًا بدرجة كافية لملء الفجوات والمخالفات. إذا وجدت نفسك تحدد عددًا كبيرًا جدًا من الأرقام الثابتة ، سواء كانت في استعلامات الوسائط أو للعناصر نفسها ، فمن المحتمل أنك تتجه إلى المسار الخطأ.
- لا يقوم الأشخاص دائمًا بتكبير متصفحهم - يسير هذا النوع جنبًا إلى جنب مع النقطة السابقة. يمكنك تصميم لأحجام الشاشة، ولكن عندما لا يقوم شخص ما بتكبير نافذة المتصفح الخاصة به ، فإن كل ذلك يتلاشى. من خلال الحفاظ على سلاسة تصميمك ، يمكنك تجنب المشاكل المتعلقة بأحجام نوافذ المتصفح المختلفة.
- اختبار كل شيء - حاول كسر موقعك. هذه هي الطريقة الوحيدة للعثور على جميع الأخطاء والتناقضات التي ستدمر تجربة الزائر. يحتوي Chrome على أدوات مضمنة لاختبار دقة الجهاز مع قائمة كاملة بالأجهزة الشائعة للعمل معها. لديك دائمًا خيار سحب نافذة المتصفح إلى أحجام مختلفة بنفسك لترى كيف يبدو الموقع في الأحجام المختلفة وكيف يتكيف ويتكسر.
- لا تتوقع أن يحصل المستخدمون على الأحدث والأفضل - يعود هذا إلى النقطة السابقة حول الهواتف القديمة والدقة الصغيرة. لا يمكنك أن تتوقع أن يكون لدى الأشخاص أجهزة جديدة. هذا ينطبق على كل من دقة الشاشة وقوة المعالجة. تحميل موقع به الكثير من الرسومات والكثير جدًا جافا سكريبت طريقة جيدة لجعل الأشخاص الذين لديهم جهاز بطيء يغادرون ولا يعودون أبدًا.