أول شيء يعتبره معظم المصممين عند بناء صفحة الويب الخاصة بهم هو ما هو التصميم الذي يتم تصميمه له. ما يساوي هذا بالفعل هو تحديد مدى اتساع تصميمك. لا يوجد شيء بعد الآن مثل عرض موقع قياسي.
لماذا النظر في القرار
في عام 1995 ، كانت أجهزة العرض القياسية دقة 640 × 480 هي أكبر وأفضل الشاشات المتاحة. وهذا يعني أن مصممي الويب يركزون على جعل الصفحات التي تبدو جيدة في متصفحات الويب مكبّرة على شاشة 12 بوصة إلى 14 بوصة في هذا القرار.
في هذه الأيام ، تمثل دقة 640 × 480 أقل من 1 في المائة من معظم زيارات موقع الويب. يستخدم الأشخاص أجهزة الكمبيوتر مع دقة أعلى بكثير بما في ذلك 1366 × 768 و 1600 × 900 و 5120 × 2880. في كثير من الحالات ، يعمل تصميم شاشة دقة 1366x768.
نحن في مرحلة من تاريخ تصميم الويب حيث لا داعي للقلق كثيرًا بشأن الحل. يمتلك معظم الأشخاص شاشات كبيرة ذات شاشات عريضة ولا يزيدون من نافذة المتصفح إلى أقصى حد. لذلك إذا قررت تصميم صفحة لا يزيد عرضها عن 1366 بكسل ، فستبدو صفحتك على ما يرام في معظم نوافذ المتصفح حتى على الشاشات الكبيرة ذات الدقة العالية.
عرض المتصفح
قبل أن تفكر في التفكير "حسناً ، سأجعل صفحاتي 1366 بكسل ،" هناك ما هو أكثر من هذه القصة. إحدى القضايا التي يتم تجاهلها غالبًا عند تحديد عرض صفحة الويب هي حجم العملاء الذين يحتفظون بمتصفحاتهم. على وجه التحديد ، هل تقوم بتعظيم المتصفحات الخاصة بهم في حجم الشاشة الكاملة أم أنها تبقيهم أصغر من الشاشة الكاملة؟
في إحدى الاستطلاعات غير الرسمية لزملاء العمل الذين استخدموا جميعًا جهاز كمبيوتر محمولًا بحجم 1024x768 متوافقًا مع شركة ، احتفظ اثنان بتطبيقاتهم إلى أقصى حد. البقية لديها نوافذ مختلفة الحجم مفتوحة لأسباب مختلفة. يوضح هذا أنه إذا كنت تقوم بتصميم شبكة إنترانت هذه الشركة بعرض 1024 بكسل ، فستحتاج 85 بالمائة من المستخدمين إلى التمرير أفقيًا لرؤية الصفحة بأكملها.
بعد حساب العملاء الذين يحققون الحد الأقصى أو لا يفعلون ، فكر في حدود المتصفح. يحتوي كل متصفح ويب على شريط تمرير وحدود على الجانبين تقلص المساحة المتوفرة من 800 إلى حوالي 740 بكسل أو أقل على دقة 800 × 600 وحوالي 980 بكسل على النوافذ المكبرة بدقة 1024 × 768. يُسمى هذا المتصفح "chrome" ، ويمكن أن يُبعد عن المساحة القابلة للاستخدام لتصميم صفحتك.
صفحات العرض الثابتة أو السائلة
العرض الرقمي الفعلي ليس هو الشيء الوحيد الذي تحتاج إلى التفكير فيه عند تصميم عرض موقع الويب الخاص بك. تحتاج أيضًا إلى تحديد ما إذا كنت ستحصل على عرض ثابت أو عرض سائل . بمعنى آخر ، هل ستقوم بتعيين العرض إلى رقم محدد (ثابت) أم إلى نسبة (سائل)؟
عرض ثابت
صفحات العرض الثابتة هي بالضبط كما تبدو. يتم إصلاح العرض بعدد محدد ولا يتغير مهما كان حجم المتصفح كبيرًا أو صغيرًا. يمكن أن يكون هذا جيدًا إذا كنت بحاجة إلى أن يبدو التصميم الخاص بك تمامًا بغض النظر عن مدى اتساع أو تضيق متصفحات القراء ، ولكن هذه الطريقة لا تأخذ في الاعتبار القراء. سيتعين على الأشخاص الذين لديهم متصفحات أضيق من التصميم الخاص بك التمرير أفقيًا ، وسيكون لدى الأشخاص الذين لديهم متصفحات عريضة كميات كبيرة من المساحة الفارغة على الشاشة.
لإنشاء صفحات عرض ثابتة ، ما عليك سوى استخدام أرقام وحدات بكسل محددة لعرض أقسام صفحتك.
العرض السائل
تختلف صفحات العرض السائلة (التي تسمى أحيانًا صفحات العرض المرن) وفقًا لطريقة عرض نافذة المتصفح. يتيح لك هذا تصميم صفحات تركز أكثر على عملائك. تكمن المشكلة في صفحات عرض السوائل في صعوبة قراءتها. إذا كان طول سطر النص أطول من 10 إلى 12 كلمة أو أقل من 4 إلى 5 كلمات ، فقد يكون من الصعب قراءته. هذا يعني أن القراء الذين لديهم نوافذ متصفح كبيرة أو صغيرة يواجهون مشكلة.
لإنشاء صفحات عرض مرنة ، ما عليك سوى استخدام النسب المئوية أو نظام الإدارة البيئية لعرض أقسام صفحتك. يجب أن تتعرف أيضًا على خاصية العرض الأقصى CSS. تتيح لك هذه الخاصية تعيين عرض في النسب المئوية ، ثم تحديده بحيث لا يصبح كبيراً بحيث لا يستطيع الأشخاص قراءته.
والفائز هو: CSS Media Queries
أفضل حل في هذه الأيام هو استخدام استعلامات وسائط CSS والتصميم سريع الاستجابة لإنشاء صفحة تتلاءم مع عرض المتصفح الذي يشاهدها. يستخدم تصميم الويب المتجاوب المحتوى نفسه لإنشاء صفحة ويب تعمل سواء كنت تعرضها بعرض 5120 بكسل أو 320 بكسل. تبدو الصفحات ذات الأحجام المختلفة مختلفة ، ولكنها تحتوي على نفس المحتوى. باستخدام استعلام الوسائط في CSS3 ، يقوم كل جهاز استقبال بالرد على الاستعلام بحجمه ، وضبط ورقة الأنماط إلى هذا الحجم المعين.