تصميم ويب سريع الاستجابة واستجابة لارتفاع المتصفح

أعلم أن الكثيرين سيكون لديهم سؤال حول سبب حصول هذا المقال على مثل هذا العنوان غير المعتاد. كيف يرتبط "تصميم الويب سريع الاستجابة" و "ارتفاع نافذة المتصفح"؟ ربما يبدو هذا العنوان غير عادي نظرًا لحقيقة أن "التصميم سريع الاستجابة" يُفهم عمومًا على أنه يعني تصميم الصفحات للتكيف مع عرض إطار العرض بحيث تبدو جيدة على الأجهزة المختلفة. تختبر مواقع الويب دائمًا عن طريق تقليص عرض المتصفح ومراقبة ما يحدث. لكنني لم أصادف أبدًا بعض الإرشادات الخاصة باختبار المشروع ، والتي تنص على أنه يتم فحص الصفحات عن طريق تقليل ارتفاع نافذة المتصفح. ربما تكون قد لفتت انتباهك يومًا ما: "هل يجب أن أتحقق من الصفحات في نوافذ المتصفح ذات الارتفاعات المختلفة؟ أعتقد أنه يجب القيام بذلك ، وسأقنع الجميع بذلك ،من سيقرأ هذا المقال.







عند العمل على موقع ويب ، ليس من الصحيح وضع افتراضات معينة دون الاعتماد على بيانات حقيقية. لذلك ، من المهم جدًا تحمل مسؤولية فحص المواقع في نوافذ المتصفح ذات العروض المختلفة والارتفاعات المختلفة.

لماذا تحقق من الصفحات في نوافذ المتصفح ذات الارتفاعات المختلفة؟

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



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





الافتراضات والواقع ما ورد



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

أدوات مطور المتصفح

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





يشغل شريط أدوات المطور جزءًا من نافذة المتصفح



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



دعنا نفكر في سؤال واحد مهم: "هل من الممكن تحسين تجربة المستخدم للموقع أثناء مشاهدته في نافذة متصفح صغيرة؟" يمكنني إعطاء إجابة إيجابية على هذا السؤال. أعتقد أن النظرية كافية بالنسبة لنا. دعنا نتعلم أسلوب "عمودي" لتصميم الصفحات.

CSS "عمودي"

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





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



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



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

• استعلامات الوسائط بناءً على ارتفاع منفذ العرض.
• وحدة القياس المتعلقة بإطار العرض.

استعلامات الوسائط التي تأخذ في الاعتبار ارتفاع منفذ العرض

كما تعلم بالفعل ، يمكنك استخدام استعلامات الوسائط في CSS التي تأخذ في الاعتبار عرض إطار العرض:

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

لكن استعلامات الوسائط التي تأخذ في الاعتبار ارتفاع نوافذ المتصفح أقل شيوعًا:

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/*  */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

وحدات القياس المتعلقة بإطار العرض

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

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

كلما كانت نافذة المتصفح أطول ، زادت المسافة بين العناصر.



قد يبدو كل هذا وكأنه شيء صغير لطيف لا يؤثر في أي شيء ، ولكن فقط حتى تنظر إلى صفحة مماثلة على شاشة كبيرة - مثل شاشة iMac مقاس 27 بوصة. ثم اتضح أن ارتفاع منفذ العرض مرتفع جدًا. لكن لحسن الحظ لدينا طريقة للحد من الحجمmargin-bottom. يمكن القيام بذلك ، على سبيل المثال ، بالطرق التالية:

• استخدام الاستعلامات الإعلامية.
• استخدام وظائف مقارنة CSS.

الطريقة الأولى (استعلام الوسائط) لديها بالتأكيد دعم أفضل للمتصفح. جوهرها هو تحديد الحد الأقصى للقيمة margin-bottomفي الحالات التي يتم فيها عرض الصفحة على شاشات كبيرة جدًا.

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

الطريقة الثانية هي استخدام دالة CSS clamp(). عند اختيار القيم التي تم تمريرها إلى هذه الوظيفة ، نقوم ، في هذه الحالة ، بتعيين الحد الأدنى لحجم المسافة البادئة ، مساويًا 10px، والحد الأقصى - 50px، وتعتمد القيم بين هاتين القيمتين على حجم نافذة المتصفح.

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

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



أدناه سنتحدث عن الطرق المختلفة التي يمكنك من خلالها استخدام استعلامات الوسائط العمودية.

أمثلة وسيناريوهات

▍ عناصر الصفحة التي تتداخل عند تغيير ارتفاع نافذة المتصفح

يعرض هذا المثال صفحة لها عنوان وتوضيح في القسم العلوي. ارتفاع هذا الجزء من الصفحة 100vhيساوي 100٪ من ارتفاع إطار العرض.





الجزء العلوي من الصفحة بارتفاع 100vh



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





يؤدي تقليل ارتفاع نافذة المتصفح إلى كسر التصميم.



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



ها هي الترميز:

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

إليك الأنماط:

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

لنفكر في عدة خيارات لحل مثل هذه المشكلات:

• يمكنك إعطاء الصورة أبعادًا ثابتة (خصائص widthو height) ، وليس فقط عرضها ( width). قلة الملكية heightهي أحد أسباب مشكلتنا.
• لا يمكنك تطبيق الخاصية على القسم العلوي من الصفحة height: 100vhإلا إذا كان ارتفاع إطار العرض أكبر 700px(بالطبع ، ستختلف القيم المحددة المستخدمة في استعلام الوسائط وفقًا للموقف لديك).

يمكنك الجمع بين هاتين الطريقتين والحصول على حل أكثر موثوقية لهذه المشاكل:

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /*     */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

لذلك قررنا أن استعلامات الوسائط "الرأسية" هي آلية مستقرة ومفيدة. لكن استخدام قيمة 100vhعمل محفوف بالمخاطر ، لأنه حتى إذا كان بإمكانك تحديد حجم الصورة ، فقد يحدث ألا يكون حجم النص محدودًا. على سبيل المثال ، إذا تبين أن النص في القسم العلوي من الصفحة أطول ، فسنواجه متغيرًا جديدًا من المشكلة التي نعرفها بالفعل.





يتداخل النص مع قسم من الموقع لا ينبغي أن يكون فيه.



لإصلاح هذه المشكلة ، يمكنكheightاستخدام خاصيةبدلاً منخاصيةmin-height. باستخدام هذا النهج ، في حالة أن محتويات القسم أكبر مما يمكن أن يحتويه ، سيزداد حجمه ولن تغطي محتوياته القسم التالي.

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

▍ عنوان الصفحة ثابت

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





عنوان الصفحة الثابتة



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

@media (min-height: 700px) {
  .site-header {
    /* position: fixed  position: sticky */
  }
}

باستخدام هذا الأسلوب في الوضع الأفقي ، لن يتم إصلاح العنوان.

▍ إخفاء العناصر الأقل أهمية من غيرها

لقد لاحظت هذا في قائمة التنقل في Twitter. أي أننا نتحدث عن مجموعة من استعلامات الوسائط "الرأسية" ونمط " الأولوية +" .





سيتم إخفاء العناصر المحددة في حالة نفاد المساحة.



وعندما يتغير ارتفاع منفذ العرض ،تصبح العناصرالأقل أهمية (عناصر القائمةBookmarksوLists) عناصر فرعيةMore. هذا مثال جيد على استخدام استعلامات الوسائط "الرأسية".

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

و هنا هو بلدي سقسقة، الذي يحلل تطبيق هذا النهج على تويتر.

▍ الملاحة وتغيير ارتفاع منفذ العرض

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





تباعد العناصر وارتفاع منفذ العرض فيما



يلي الأنماط الخاصة بهذا المثال:

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

و هنا يمكنك مشاهدة الفيديو لذلك.



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

▍ الجزء العلوي من الصفحة وارتفاع منفذ العرض

يحتاج القسم العلوي من الصفحة إلى بعض المساحة الرأسية المجانية لمنحه بعض "الهواء". قد تعتمد أبعاد هذه المساحة على ارتفاع منفذ العرض.





كلما ارتفعت الصفحة ، زاد "الهواء".



هذه هي الطريقة التي تبدو بها أنماط هذا المثال:

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

المكونات النموذجية

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



إذا كان النموذج يحتوي على الكمية الصحيحة من البيانات ، فسيبدو جيدًا كما هو موضح أدناه.





العنصر الشرطي الصحيح فيما



يلي أنماط هذا العنصر:

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

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





عنصر مشروط طويل جدًا



تحدث هذه المشكلة للأسباب التالية:

• النموذج ليس له ارتفاع محدد.
• يتم توسيط العنصر عموديًا (سيؤدي ذلك إلى تسريع المشكلة).

إليك CSS التي تتناول هذه المشكلات:

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

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





عنصر مشروط مناسب لعرض النصوص الطويلة

النتيجة

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



هل تهتم بكيفية ظهور صفحات الويب التي تنشئها في نوافذ المتصفح ذات الارتفاعات المختلفة؟