التصميم المتجاوب: موقع واحد يعمل على كل الشاشات

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

لماذا موقع واحد متجاوب؟

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

وهناك سبب يتعلق بالبحث: تعتمد جوجل الفهرسة التي تبدأ بالجوال (Mobile-first Indexing)، أي أنها تستخدم نسخة الجوال من الصفحة أساسًا للفهرسة والترتيب. فالمحتوى الذي تحذفه من نسخة الجوال قد لا يُحسب لك. وتفاصيل ذلك في أساسيات تحسين محركات البحث التقني.

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

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

التخطيط المرن

استخدم وحدات نسبية بدل العروض الثابتة: النسب المئوية، ووحدة fr في الشبكات، ووحدة rem للمسافات والخطوط. ضع حدًا أقصى لعرض النص حتى لا تمتد الأسطر على شاشة عريضة فيتعب القارئ، ودع Flexbox وGrid يوزعان العناصر. القاعدة: الحاوية لا تفرض عرضًا ثابتًا بالبكسل، بل تملأ المساحة المتاحة حتى حد معقول.

الوسائط المرنة

الصور والفيديو والإطارات المضمّنة يجب ألا تتجاوز عرض حاويتها. يكفي للصور سطر واحد من CSS يجعل أقصى عرضها 100% مع ارتفاع تلقائي. وللفيديو والخرائط المضمّنة استخدم خاصية aspect-ratio لحفظ النسبة. ولا تحمّل الهاتف صورة الحاسوب الكبيرة: السمتان srcset وsizes تتيحان للمتصفح اختيار الملف المناسب، كما يشرح مقال سرعة الموقع. وإن احتجت قصًّا مختلفًا للصورة على الجوال، كصورة أفقية عريضة تصبح عمودية، فاستخدم عنصر picture.

استعلامات الوسائط

استعلامات الوسائط (Media Queries) شروط في CSS تطبق قواعد معينة حين يتجاوز عرض الشاشة حدًا معينًا. لكن قبل أي استعلام، لا بد من وسم viewport في رأس الصفحة، وإلا عرض الهاتف الصفحة بعرض حاسوب مصغّر:

<meta name="viewport" content="width=device-width, initial-scale=1">

ثم تبدأ بتخطيط الجوال وتضيف الأعمدة كلما اتسعت الشاشة:

.cards { display: grid; gap: 1rem; }

@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

وفي حالات كثيرة يمكن للشبكة أن تتكيف دون أي استعلام، فتضع من البطاقات ما يتسع له السطر:

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

وتتيح استعلامات الحاوية (Container Queries) أن يتكيف المكوّن مع عرض الحاوية التي وُضع فيها لا مع عرض الشاشة، وهي مفيدة للمكونات التي تظهر في أماكن مختلفة كبطاقة تظهر في عمود جانبي ضيق مرة وفي منطقة عريضة مرة أخرى. تحقق من دعمها في المتصفحات التي يستخدمها جمهورك قبل الاعتماد عليها.

نهج الجوال أولًا

نهج الجوال أولًا (Mobile-first) يعني أن تصمم وتبرمج للشاشة الصغيرة أولًا، ثم تضيف التحسينات للشاشات الأكبر، كما في المثال السابق. وفائدته ليست تقنية فقط؛ فالشاشة الصغيرة تجبرك على ترتيب الأولويات. ماذا يرى الزائر في الشاشة الأولى على هاتفه؟ الأفضل: جملة واضحة تقول ماذا تقدم، والإجراء الرئيسي، كزر واتساب أو اتصال، ودليل ثقة واحد.

قرارات عملية للجوال:

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

نقاط التوقف: اخترها حسب المحتوى

نقطة التوقف (Breakpoint) هي العرض الذي يتغير عنده التخطيط. لا تصمم لطرازات هواتف بعينها، فهي تتغير كل عام. الطريقة الأمتن: وسّع نافذة المتصفح تدريجيًا، وحين يبدأ التخطيط في الاختلال، كسطر أطول من اللازم أو بطاقات متباعدة، أضف نقطة توقف هناك. مثال افتراضي لنقاط شائعة: نحو 600 و900 و1200 بكسل، لكن محتواك هو الذي يقرر.

ونصائح إضافية:

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

اللمس والنماذج على الجوال

الإصبع أقل دقة من مؤشر الفأرة، والهاتف لا يعرف مرور المؤشر فوق العناصر. لذلك:

• أهداف لمس كافية: إرشادات المنصات الكبرى تقترح مساحة لمس بين 44 و48 بكسل تقريبًا للأزرار والروابط المهمة، ومعايير إمكانية الوصول WCAG 2.2 تضع حدًا أدنى قدره 24 بكسل مع مسافة كافية بين الأهداف.
• لا وظائف تعتمد على مرور المؤشر وحده: قائمة فرعية لا تظهر إلا بمرور المؤشر لن يصل إليها مستخدم الهاتف.
• لوحة المفاتيح المناسبة: حقول الهاتف والبريد والأرقام بأنواعها الصحيحة في HTML تُظهر لوحة المفاتيح المناسبة، وسمة autocomplete تسمح بالتعبئة التلقائية.
• حجم خط الحقول: بعض متصفحات الجوال تكبّر الصفحة تلقائيًا عند التركيز على حقل خطه صغير، وحجم 16 بكسل للحقول يتجنب ذلك.
• لا تمنع التكبير: تعطيل التكبير في وسم viewport يضر ضعاف البصر، وهو من أخطاء إمكانية الوصول الشائعة.
• الجداول العريضة: ضعها داخل حاوية قابلة للتمرير الأفقي، أو حوّل كل صف إلى بطاقة على الشاشات الصغيرة.

العربية والاتجاه من اليمين إلى اليسار

التصميم المتجاوب لموقع عربي أو ثنائي اللغة له اعتبارات إضافية:

• الاتجاه من الجذر: ضع dir بقيمة rtl على عنصر html للنسخة العربية. عندها ينعكس Flexbox وGrid تلقائيًا.
• الخصائص المنطقية: استخدم margin-inline-start وpadding-inline-end وأمثالهما بدل الجهتين اليسرى واليمنى، فتعمل القاعدة نفسها بالعربية والإنجليزية.
• الأيقونات الاتجاهية: أسهم التالي والسابق والرجوع يجب أن تنعكس، أما الشعارات والأيقونات التي لا تدل على اتجاه فتبقى كما هي.
• الأرقام والنصوص المختلطة: أرقام الهواتف والأسماء اللاتينية داخل الجملة العربية قد تظهر بترتيب مربك إن لم تُعزل. اختبرها بمحتوى حقيقي.
• حجم الخط العربي: الخط العربي يحتاج غالبًا حجمًا أكبر قليلًا ومسافة أسطر أوسع من الخط اللاتيني ليكون مريحًا على شاشة الهاتف.
• الكلمات والروابط الطويلة: عنوان بريد أو رابط طويل قد يدفع الصفحة إلى التمرير الأفقي، وخاصية overflow-wrap تسمح بكسره.
• اختلاف الطول بين اللغتين: الزر الذي يتسع لكلمة إنجليزية قد يضيق بمقابلها العربي أو العكس، فصمم المكونات لتتمدد.

والتفاصيل الكاملة لبناء النسختين في بناء موقع ثنائي اللغة بالعربية والإنجليزية.

الاختبار على أجهزة حقيقية

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

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

1. لا تمرير أفقي في أي صفحة.
2. النص مقروء دون تكبير، والأزرار سهلة اللمس.
3. النماذج قابلة للتعبئة ولوحة المفاتيح مفتوحة، وزر الإرسال ظاهر.
4. القائمة تُفتح وتُغلق، والإجراء الرئيسي ظاهر.
5. الصور واضحة وغير مشوهة، والعناصر الثابتة لا تغطي المحتوى.
6. الصفحة سليمة في الوضع الأفقي، وعند تكبير النص إلى 200%.
7. المحتوى الحقيقي باللغتين يتسع، بما فيه أطول اسم منتج وأطول عنوان.

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

أخطاء شائعة

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

قائمة تحقق عملية

• أضف وسم viewport، وابدأ CSS بتخطيط الجوال ثم أضف للشاشات الأكبر.
• استخدم وحدات نسبية وFlexbox وGrid، وضع حدًا أقصى لعرض النص.
• اجعل الصور مرنة، وقدّم لكل شاشة المقاس المناسب لها.
• اختر نقاط التوقف حسب المحتوى، واكتبها بوحدة em، واختبر ما بينها.
• اجعل أهداف اللمس كافية، ولا تعتمد على مرور المؤشر، ولا تمنع التكبير.
• استخدم الخصائص المنطقية واعكس الأيقونات الاتجاهية في النسخة العربية.
• اختبر على أجهزة حقيقية بالمحتوى الحقيقي وباللغتين.
• ولترى موقع التصميم المتجاوب ضمن مراحل المشروع كاملة، ارجع إلى الدليل الشامل لبناء موقع شركتك، وإلى أساسيات تصميم واجهات المستخدم وتجربة المستخدم لأسس الواجهة نفسها.