تصميم المواقع

ما هو التصميم المتجاوب

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

  • الدرس 5 من 12
  • مبتدئ
  • مجاني، دون تسجيل

تخطيط واحد، والعروض التي عليه أن يعمل عندها

العمود هو عرض الشاشة. والشارات الثلاث أدناه هي نطاقات هذا الموقع الحقيقية الثلاثة.

1200 0
320 بكسلالعرض الأدنى الذي يقول WCAG إن المحتوى يجب أن يعمل عنده دون تمرير أفقي
  • تحت 640 بكسلالحد الأكثر تكراراً في هذا الموقع. كل شيء يصير عموداً واحداً.
  • من 641 إلى 1100 بكسللوحي وحاسوب محمول صغير. والترويسة ما زالت شريط الهاتف.
  • من 1101 بكسل فأعلىتُشغَّل ترويسة الحاسوب والقائمة الكبيرة.

و320 حد أدنى لا هدف، و1200 سقف عمود المحتوى في هذا الموقع لا معيار. ورقمك أنت يأتي من الموضع الذي ينكسر فيه تخطيطك.

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

ماذا يعني المتجاوب بالضبط؟

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

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

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

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

وفي هذا الموقع يجلس ذلك السطر في السطر الرابع عشر من header.php في القالب. ولا يهم كم مِن استعلامات الوسائط تكتب؛ فبدون هذا السطر لن يتصرف أي منها كما تتوقع.

لماذا نبدأ من أضيق حالة؟

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

وفي الشفرة أمامك طريقان. اكتب الحالة الأساسية ضيقة وأضف العروض الأكبر بـmin-width، أو اكتب الحالة الأساسية بمقاس الحاسوب وتراجع بـmax-width. ولموقع عام جديد اختر الأول: متصفح الهاتف لا يعالج قواعد زائدة، وCSS لديك لا يتراكم مع كل نقطة توقف تُضاف. أما لإعادة بناء موقع قديم مصمم للحاسوب وحده فالثاني أصدق؛ لا يمكنك التظاهر بأن ما هو قائم غير قائم.

ولننهِ هنا سوء فهم واحداً: البدء بالهاتف ترتيبُ كتابة، لا رخصة لتقديم محتوى أقل على الهاتف. وتقول غوغل صراحة إن محتوى نسخة الهاتف ينبغي أن يكون معادلاً لنسخة الحاسوب، وإن كان أقل فأكمله. التصميم قد يختلف؛ المحتوى لا.

نبدأ ضيقاً أم عريضاً؟ كلاهما خيار حقيقي

الفرق ليس في الإمكانات، بل في نقطة البداية وفيما إذا كان موقعك جديداً أم قديماً.

ابدأ ضيقاً بـmin-width

  • الحالة الأساسية بلا استعلام وسائط وبعمود واحد
  • متصفح الهاتف لا يعالج قواعد زائدة
  • تتحدد أولوية المحتوى من البداية
  • الاختيار الصحيح لمشروع جديد

ابدأ عريضاً بـmax-width

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

ومزج الاثنين في ملف واحد هو بالضبط حيث يفلت CSS من يدك. اختر واحداً والتزم به في المشروع كله.

من أين نأخذ رقم نقطة التوقف؟

من تخطيطك أنت، لا من قائمة أجهزة. هذه أهم جملة في الدرس، ومعظم الشروح تقول عكسها: فالأرقام 768 و992 و1200 التي تتكرر في كل مكان هي إعداد افتراضي لإطار عمل ولا علاقة لها بموقعك.

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

والمثال الحي هو هذا الموقع. ملف main.css في القالب فيه 43 كتلة استعلام وسائط تصنع معاً 17 حداً عرضياً مختلفاً: 430 و580 و600 و640 و700 و720 و780 و820 و860 و880 و900 و920 و980 و1100 و1259 و1299 و1359. ولا واحد منها 768 أو 992. وعدد الكتل أكبر من عدد الحدود لأن بعض الحدود مكتوبة مرتين، مرة بـmax-width ومرة بـmin-width أعلى ببكسل واحد: 640 و641، و1100 و1101. ولكل رقم حكايته: تحت 1100 تُسلّم ترويسة الحاسوب الزجاجية مكانها لشريط الهاتف، وتحت 780 يتحول كل جدول محتوى فيه ثلاثة أعمدة أو أكثر إلى بطاقات فوق بعضها، لأن جدولاً بثلاثة أعمدة غير قابل للقراءة على الهاتف.

ونقطة يطول تعلّمها: نقطة التوقف ملك المكوّن لا ملك الصفحة. فالبطاقة الجالسة داخل عمود ضيق لا تنكسر عند عرض النافذة؛ بل عند عرض حاوِيها هي. ولهذا أضيف @container إلى CSS، ولهذا يمكن وضع البطاقة نفسها في موضعين من صفحة واحدة فتصحّ في أحدهما وتخطئ في الآخر.

وحدات نسبية وحاويات وصور تحجز مكانها مسبقاً

استعلام الوسائط آخر أداة لا أولها. فالتخطيط المكتوب بوحدات نسبية من البداية يجتاز معظم العروض بلا أي استعلام. أعطِ العروض بالنسب المئوية أو بـfr في الشبكة، واضبط حجم الخط بـrem، وحيث ينفع فعلاً استعمل clamp() ليتحرك مقدار واحد بنعومة بين حدين. ولـpx موضعه في حد أو فجوة صغيرة؛ أما لعرض كتلة فغالباً لا.

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

وهنا يدخل الاتجاه من اليمين إلى اليسار، وهو أكثر من تفصيل. اكتب margin-inline-start بدل margin-left فيخدم ملف CSS واحد الفارسية والعربية كما يخدم الإنجليزية والتركية، ويأخذ المتصفح الاتجاه من dir على وسم html. وهذا الادعاء قابل للعدّ في هذا الموقع: في كامل main.css سبعون إعلاناً بخصائص منطقية وصفر استعمال لـmargin-left أو margin-right أو padding-left أو padding-right.

ثم الصور. كل img يحتاج width وheight، حتى حين يغيّر CSS حجمه. فمن نسبة هذين يحجز المتصفح المساحة قبل وصول الملف، فلا يقفز النص تحته أثناء التحميل. وضع srcset وsizes بجانبهما ليجلب الهاتف النسخة الصغيرة لا نسخة الحاسوب. وفي تدوينات هذا الموقع تحمل كل صورة الاثنين، وتعرض الصورة البارزة عرضين: 720 و1200 بكسل.

ما الذي نفحصه، وما ليس تجاوباً

قائمة فحص التجاوبقبل النشر

افحص هذه

  • وسم viewport موجود في head
  • لا تمرير أفقي عند 320 بكسل
  • عند تكبير أربعمئة بالمئة يبقى المحتوى مقروءاً
  • كل صورة لها width وheight
  • الأزرار والأيقونات 24 في 24 بكسل على الأقل
  • محتوى الحاسوب نفسه موجود على الهاتف

هذه ليست تجاوباً

  • إخفاء نصف الصفحة على الهاتف بـdisplay none
  • تصغير الصفحة كلها بالتكبير بدل إعادة التخطيط
  • بناء نطاق فرعي منفصل للهاتف
  • نسخ نقاط توقف إطار عمل دون اختبار

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

ثلاثة فحوص قبل أن تقول إنه متجاوب

أولاً، 320 بكسل. يقول معيار Reflow في معيار WCAG إن المحتوى يجب أن يكون قابلاً للاستعمال عند عرض يعادل 320 بكسل CSS دون تمرير في اتجاهين. ويظن معظم الناس أن هذا الرقم عن الهواتف القديمة، لكن نقطة الوثيقة نفسها في مكان آخر: 320 بكسل CSS تعادل شاشة عرضها 1280 بكسل عند تكبير أربعمئة بالمئة. فالمعيار في الحقيقة عمّن يحتاج إلى تكبير الصفحة لضعف بصره، لا عن الهاتف.

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

ثالثاً، المحتوى. هل تقول النسخة التي تراها على الهاتف ما تقوله نسخة الحاسوب؟ إن أُخفيت كتلة على الهاتف بـdisplay: none فتلك الكتلة باهتة عملياً عند غوغل أيضاً، لأن الفهرسة تجري من نسخة الهاتف.

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

المسار السريع مع الذكاء الاصطناعي

تكتب النماذج اللغوية استعلامات الوسائط في ثوانٍ. وما لا تستطيعه هو معرفة أين ينكسر تخطيطك <em>أنت</em>، ولأنها لا تعرف تلجأ إلى الأرقام التي تكررها الشروح. فالمسار السريع ليس أن تطلب من النموذج نقاط التوقف؛ بل أن تقيسها بنفسك وتترك للنموذج كتابة CSS فقط. ويكفي هنا نموذج سريع ورخيص، لأن تحويل قائمة أرقام إلى بضع قواعد عمل آلي؛ واختيارنا الحالي في <a class="text-link" href="/ar/ai/">قسم الذكاء الاصطناعي</a>.

  1. افتح الصفحة وضيّق النافذة درجة درجة. ودوّن كل عرض ينكسر عنده شيء فعلاً بجملة واحدة: ماذا انكسر وكيف. وثلاثة أو أربعة عروض أمر طبيعي.
  2. خذ CSS ذلك المكوّن وحده لا الملف كله. فالنموذج يعمل بخمسين سطراً أفضل من خمسة آلاف، وأنت أيضاً تقرأ المخرجات أسهل.
  3. املأ الوصفة أدناه بعروضك وأوصافك ثم شغّلها.
  4. ضع CSS وضيّق مرة أخرى. وإن ظهر كسر جديد فأضفه إلى القائمة وشغّل الوصفة ثانية؛ ولا تلصق استعلاماً آخر على المخرجات يدوياً.
  5. وافحص الأخيرين بنفسك: 320 بكسل، وحجم الأزرار على هاتف حقيقي. فهذان لا يفعلهما نموذج نيابة عنك.

وصفة جاهزة للنسخ

هذه شفرة CSS الخاصة بمكوّن {اسم المكوّن}:

{الصق CSS هنا}

ينكسر التخطيط عند هذه العروض:
- {العرض}px: {ما الذي ينكسر}
- {العرض}px: {ما الذي ينكسر}

اكتب أقل عدد من استعلامات الوسائط يصلح هذه الكسور وحدها.
القواعد:
1) استعمل min-width. والحالة الأساسية بلا استعلام وسائط يجب أن تكون الحالة الضيقة.
2) استعمل margin-inline-start وpadding-inline-end بدل margin-left وpadding-right.
3) لا تضع أي عرض px ثابت إلا الأرقام التي أعطيتك.
4) لا تضف أي نقطة توقف ليست في قائمتي أعلاه.
5) اكتب فوق كل استعلام تعليقاً من سطر واحد يشرح لماذا هذا الرقم بالذات.
أخرج CSS فقط.

قبل أن تثق بالناتج: النموذج لا يرى صفحتك؛ يرى فقط ما لصقته. وإن قِست الأرقام خطأً فستنفّذ المخرجات الخطأ نفسه بترتيب وأناقة. وشيئان خارج متناوله: اختبار 320 بكسل، ولمس زر بالإصبع على هاتف حقيقي. وهذان من عملك أنت.

الذكاء الاصطناعي في هذا العمل

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

أدوات تساعد فعلا

  • Claude جيد في إعادة كتابة ملف CSS طويل بخصائص منطقية وشرحه سطراً سطراً. وإيران ليست في أي من قائمتي الدول المدعومة لدى أنثروبيك؛ قرأنا ذلك في صفحة أنثروبيك نفسها.
  • Gemini يكفي للأسئلة القصيرة عن قاعدة واحدة ولاستخراج نسخة شبكية من تخطيط، ويتعامل مع الفارسية جيداً. وصفحة غوغل نفسها تقول إن تطبيق جيميناي يعمل في أكثر من مئتين وثلاثين دولة ومنطقة، وإيران ليست في تلك القائمة.
  • ChatGPT الخيار الأشيع ومقبول لهذه المهام. ولا ندّعي هنا شيئاً عن إتاحته أو سعره: فصفحة الدول المدعومة لدى OpenAI ترد على خادمنا بالرمز 403، ونحن لا نكتب ادعاءً بلا سند.

اين ينقلب ضدك

الخطر الأساسي هنا هو الرقم. فالنماذج دُرِّبت على عقد من الشروح وإعدادات أطر العمل الافتراضية، ورأينا مراراً في استعمالنا أنك إن لم تعطها عرضاً لجأت إلى 768 و992، وهما رقمان لا يظهران ولو مرة في كامل main.css بهذا الموقع. والنتيجة موقع يبدو جيداً في المحاكي وينكسر عند العرض الحقيقي للمستخدم. والخطر الثاني أدق: النموذج لا يحكم على ما لم يقسه. فهو لا يحسب نسبة تباين من نص ولا يجري اختبار Reflow، ودليل Easy Checks من W3C نفسه يقول إن المراجعة الآلية لا تحل محل البشرية. فقِس الأرقام بنفسك واطلب القاعدة من النموذج. ولمعرفة كيفية الدفع لكل أداة من إيران، انظر دليل الشراء.

المصادر: W3C: Understanding SC 1.4.10 Reflow W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

حدود هذه النصيحة

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

من عملنا نحن

قاعدة أن نقطة التوقف ملك تخطيطك يمكن عدّها في هذا الموقع نفسه. ففي يوم مراجعة هذا الدرس كان في main.css بقالب rgb.ir ثلاثة وأربعون كتلة استعلام وسائط تصنع بينها سبعة عشر حداً عرضياً مختلفاً، أصغرها 430 وأكبرها 1359. ولا واحد منها 768 أو 992، أي لا واحد منها جاء من قائمة أجهزة أو إعداد افتراضي لإطار عمل. والرقم 1200 يظهر في ذلك الملف فعلاً، لكن ليس كنقطة توقف: إنه قيمة المتغير --wrap، أي سقف عرض عمود المحتوى. ورقم آخر قابل للعدّ في الموضع نفسه: في كامل الملف سبعون إعلاناً بخصائص منطقية وصفر استعمال لـmargin-left أو padding-right، والسبب بسيط؛ فهذا الملف الواحد عليه أن يقود الفارسية والعربية من اليمين إلى اليسار كما يقود الإنجليزية والتركية. وكل هذا يمكن إعادة عدّه بأمر grep واحد على الملف نفسه.

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

هل المتجاوب يختلف عن الملائم للهاتف؟

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

كم نقطة توقف أحتاج؟

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

هل يحصل الموقع المتجاوب على ترتيب أفضل؟

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

واصل التعلم