2.5التصميم المتجاوب & المعاينة على الهاتف
الأساسي في 30 ثانية
- الموقع المتجاوب يكيّف تخطيطه مع الشاشة: ثلاثة أعمدة على الحاسوب تتكدّس على الهاتف.
- يفهرس Google نسخة الهاتف بالأولوية (mobile-first): التجاوب ليس اختياريًا.
- نتحقّق بـمعاينة حسب الجهاز في المحرّر، ثم على هاتف حقيقي: نص مقروء، أزرار متباعدة، صور غير متجاوزة.
حالة مصغّرة متسلسلة — الورشة على الهاتف
يتصفّح سمير موقع حسن على هاتفه: المعرض يتجاوز الحدود، وعنوان ضخم، وزر التواصل ملتصق بالحافة. يدرك أن أغلب زوار الورشة سيصلون من الهاتف، غالبًا عبر الشبكات الاجتماعية. يعيد ضبط التجاوب قبل التسليم.
تكملة الحالة 2.4 — الصفحة الرئيسية مكوّنة، نتحقّق على كل الشاشات.
1. التجاوب والهاتف أولًا
التصميم المتجاوب يكيّف التخطيط تلقائيًا مع حجم الشاشة: نسخة واحدة من الموقع، مقروءة على الحاسوب واللوحي والهاتف. تديرها القوالب الجيدة أصليًا، لكن المحتوى المضاف قد يكسر هذا التكيّف — صورة عريضة جدًا، جدول، عمود مضبوط خطأً.
يطبّق Google mobile-first: يفهرس أولًا نسخة الهاتف. الموقع الصعب القراءة على الهاتف يُعاقَب، فضلًا عن نفور الزوار. يعتبر سمير الهاتف شاشة المرجع، لا خيارًا.
2. التحقّق والتصحيح
يوفّر محرّر الكتل معاينة حسب الجهاز (حاسوب، لوحي، هاتف) تُظهر العرض دون مغادرة WordPress. بعض الكتل تتيح إعدادات حسب الجهاز: إخفاء عنصر على الهاتف، ضبط حجم خط أو تكديس أعمدة. ثم نصحّح العيوب الكلاسيكية.
أكثر مشاكل الهاتف شيوعًا: نص صغير جدًا، أزرار متقاربة، صور تتجاوز الحدود، أعمدة لا تتكدّس، قائمة غير مقروءة. بعد المعاينة، يختبر سمير على هاتف حقيقي أو عبر أدوات المتصفّح: الاختبار الحقيقي يكشف ما تخفيه المعاينة.
🔎 مثال ملموس — تصحيح معرض الهاتف (حالة سمير)
المشكلة: معرض بثلاثة أعمدة يتجاوز الحدود على الهاتف.
1. معاينة الهاتف: ملاحظة التجاوز.
2. ضبط المعرض على عمود واحد على الهاتف.
3. تصغير عنوان البطل على الشاشة الصغيرة.
4. إبعاد زر التواصل.
→ اختبار على هاتف حقيقي: جيد.النتيجة: صفحة مقروءة ومريحة على الهاتف.
الدرس: المعاينة ترشد، والهاتف يؤكّد.
مفردات القسم
- التصميم المتجاوب
- تكيّف تلقائي للتخطيط مع حجم الشاشة.
مثال بسيط: المجموعات الثلاث تتكدّس على الهاتف.
ما ليس كذلك: تثبيت عرض ثابت يتجاوز الحدود.
رد فعل: موقع واحد، كل الشاشات.
- mobile-first
- يفهرس Google ويقيّم نسخة الهاتف من الموقع بالأولوية.
مثال بسيط: موقع غير مقروء على الهاتف يفقد ترتيبه.
ما ليس كذلك: الاختبار على الحاسوب فقط.
رد فعل: الهاتف = المرجع.
- المعاينة حسب الجهاز
- أزرار حاسوب/لوحي/هاتف في المحرّر لرؤية العرض.
مثال بسيط: ينتقل سمير إلى وضع الهاتف في المحرّر.
ما ليس كذلك: النشر دون النظر إلى الهاتف أبدًا.
رد فعل: تحقّق قبل النشر.
- إعدادات حسب الجهاز
- خيارات كتلة تتيح ضبط الحجم أو الأعمدة أو الظهور حسب الشاشة.
مثال بسيط: إخفاء عنصر زخرفي على الهاتف.
ما ليس كذلك: حذف محتوى مفيد للجميع.
رد فعل: تكييف، لا بتر.
- العيوب الشائعة على الهاتف
- نص صغير جدًا، أزرار ملتصقة، صور متجاوزة، أعمدة لا تتكدّس، قائمة غير مقروءة.
مثال بسيط: زر تواصل ملتصق بحافة الشاشة.
ما ليس كذلك: تجاهل هذه العيوب لأن الحاسوب مثالي.
رد فعل: تتبّع هذه العيوب الخمسة.
في التطبيق — التحقّق من العرض على الهاتف وتصحيحه
- في المحرّر، بدّل المعاينة إلى وضع الهاتف.
- تتبّع العيوب: القراءة، الأزرار، الصور، الأعمدة، القائمة.
- صحّح الأحجام والأعمدة، واختبر قائمة الهامبرغر.
- تحقّق على هاتف حقيقي أو بأدوات المتصفّح.
نص جاهز — الطمأنة بشأن الهاتف (20 ثانية)
«أغلب زواركم سيصلون من هاتف. أتحقّق من كل صفحة على الهاتف: نص مقروء، أزرار متاحة، صور لا تتجاوز الحدود. ينظر Google إلى هذه النسخة أولًا، لذا هذا مفيد أيضًا لظهوركم.»
اربط الهاتف بتجربة العميل والظهور في البحث.
نموذج نسخ ولصق — فحص الهاتف
الصفحة المختبرة: _______________
النص مقروء: نعم / لا
الأزرار كبيرة ومتباعدة بما يكفي: نعم / لا
الصور بلا تجاوز: نعم / لا
الأعمدة متكدّسة: نعم / لا
القائمة قابلة للاستخدام: نعم / لا
اختبار على هاتف حقيقي: نعم / لامعرض صور
عمود واحد على الهاتف، وعمودان على اللوحي، وثلاثة على الحاسوب.
جدول أسعار
غالبًا غير مقروء على الهاتف: يُفضّل بطاقات متكدّسة.
قائمة مثقلة
اختصر إلى المداخل الأساسية وتحقّق من قائمة الهامبرغر.
متجر
اختبر مسار الشراء على الهاتف، لا الصفحة الرئيسية فقط.
✓ ممارسات جيدة
- اعتبار الهاتف شاشة المرجع.
- استخدام المعاينة حسب الجهاز قبل النشر.
- التأكيد دائمًا على هاتف حقيقي.
✗ أخطاء شائعة
- النشر دون النظر إلى الهاتف.
- تصغير كل النص ليتّسع المحتوى.
- تعطيل تجاوب القالب.
النقاط الأساسية
- التجاوب يكيّف التخطيط مع كل شاشة.
- Google يفهرس نسخة الهاتف أولًا.
- المعاينة حسب الجهاز ترشد التصحيحات.
- الاختبار على هاتف حقيقي يبقى ضروريًا.
تحدي 48 ساعة — طبّق غدًا
افتح ثلاث صفحات من موقعك على هاتف حقيقي: دوّن كل عيب (نص، أزرار، صور، أعمدة، قائمة) وصحّح ثلاثة منها على الأقل. 20 دقيقة.
- أتحقّق من صفحة بمعاينة الهاتف.
- أصحّح عيوب التجاوب الشائعة.
- أختبر على هاتف حقيقي قبل التسليم.
أسئلة شائعة
قالبي متجاوب، هل أتحقّق مع ذلك؟
نعم. يوفّر القالب أساسًا متكيّفًا، لكن الكتل والصور والجداول التي تضيفها قد تكسر العرض. يبقى التحقّق صفحة بصفحة ضروريًا.
كيف أختبر دون هاتف؟
استخدم معاينة الهاتف في المحرّر، ثم أدوات تطوير المتصفّح (F12 ← وضع الجهاز). تحاكي هذه الأدوات الحجم، لكن الاختبار الحقيقي أفضل للقراءة واللمس.
هل يخصّ mobile-first تحسين الظهور أيضًا؟
نعم: يفهرس Google نسخة الهاتف أساسًا. الموقع البطيء أو غير المقروء على الهاتف قد يُصنَّف أدنى، فضلًا عن فقدان زوار.
صفحة المجموعات تتجاوز الحدود على الهاتف. ما الانعكاس الصحيح؟