مع ازدياد عدد مستخدمي الهواتف الجوّالة على الإنترنت، أصبح من المهم أكثر فأكثر أن يعرض مصمّمو الويب المحتوى بطرق تناسب بشكل جيد مجموعة متنوعة من أحجام الشاشات. تصميم الويب سريع الاستجابة، الذي حدّده في الأصل إيثان ماركوت في A List Apart، هو استراتيجية تصميم تستجيب لاحتياجات المستخدمين وقدرات أجهزتهم من خلال تغيير تنسيق الموقع الإلكتروني ليناسب الجهاز المستخدَم. على سبيل المثال، قد يعرض الموقع الإلكتروني السريع الاستجابة المحتوى في عرض عمود واحد على الهاتف، وعمودَين على الجهاز اللوحي، وثلاثة أو أربعة أعمدة على جهاز الكمبيوتر المكتبي.
بما أنّ الأجهزة المزوّدة بالإنترنت تتضمّن العديد من أحجام الشاشات المحتملة، من المُهم أن يتكيّف موقعك الإلكتروني مع أي حجم شاشة حالي أو مستقبلي. يراعي التصميم الحديث السريع الاستجابة أيضًا أوضاع التفاعل، مثل الشاشات التي تعمل باللمس. والهدف من ذلك هو تحسين التجربة للجميع.
ضبط إطار العرض
يجب أن تتضمّن الصفحات المحسّنة لأنواع مختلفة من الأجهزة علامة وصفية لإطار العرض في رأس المستند. تحدّد هذه العلامة كيفية التحكّم في المتصفّح في أبعاد الصفحة وحجمها.
لمحاولة تقديم أفضل تجربة، تعرض متصفّحات الأجهزة الجوّالة الصفحة بحجم شاشة الكمبيوتر المكتبي (عادةً ما يكون حوالي 980px، مع اختلاف ذلك باختلاف الأجهزة)، ثم تحاول تحسين مظهر المحتوى من خلال زيادة أحجام الخطوط وقياس المحتوى ليناسب الشاشة. وقد يؤدي ذلك إلى ظهور الخطوط بشكل غير متسق وتطلب من المستخدمين تكبير المحتوى للاطّلاع عليه والتفاعل معه.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
يؤدي استخدام قيمة meta viewport width=device-width إلى توجيه الصفحة إلى مطابقة
عرض الشاشة بوحدات البكسل المستقلة عن الجهاز (DIP)، وهي وحدة قياس قياسية لوحدات البكسل المرئية
(التي يمكن أن تتألف من العديد من وحدات البكسل الفعلية على شاشة عالية الكثافة). ويتيح ذلك
للصفحة إعادة تدفق المحتوى بما يتناسب مع أحجام الشاشات المختلفة.
تحافظ بعض المتصفّحات على عرض
الصفحة ثابتًا عند التدوير إلى الوضع الأفقي، وتتكبير لتملؤه
الشاشة بدلاً من إعادة تدفق النص. تُعلِم إضافة القيمة initial-scale=1 المتصفّحات
بضبط نسبة 1:1 بين وحدات بكسل CSS ووحدات البكسل المستقلة عن الجهاز
بغض النظر عن اتجاه الجهاز، ما يتيح للصفحة الاستفادة من
العرض الكامل في الوضع الأفقي.
يمكن أن تساعدك عملية تدقيق Lighthouse في عدم توفّر علامة <meta name="viewport"> مع width أو initial-scale
في التشغيل الآلي لعملية التأكّد من استخدام مستندات HTML
لعلامة viewport الوصفية بشكل صحيح.
ضبط حجم المحتوى وفقًا لإطار العرض
على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، اعتاد المستخدمون الانتقال في المواقع الإلكترونية بشكل عمودي ولكن ليس أفقيًا. إنّ إجبار المستخدم على الانتقال أفقيًا أو تصغير الصفحة لعرضها بالكامل يتسبب في تقديم تجربة مستخدم سيئة.
عند تطوير موقع إلكتروني متوافق مع الأجهزة الجوّالة يتضمّن علامة إطار عرض وصفي، من الشائع أن يتم إنشاء محتوى الصفحة عن طريق الخطأ بطريقة لا تتناسب تمامًا مع إطار العرض المحدّد. على سبيل المثال، يمكن أن تؤدي الصورة المعروضة على مساحة أكبر من إطار العرض إلى الانتقال الأفقي. لمنع حدوث ذلك، عليك تعديل المحتوى لكي يلائم إطار العرض.
يمكن أن تساعدك عملية تدقيق Lighthouse في أتمتة عملية رصد المحتوى الذي يتجاوز إطار العرض في عدم تحديد حجم المحتوى بشكلٍ صحيح لإطار العرض.
الصور
تؤدي الصورة ذات الأبعاد الثابتة إلى الانتقال إلى أسفل الصفحة إذا كانت أكبر من
مساحة العرض. ننصحك بمنح جميع الصور max-width من 100%، ما يؤدي إلى تصغير
الصور لتلائم المساحة المتوفّرة مع منع تمديدها إلى ما هو أوسع من
حجمها الأصلي.
في معظم الحالات، يمكنك إجراء ذلك من خلال إضافة ما يلي إلى جدول الأنماط:
img {
max-width: 100%;
display: block;
}
إضافة أبعاد الصورة إلى عنصر img
حتى في حال ضبط max-width: 100%، ننصحك بإضافة سمتَي width و
height إلى علامات <img> ليتمكّن المتصفّح من حجز مساحة لتحميل
الصور قبل تحميلها. ويساعد ذلك في منع تغيُّرات التصميم.
التنسيق
بما أنّ أبعاد الشاشة وعرضها بوحدات البكسل في CSS يختلفان اختلافًا كبيرًا بين الأجهزة (على سبيل المثال، بين الهواتف والأجهزة اللوحية، وحتى بين الهواتف المختلفة)، يجب ألا يعتمد المحتوى على عرض إطار عرض معيّن لعرضه بشكل جيد.
في السابق، كان هذا يتطلّب ضبط عناصر التنسيق بالنِسب المئوية. يتطلّب استخدام قياسات البكسل من المستخدم التمرير أفقيًا على الشاشات الصغيرة: