كيف تجعل موقعك متوافقًا مع الجوال: 12 خطوة مجرَّبة

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

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

1. أضف وسم meta viewport

بدونه تعرض الهواتف صفحتك بعرض سطح المكتب ثم تصغّرها، فيبدو كل شيء ضئيلًا. ضع هذا في <head> كل صفحة: <meta name="viewport" content="width=device-width, initial-scale=1">. ولا تعطّل التكبير بالقيمة user-scalable=no، فهذا إخفاق في إمكانية الوصول.

2. استخدم تخطيطًا متجاوبًا يبدأ من الجوال

صمّم لأصغر شاشة أولًا، ثم أضف التعقيد للشاشات الأكبر باستعلامات الوسائط في CSS (@media (min-width: 768px)). استخدم Flexbox و Grid في CSS بدل الأعمدة ثابتة العرض، ورُصَّ التخطيطات متعددة الأعمدة في عمود واحد على الهواتف.

3. استخدم عروضًا مرنة لا بكسلات ثابتة

استبدل بـ width: 960px القيمة max-width: 960px; width: 100%. استخدم وحدات نسبية (% و rem و vw) للحاويات، وتجنب العناصر الأعرض من الشاشة، فهي تسبب التمرير الأفقي، وهو أشيع أخطاء التخطيط على الجوال.

4. اجعل الصور والوسائط متجاوبة

أضف img, video { max-width: 100%; height: auto; } إلى ملف CSS. قدّم للهواتف صورًا أصغر عبر srcset و sizes، واستخدم الصيغ الحديثة (WebP و AVIF)، وحدّد دائمًا سمتَي width و height كي لا يقفز التخطيط أثناء تحميل الصور.

5. استخدم أحجام خط مقروءة

ينبغي ألّا يقل نص المتن عن 16 بكسل على الجوال، مع ارتفاع سطر نحو 1.5. اجعل طول السطر مريحًا، وتأكد من أن النص يستوفي نسب التباين في WCAG؛ فالنص الصغير ضعيف التباين عسير القراءة على الهاتف في الأماكن المفتوحة.

6. اجعل الأزرار والروابط سهلة اللمس

ينبغي ألّا تقل أهداف اللمس عن 48 × 48 بكسل مع نحو 8 بكسل من الفراغ بينها. الروابط الصغيرة المتراصّة في التذييل أو القائمة من أكثر إخفاقات سهولة الاستخدام على الجوال تكرارًا.

7. بسّط التنقل

اطوِ القوائم الطويلة في زر قائمة واضح التسمية، وأبقِ أهم الإجراءات (البحث والسلة والتواصل) ظاهرة، وتجنب التفاعلات التي لا تعمل إلا بتمرير المؤشر، فلا تمرير للمؤشر على شاشة اللمس.

8. تجنب النوافذ المنبثقة المزعجة

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

9. هيّئ النماذج للجوال

استخدم أنواع الإدخال الصحيحة (type="email" و type="tel" و inputmode="numeric") لتعرض الهواتف لوحة المفاتيح المناسبة، وفعّل التعبئة التلقائية بالسمة autocomplete، واجعل النماذج قصيرة، وضع التسميات فوق الحقول لا بجانبها.

10. سرّع الأداء على الجوال

معالجات الهواتف وشبكاتها أبطأ. اضغط الصور وحمّلها تحميلًا مؤجلًا، وصغّر JavaScript وأجّل تنفيذه، واحذف CSS غير المستخدم، واستخدم CDN، وفعّل التخزين المؤقت. واستهدف أن تكون مؤشرات الويب الأساسية (Core Web Vitals) في النطاق «الجيد»: LCP أقل من 2.5 ثانية و CLS أقل من 0.1 و INP أقل من 200 مللي ثانية، وراجع بيانات مستخدميك الحقيقيين في Google Search Console أو PageSpeed Insights. وينبّه التدقيق المجاني للموقع إلى الأسباب الشائعة، كبطء استجابة الخادم والموارد التي تعيق العرض والصور التي بلا أبعاد؛ وتجد الحلول في لماذا موقعي بطيء.

11. أبقِ المحتوى واحدًا على الجوال وسطح المكتب

مع فهرسة الجوال أولًا، المحتوى المخفي أو المحذوف من نسخة الجوال قد لا يُفهرس إطلاقًا. أبقِ العناوين والنصوص والبيانات المنظمة والصور (بنصوصها البديلة) والوسوم التعريفية نفسها في النسختين.

12. اختبر على مقاسات أجهزة حقيقية، وبانتظام

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

كيف تختبر توافق موقعك مع الجوال

تدقيق التخطيط المتجاوب في Rudra يعرض صفحاتك على ما يصل إلى ثمانية أجهزة، هي iPhone SE و iPhone 14 و Pixel 7 و iPad و iPad Pro وثلاثة مقاسات لسطح المكتب، وينبّه إلى المحتوى الذي يتجاوز حدوده أو يتداخل، مع لقطات شاشة لكل جهاز. واجمع إليه فحصًا للموقع كله لتلتقط مشكلات الأداء على الجوال ومشكلات SEO أيضًا:

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