مع ازدياد عدد مستخدمي الهواتف المحمولة على الإنترنت، أصبح من المهم أكثر فأكثر أن يصمّم مطوّرو الويب المحتوى بطرق تتناسب مع أحجام الشاشات المختلفة. تصميم الويب سريع الاستجابة، الذي حدّده في الأصل إيثان ماركوت في A List Apart، هو استراتيجية تصميم تستجيب لاحتياجات المستخدمين وإمكانات أجهزتهم من خلال تغيير تصميم الموقع الإلكتروني ليتناسب مع الجهاز المستخدَم. على سبيل المثال، قد يعرض موقع إلكتروني سريع الاستجابة المحتوى في عرض من عمود واحد على الهاتف، وعمودين على الجهاز اللوحي، وثلاثة أو أربعة أعمدة على الكمبيوتر المكتبي.
بما أنّ الأجهزة المتوافقة مع الإنترنت تتضمّن العديد من أحجام الشاشات المحتملة، من المهم أن يتكيّف موقعك الإلكتروني مع أي حجم شاشة حالي أو مستقبلي. يأخذ التصميم الحديث السريع الاستجابة في الاعتبار أيضًا أساليب التفاعل، مثل شاشات اللمس. والهدف هو تحسين التجربة للجميع.
ضبط إطار العرض
يجب أن تتضمّن الصفحات المحسّنة لتناسب مجموعة متنوعة من الأجهزة علامة وصفية لإطار العرض في رأس المستند. تحدّد هذه العلامة كيفية تحكّم المتصفّح في أبعاد الصفحة وحجمها.
ولتقديم أفضل تجربة، تعرض متصفّحات الجوّال الصفحة بحجم شاشة سطح المكتب (عادةً حوالي 980px، ولكن يختلف هذا الحجم باختلاف الأجهزة)، ثم تحاول تحسين مظهر المحتوى عبر زيادة حجم الخط، ثم ضبط قياس المحتوى ليناسب الشاشة. ويمكن أن يؤدي ذلك إلى ظهور الخطوط بشكل غير متسق، كما قد يضطر المستخدمون إلى تكبير الشاشة حتى يتسنى لهم الاطّلاع على المحتوى والتفاعل معه.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
يؤدي استخدام قيمة إطار العرض الوصفي width=device-width إلى توجيه الصفحة لمطابقة عرض الشاشة بوحدات البكسل المستقلة عن الجهاز (DIP)، وهي وحدة بكسل مرئية عادية (يمكن أن تتكوّن من العديد من وحدات البكسل المادية على شاشة عالية الكثافة). ويتيح ذلك إعادة ترتيب المحتوى في الصفحة ليتناسب مع أحجام الشاشات المختلفة.
تحافظ بعض المتصفّحات على عرض الصفحة ثابتًا عند تدويرها إلى الوضع الأفقي، وتكبّر الصفحة لملء الشاشة بدلاً من إعادة ترتيب المحتوى. تؤدي إضافة القيمة initial-scale=1 إلى توجيه المتصفّحات إلى ضبط نسبة 1:1 بين وحدات البكسل في CSS ووحدات البكسل المستقلة عن الجهاز بغض النظر عن اتجاه الجهاز، ما يتيح للصفحة الاستفادة من العرض الكامل في الوضع الأفقي.
يمكن أن تساعدك عملية التدقيق في Lighthouse التي تحمل الاسم "لا تتضمّن علامة <meta name="viewport"> مع width أو initial-scale" في إتمام عملية التأكّد من أنّ مستندات HTML تستخدم العلامة الوصفية الخاصة بمنطقة العرض بشكل صحيح.
ضبط حجم المحتوى وفقًا لإطار العرض
على كل من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، اعتاد المستخدمون على تصفّح المواقع الإلكترونية عموديًا وليس أفقيًا. يؤدي إجبار المستخدم على التمرير أفقيًا أو التصغير لرؤية الصفحة بأكملها إلى تقديم تجربة مستخدم سيئة.
عند تطوير موقع إلكتروني متوافق مع الأجهزة الجوّالة باستخدام علامة إطار العرض الوصفي، من الشائع أن يتم إنشاء محتوى صفحة لا يتناسب تمامًا مع إطار العرض المحدّد. على سبيل المثال، يمكن أن تؤدي صورة معروضة بعرض أكبر من إطار العرض إلى التمرير الأفقي. لمنع حدوث ذلك، عدِّل المحتوى ليتناسب مع إطار العرض.
يمكن أن يساعدك تدقيق عدم تحديد حجم المحتوى بشكلٍ صحيح لإطار العرض في Lighthouse في أتمتة عملية رصد المحتوى الذي يتجاوز إطار العرض.
الصور
تتسبّب الصورة ذات الأبعاد الثابتة في ظهور شريط تمرير في الصفحة إذا كان حجمها أكبر من حجم إطار العرض. ننصح بمنح جميع الصور max-width بقيمة 100%، ما يؤدي إلى تصغير الصور لتناسب المساحة المتاحة مع منعها من التمدّد إلى ما يتجاوز حجمها الأولي.
في معظم الحالات، يمكنك إجراء ذلك من خلال إضافة ما يلي إلى ورقة الأنماط:
img {
max-width: 100%;
display: block;
}
إضافة أبعاد الصورة إلى عنصر img
حتى عند ضبط max-width: 100%، ننصحك بإضافة السمتَين width وheight إلى علامات <img> لكي يتمكّن المتصفّح من حجز مساحة للصور قبل تحميلها. يساعد ذلك في منع متغيّرات التصميم.
التنسيق
بما أنّ أبعاد الشاشة وعرضها بوحدات بكسل CSS تختلف بشكل كبير بين الأجهزة (على سبيل المثال، بين الهواتف والأجهزة اللوحية، وحتى بين الهواتف المختلفة)، يجب ألا يعتمد المحتوى على عرض معيّن لإطار العرض كي يتم عرضه بشكل جيد.
في السابق، كان ذلك يتطلّب ضبط عناصر التنسيق في شكل نسب مئوية. يتطلّب استخدام قياسات البكسل من المستخدم التمرير أفقيًا على الشاشات الصغيرة:
يؤدي استخدام النسب المئوية بدلاً من ذلك إلى جعل الأعمدة أضيق على الشاشات الأصغر حجمًا، لأنّ كل عمود يشغل دائمًا النسبة المئوية نفسها من عرض الشاشة:
تسهّل تقنيات تنسيق CSS الحديثة، مثل flexbox وتنسيق الشبكة وتنسيق الأعمدة المتعددة، إنشاء هذه الشبكات المرنة.
Flexbox
استخدِم Flexbox عندما يكون لديك مجموعة من العناصر بأحجام مختلفة وتريد أن تتناسب بشكل مريح في صف واحد أو عدة صفوف، مع شغل العناصر الأصغر مساحة أقل والعناصر الأكبر مساحة أكبر.
.items {
display: flex;
justify-content: space-between;
}
يمكنك استخدام Flexbox لعرض العناصر كصف واحد، أو التفافها على عدة صفوف مع انخفاض المساحة المتاحة.
تنسيق شبكة CSS
تتيح CSS Grid Layout إنشاء شبكات مرنة. يمكنك تحسين المثال السابق الذي تم عرضه باستخدام تخطيط الشبكة والوحدة fr، التي تمثّل جزءًا من المساحة المتاحة في الحاوية.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
يمكنك أيضًا استخدام الشبكة لإنشاء تنسيقات شبكة عادية تتضمّن أكبر عدد ممكن من العناصر. يقل عدد المقاطع الصوتية المتاحة كلما صغُر حجم الشاشة. يوضّح العرض التوضيحي التالي شبكة تحتوي على أكبر عدد ممكن من البطاقات في كل صف، مع حد أدنى للحجم يبلغ 200px.
مزيد من المعلومات حول CSS Grid Layout
التصميم المتعدّد الأعمدة
بالنسبة إلى بعض أنواع التنسيقات، يمكنك استخدام "تنسيق الأعمدة المتعددة" (Multicol)،
الذي ينشئ أعدادًا متجاوبة من الأعمدة باستخدام السمة 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) orientationaspect-ratio
طلبات البحث عن الوسائط استنادًا إلى إمكانات الجهاز
وبالنظر إلى مجموعة الأجهزة المتاحة، لا يمكن للمطوّرين افتراض أنّ كل جهاز كبير هو كمبيوتر عادي أو كمبيوتر محمول، أو أنّ كل جهاز صغير يستخدم شاشة تعمل باللمس. تتيح لك بعض الإضافات الأحدث لمواصفات طلبات البحث عن الوسائط اختبار ميزات مثل نوع المؤشر المستخدَم للتفاعل مع الجهاز وما إذا كان بإمكان المستخدم تمرير المؤشر فوق العناصر.
hoverpointerany-hoverany-pointer
جرِّب عرض هذا العرض التوضيحي على أجهزة مختلفة، مثل كمبيوتر مكتبي عادي وهاتف أو جهاز لوحي.
تتوافق هذه الميزات الأحدث مع جميع المتصفّحات الحديثة. يمكنك الاطّلاع على مزيد من المعلومات في صفحات MDN حول hover وany-hover وpointer وany-pointer.
استخدام 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;
}
}
تجنُّب إخفاء المحتوى (:#avoid-hiding-content)
يجب توخّي الحذر عند اختيار المحتوى الذي تريد إخفاءه أو عرضه حسب حجم الشاشة. لا تخفِ المحتوى لمجرّد أنّه لا يتناسب مع الشاشة. لا يمكن التنبؤ بالمحتوى الذي قد يريد المستخدم مشاهدته استنادًا إلى حجم الشاشة. على سبيل المثال، قد يؤدي إزالة عدد حبوب اللقاح من توقعات الطقس إلى حدوث مشكلة خطيرة للأشخاص الذين يعانون الحساسية في فصل الربيع ويحتاجون إلى هذه المعلومات لتحديد ما إذا كان بإمكانهم الخروج.
عرض نقاط توقّف طلبات البحث عن الوسائط في Chrome DevTools
بعد إعداد نقاط توقّف طلبات البحث عن الوسائط، تحقَّق من كيفية تأثيرها في مظهر موقعك الإلكتروني. يمكنك تغيير حجم نافذة المتصفّح لتفعيل نقاط التوقف، ولكن تتضمّن "أدوات مطوّري البرامج في Chrome" ميزة مدمجة تعرض شكل الصفحة عند نقاط توقف مختلفة.
لعرض صفحتك ضمن نقاط توقّف مختلفة:
- افتح "أدوات مطوّري البرامج".
- فعِّل وضع الجهاز. يتم فتح هذا الوضع تلقائيًا في الوضع السريع الاستجابة.
- للاطّلاع على طلبات البحث عن الوسائط، افتح قائمة "وضع الجهاز" وانقر على عرض طلبات البحث عن الوسائط. يعرض هذا القسم نقاط التوقف على شكل أشرطة ملوّنة فوق صفحتك.
- انقر على أحد الأشرطة لعرض صفحتك أثناء تفعيل طلب البحث عن الوسائط. انقر بزر الماوس الأيمن على شريط للانتقال إلى تعريف طلب البحث عن الوسائط هذا.