كيف تجعل موقعك متجاوبًا مع الهواتف

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

ما معنى التصميم المتجاوب فعلًا

الموقع المتجاوب يستخدم مجموعة واحدة من الصفحات والعناوين التي تتكيف مع الشاشة. فبدلًا من موقع منفصل «m.»، يغيّر CSS التخطيط عند عروض محددة تسمى نقاط الكسر (breakpoints). اللبنات الأساسية:

• وسم viewport في الـmeta يخبر متصفحات الجوال أن تستخدم العرض الحقيقي للجهاز.
• التخطيطات المرنة تستخدم النسب المئوية وflexbox وgrid بدل عروض البكسل الثابتة.
• استعلامات الوسائط (media queries) أو صفوف إطار العمل مثل md: في Tailwind، تغيّر التخطيط فوق عرض معين.
• الوسائط المرنة: صور وفيديوهات تتقلص لتناسب حاويتها.

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

الخيارات والمفاضلات

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

الأجزاء التي تنكسر عادةً

وسم viewport

إذا بدت الصفحة كموقع سطح مكتب صغير على الهاتف، فوسم viewport مفقود:

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

لا تضف maximum-scale=1 أو user-scalable=no. فمنع التكبير بالقرص يجعل الموقع أصعب على ذوي ضعف البصر.

العروض الثابتة والتمرير الأفقي

أكثر أخطاء التجاوب شيوعًا هو شيء أعرض من الشاشة: حاوية بعرض ثابت width: 1200px، أو جدول عريض، أو رابط أو كتلة كود طويلة، أو صورة دون max-width: 100%. عندها تتمرر الصفحة كلها جانبيًا. استخدم max-width بدل width، ودع النص يلتف، وامنح العناصر العريضة منطقة تمرير خاصة بها.

التنقل

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

النص وأهداف النقر

• حجم النص الأساسي حوالي 16 بكسل حد أدنى معقول على الهاتف. والحقول التي تستخدم نصًا أصغر تجعل آيفون يكبّر الشاشة عند النقر عليها.
• اجعل الأزرار والروابط سهلة الإصابة. ويحدد WCAG 2.2 AA حدًا أدنى قدره 24 في 24 بكسل CSS (أو مسافة كافية)، وحوالي 44 بكسلًا أريح للإبهام.
• اترك مسافة بين الروابط المتجاورة حتى لا ينقر الناس الرابط الخطأ.

الجداول والبيانات

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

الصور والوسائط

استخدم max-width: 100% وheight: auto، وقدّم ملفات أصغر للشاشات الصغيرة باستخدام srcset، واضبط العرض والارتفاع لتجنب قفزات التخطيط. تحتاج الفيديوهات والخرائط المضمّنة إلى غلاف متجاوب حتى تحتفظ بنسبة أبعادها. والصور الأصغر تجعل الصفحات أسرع أيضًا؛ انظر كيف تجعل موقعك أسرع.

النماذج

ضع التسميات فوق الحقول، واجعل الحقول بعرض كامل، واستخدم أنواع الإدخال المناسبة (type="email" وtype="tel" وinputmode="numeric") حتى تعرض الهواتف لوحة المفاتيح المناسبة. ضع زر الإرسال في متناول الإبهام، واحرص على أن يبقى ظاهرًا عندما تظهر لوحة المفاتيح.

التفاعلات التي تعتمد على التمرير بالمؤشر

الهواتف لا تعرف «التحويم» (hover). فالتلميحات والقوائم المنسدلة والمعاينات التي تظهر فقط عند التحويم غير مرئية للمستخدمين باللمس. اجعلها تعمل بالنقر أيضًا.

طلبات تنجح

لبناء جديد، قلها من البداية:

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

لصفحة موجودة، صف ما تراه:

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

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

خطوة بخطوة

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

أخطاء شائعة

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

قائمة فحص الجوال

• وسم viewport موجود، والتكبير غير معطل
• لا يوجد تمرير أفقي عند 320 بكسل في أي صفحة
• النص الأساسي حوالي 16 بكسل؛ والحقول لا تُكبّر الشاشة عند النقر
• أهداف النقر كبيرة بما يكفي ومتباعدة
• القائمة تعمل على الهواتف وبلوحة المفاتيح
• الجداول قابلة للقراءة على الهواتف (بطاقات، أو أعمدة أقل، أو حاوية تمرير)
• الصور والتضمينات تتحجم؛ والملفات بالحجم الصحيح
• النماذج تستخدم أنواع الإدخال الصحيحة؛ وزر الإرسال في المتناول
• لا شيء مهم يعتمد على التحويم
• تم الاختبار على هاتف حقيقي واحد على الأقل

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

التصميم المتجاوب على Mythex

ينشئ Mythex تطبيقات ويب متجاوبة، ويمكنه في خطة Pro تغليفها كتطبيقات Android وiPhone. في مساحة العمل، انقر على أيقونة الهاتف فوق المعاينة (Switch to Mobile) لرؤية تطبيقك في إطار بحجم الهاتف، واسحب حافة الإطار لتجربة عروض أخرى (المعاينة والكود). يحتوي الدليل على تعليمات بداية قصيرة لإصلاح تخطيط الشاشات الصغيرة في تعليمات التجاوب مع الجوال. واختبره على هاتف حقيقي أيضًا: افتح الرابط المنشور، أو شارك رابط معاينة وافتحه على هاتفك.

الأسئلة