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

كيفية إنشاء مواقع إلكترونية تلبّي احتياجات وإمكانات الجهاز الذي يتم عرضها عليه

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

يلبّي تصميم الويب سريع الاستجابة، الذي حدّده في الأصل Ethan Marcotte in A List Apart، احتياجات المستخدمين والأجهزة التي يستخدمونها. يتغير التنسيق بناءً على حجم الجهاز وإمكاناته. على سبيل المثال، على الهاتف، يرى المستخدمون المحتوى معروضًا في عمود واحد؛ وقد يعرض الجهاز اللوحي المحتوى نفسه في عمودين.

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

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

ضبط إطار العرض

يجب أن تتضمّن الصفحات المحسَّنة لمجموعة من الأجهزة علامة إطار عرض وصفية في رأس المستند. تقدّم علامة إطار العرض الوصفية تعليمات إلى المتصفّح حول كيفية التحكّم في أبعاد الصفحة وحجمها.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

ويؤدي استخدام قيمة إطار العرض الوصفي width=device-width إلى توجيه الصفحة إلى أن تتطابق مع عرض الشاشة بوحدات بكسل مستقلة عن الجهاز. وحدة بكسل مستقلة للجهاز (أو الكثافة) هي تمثيل بكسل واحد، والتي قد تتكون على شاشة عالية الكثافة من عدة وحدات بكسل فعلية. ويسمح ذلك للصفحة بإعادة تدفق المحتوى ليتطابق مع أحجام الشاشات المختلفة، سواء تم عرضها على هاتف جوّال صغير أو شاشة كمبيوتر مكتبي كبيرة.

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

تحافظ بعض المتصفحات على عرض الصفحة ثابتًا عند التدوير إلى الوضع الأفقي، وتستخدم ميزة التكبير أو التصغير بدلاً من إعادة التدفّق لملء الشاشة. عند إضافة القيمة، توجِّه العلامة initial-scale=1 المتصفّحات لإنشاء علاقة 1:1 بين وحدات بكسل CSS ووحدات البكسل المستقلة عن الجهاز بغض النظر عن اتجاه الجهاز، كما تسمح للصفحة بالاستفادة من العرض الأفقي الكامل.

لا تحتوي مستندات HTML على علامة <meta name="viewport"> مع width أو initial-scale يمكن أن يساعدك تدقيق Lighthouse في تنفيذ عملية التأكّد من أنّ مستندات HTML تستخدم العلامة الوصفية لإطار العرض بشكل صحيح.

ضمان وجود إطار عرض يمكن الوصول إليه

بالإضافة إلى ضبط initial-scale، يمكنك أيضًا ضبط السمات التالية على إطار العرض:

  • minimum-scale
  • maximum-scale
  • user-scalable

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

تحديد حجم المحتوى ليلائم إطار العرض

اعتاد المستخدمون على كل من أجهزة سطح المكتب والأجهزة المحمولة، التمرير في مواقع الويب عموديًا ولكن ليس أفقيًا؛ إلا أنّ إجبار المستخدم على التمرير أفقيًا أو التصغير من أجل رؤية الصفحة بأكملها ينتج عنه تجربة مستخدم سيئة.

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

عند تحديد حجم المحتوى غير مناسب لإطار العرض، يمكن أن تساعدك تدقيق Lighthouse في برمجة عملية اكتشاف المحتوى الفائت.

الصور

تكون للصورة أبعاد ثابتة، وإذا كانت أكبر من إطار العرض، سيظهر شريط تمرير. إحدى الطرق الشائعة للتعامل مع هذه المشكلة هي منح جميع الصور max-width للسمة 100%. سيؤدي ذلك إلى تقليص الصورة لتلائم المساحة الموجودة بها، في حال كان حجم إطار العرض أصغر من الصورة. وبما أنّ قيمة max-width بدلاً من قيمة width هي 100%، لن يزيد حجم الصورة عن حجمها الطبيعي. من الآمن عمومًا إضافة ما يلي إلى ورقة الأنماط حتى لا تواجه أبدًا أي مشكلة مع الصور التي تتسبب في ظهور شريط التمرير.

img {
  max-width: 100%;
  display: block;
}

إضافة أبعاد الصورة إلى عنصر img

عند استخدام السمة max-width: 100%، يتم تجاوز الأبعاد الطبيعية للصورة، ومع ذلك، يجب أن تستخدم السمتَين width وheight في العلامة <img>. ويرجع ذلك إلى أنّ المتصفحات الحديثة ستستخدم هذه المعلومات لحجز مساحة للصورة قبل تحميلها، وسيساعد ذلك في تجنُّب تغيّرات التصميم أثناء تحميل المحتوى.

التنسيق

بما أنّ أبعاد الشاشة وعرضها في وحدات بكسل CSS تختلف اختلافًا كبيرًا بين الأجهزة (على سبيل المثال، بين الهواتف والأجهزة اللوحية، وحتى بين الهواتف المختلفة)، يجب ألا يعتمد المحتوى على عرض إطار عرض معيّن لعرضه بشكل جيد.

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

لقطة شاشة لتخطيط من عمودين يظهر معظم العمود الثاني خارج إطار العرض
تنسيق عائم باستخدام وحدات بكسل. اطّلِع على هذا المثال على أداة Glitch.

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

تسهّل تقنيات تخطيط CSS الحديثة مثل Flexbox وGrid Layout وMulticol إنشاء هذه الشبكات المرنة.

صندوق مرنة

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

.items {
  display: flex;
  justify-content: space-between;
}

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

تعرَّف على مزيد من المعلومات حول Flexbox.

تنسيق شبكة CSS

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

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

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

مزيد من المعلومات حول تنسيق شبكة CSS

تخطيط متعدد الأعمدة

بالنسبة إلى بعض أنواع التنسيق، يمكنك استخدام التنسيق متعدد الأعمدة (متعدد الأعمدة)، الذي يمكنه إنشاء أعداد متجاوبة من الأعمدة باستخدام السمة column-width. في العرض التوضيحي أدناه، يمكنك ملاحظة إضافة الأعمدة إذا كان هناك مساحة لعمود 200px آخر.

مزيد من المعلومات عن الأعمدة المتعدّدة

استخدام الاستعلامات عن الوسائط في CSS للتفاعل

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

بدلاً من ذلك، يمكنك تضمين أنماط الطباعة داخل ورقة الأنماط الرئيسية باستخدام استعلام عن الوسائط:

@media print {
  /* print styles go here */
}

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

الاستعلامات عن الوسائط استنادًا إلى حجم إطار العرض

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

  • width (min-width، max-width)
  • height (min-height، max-height)
  • orientation
  • aspect-ratio

تتمتع كل هذه الميزات بتوافق ممتاز مع المتصفح. للحصول على مزيد من التفاصيل، بما في ذلك معلومات التوافق مع المتصفح، يمكنك الاطّلاع على العرض والارتفاع والاتجاه ونسبة العرض إلى الارتفاع في دليل MDN.

الاستعلامات عن الوسائط استنادًا إلى قدرة الجهاز

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

  • hover
  • pointer
  • any-hover
  • any-pointer

حاول مشاهدة هذا العرض التوضيحي على أجهزة مختلفة، مثل كمبيوتر مكتبي عادي وهاتف أو جهاز لوحي.

تدعم هذه الميزات الجديدة بشكل جيد في كل المتصفحات الحديثة. اطّلِع على المزيد من المعلومات في صفحات MDN عن hover وأي تمرير ومؤشر وأي مؤشر.

يتم استخدام any-hover وany-pointer.

يتم اختبار الميزتَين any-hover وany-pointer لمعرفة ما إذا كان بإمكان المستخدم التمرير فوق مؤشر الماوس أو استخدام هذا النوع من المؤشرات حتى إذا لم يكن ذلك أسلوبه الأساسي للتفاعل مع جهازه. يُرجى توخّي الحذر الشديد عند استخدام هذه الأدوات. إن إجبار المستخدم على التبديل إلى الماوس عند استخدام الشاشة التي تعمل باللمس ليس أمرًا سهلاً للغاية! ومع ذلك، قد تفيدك السمتان any-hover وany-pointer إذا كان من المهم معرفة نوع الجهاز الذي يستخدمه المستخدم. على سبيل المثال، يجب أن يتطابق الكمبيوتر المحمول المزود بشاشة تعمل باللمس ولوحة لمس مع المؤشرات التقريبية والدقيقة، بالإضافة إلى القدرة على التمرير.

طريقة اختيار نقاط الإيقاف

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

اختيار نقاط التوقف الرئيسية من خلال البدء بخطوات صغيرة ثم العمل

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

لنستخدم المثال الذي رأيناه في البداية: توقعات الطقس. الخطوة الأولى هي جعل التوقعات تبدو جيدة على شاشة صغيرة.

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

بعد ذلك، غيِّر حجم المتصفح حتى يكون هناك مساحة بيضاء كبيرة جدًا بين العناصر، ولا تبدو التوقّعات جيدة. القرار غير موضوعي إلى حدٍ ما، إلا أنّه من المؤكّد أنّ الأفضل من 600px هو واسع جدًا.

لقطة شاشة لتطبيق طقس فيه فجوات كبيرة بين العناصر
التطبيق في مرحلة نشعر فيه أنه ينبغي علينا تعديل التصميم.

لإدراج نقطة إيقاف في 600px، أنشئ طلبَي بحث عن الوسائط في نهاية CSS للمكوِّن، أحدهما لاستخدامه عندما يكون المتصفّح 600px أو أقل، والآخر عندما يكون حجمه أكبر من 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

وأخيرًا، أعد بناء CSS. داخل استعلام الوسائط لـ max-width من 600px، أضف CSS المخصص للشاشات الصغيرة فقط. داخل الاستعلام عن الوسائط لـ min-width من 601px، يمكنك إضافة CSS للشاشات الأكبر حجمًا.

اختر نقاط توقف ثانوية عند الضرورة

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

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

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

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

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

تحسين النص للقراءة

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

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

لنلقِ نظرة أكثر تفصيلاً على مثال مشاركة المدونة أعلاه. على الشاشات الأصغر حجمًا، يعمل خط Roboto في 1em بشكل مثالي مع إضافة 10 كلمات في كل سطر، ولكن تتطلب الشاشات الأكبر نقطة توقف. في هذه الحالة، إذا كان عرض المتصفّح أكبر من 575px، يكون عرض المحتوى المثالي هو 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

تجنُّب مجرد إخفاء المحتوى

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

عرض نقاط الإيقاف الخاصة بالاستعلام عن الوسائط في "أدوات مطوري البرامج في Chrome"

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

لقطة شاشة تُظهر أدوات مطوّري البرامج بعد فتح تطبيق &quot;الطقس&quot; الذي يبلغ عرضه 822 بكسل
تعرض "أدوات مطوري البرامج" تطبيق الطقس لأنّه يبدو بحجم إطار عرض أوسع.
لقطة شاشة تُظهر أدوات مطوّري البرامج ويتم فيها فتح تطبيق &quot;الطقس&quot; يبلغ عرضه 436 بكسل
تعرض أدوات مطوّري البرامج تطبيق الطقس عندما يبدو بحجم إطار عرض أضيق.

لعرض صفحتك ضمن نقاط توقف مختلفة:

افتح "أدوات مطوري البرامج" ثم فعِّل وضع الجهاز. تفتح هذه الميزة في وضع الاستجابة تلقائيًا.

للاطّلاع على الاستعلامات عن الوسائط، افتح قائمة "وضع الجهاز" واختَر عرض الاستعلامات عن الوسائط لعرض نقاط الإيقاف كأشرطة ملونة فوق الصفحة.

انقر على أحد الأشرطة لعرض صفحتك عندما يكون الاستعلام عن الوسائط نشطًا. انقر بزر الماوس الأيمن على أحد الشريطين للانتقال إلى تعريف الاستعلام عن الوسائط.