موقعك ينكسر على الجوال: الأعراض، السبب، وإعادة البناء موبايل-أولاً
إذا كان موقعك ينكسر على الجوال فأنت تخسر أغلب زوّارك، لأن أغلب زوّارك يفتحون موقعك من الهاتف. والانكسار نادراً ما يكون شيئاً واحداً: تمرير أفقي بسبب جدول، قائمة سطح مكتب متراكمة فوق بعضها، أزرار أصغر من مساحة الإصبع، ونصّ عربي مقصوصة حركاته من أعلى السطر. وكلمة قالب متجاوب تعني أن الأعمدة تتكدّس، لا أن الصفحة صالحة للاستعمال بإصبع واحد وأنت واقف في الشارع. الحل العملي إعادة بناء تبدأ من شاشة الجوال ثم تكبر، لا العكس.
نُشر في:
ابدأ مجاناًعشرة أعراض تعني أن موقعك غير صالح للجوال
افتح موقعك على جوالك الآن ومرّ على هذه القائمة. كل عرض منها يقابله سبب معروف في الكود، وأغلبها تظهر مع بعضها لا وحدها.
تمرير أفقي
تقدر تسحب الصفحة يميناً وشمالاً. السبب دائماً عنصر بعرض ثابت: جدول أسعار، صورة، أو حاوية مكتوب عرضها ١٢٠٠ بكسل. النتيجة أن نصف كل سطر مخفي.
قائمة تتكدّس فوق بعضها
روابط القائمة تنزل سطراً سطراً ويصير الشعار في منتصفها. القالب لم يحوّل القائمة إلى زر قائمة واحد، فبقيت قائمة سطح مكتب مضغوطة.
أزرار متلاصقة أصغر من الإصبع
زرّان بينهما مسافة أقل من مساحة إصبع. الزبون يضغط إلغاء وهو يقصد تأكيد، ثم يقرّر يكلّمك على الواتساب بدل أن يكمل الطلب.
حركات التشكيل مقصوصة
الفتحة والضمّة والشدّة تُقصّ من أعلى السطر لأن ارتفاع السطر مضبوط على تصميم لاتيني. مشكلة عربية بحتة، والقالب الإنجليزي لا ينتبه لها أصلاً.
حروف عربية متفكّكة
تباعد أحرف مطبّق على النص العربي، فتنفصل الحروف عن بعضها ويصير النص شبه غير مقروء. غالباً يجي من إعداد عناوين مصمّم لخط لاتيني.
نص محروق داخل صورة
البانر فيه العرض والسعر مكتوبان داخل الصورة نفسها. على شاشة الجوال يصير حجم الخط ٩ بكسل: لا يُقرأ، ولا يُنسخ، ولا تراه محرّكات البحث.
نموذج لا يُملأ بيد واحدة
حقول بعرض ثابت، ولوحة المفاتيح تغطّي زر الإرسال، وحقل الجوال يفتح لوحة حروف بدل لوحة أرقام. كل واحدة منها سبب كافٍ لترك النموذج.
تأثيرات تعمل بمرور الماوس فقط
قائمة فرعية أو معلومة سعر تظهر عند مرور المؤشّر. لا يوجد ماوس في الجوال، فالمحتوى ببساطة غير موجود بالنسبة لأغلب زوّارك.
زر واتساب عائم يغطّي زر الشراء
خطأ متكرر في المواقع العربية. الزر العائم يجلس فوق زر الإجراء الأساسي أو فوق آخر سطر في النموذج، خصوصاً على الشاشات القصيرة.
الصفحة تفتح مصغّرة
وسم viewport ناقص أو خاطئ، فيعرض المتصفّح الصفحة بعرض سطح المكتب مصغّرة. الزائر يزوّم بإصبعه ليقرأ، وهذه إشارة واضحة أن الموقع لم يُصمَّم للجوال إطلاقاً.
لماذا ينكسر قالب يُقال عنه متجاوب
لأن التجاوب في أغلب القوالب طبقة تصحيح فوق تصميم سطح مكتب، لا أساس. التصميم بُني على شاشة عريضة، ثم أُضيفت نقاط توقّف تخفي عناصر أو تكدّسها عند حد معيّن من العرض.
النتيجة أن صفحة الجوال نسخة مضغوطة من صفحة كبيرة: مليئة بعناصر مخفية ما زالت تُحمَّل، وترتيبها ترتيب الشاشة الكبيرة لا ترتيب أولويات زائر الجوال. الرقم الذي يحتاجه الزائر أول شيء يكون في آخر الصفحة لأن مكانه في التصميم العريض كان في الفوتر.
وكل إضافة جديدة تدخل بترميزها الخاص الذي لم يمرّ على نقاط التوقّف تلك. لهذا يقول التاجر: الموقع كان مضبوطاً وانكسر — الموقع لم ينكسر فجأة، بل دخل عليه ترميز لم يُختبر على الشاشة الصغيرة.
وعربياً تتضاعف المشكلة. القالب مبني بترتيب من اليسار لليمين، وخصائص الاتجاه أُضيفت لاحقاً، فتلاقي سهماً يشير في الاتجاه الخطأ، أو حقل بحث محاذاته يسار داخل صفحة يمين، أو أيقونة سلة قفزت للطرف الغلط عند التكدّس.
البناء موبايل-أولاً يقلب الترتيب من الأساس: تصمّم شاشة الجوال أولاً، وتضع فيها ما يستحق فعلاً. أي عنصر لا يستاهل مكانه في الشاشة الصغيرة لا يستاهل أن يوجد في الكبيرة أيضاً.
كيف تعيد البناء بحيث يشتغل على الجوال
الصق رابط موقعك الحالي
ابني يقرأ الصفحة ويسحب الشعار والألوان والخطوط ومقتطف النص، فتحتفظ بهويتك ولا تبدأ من صفر. تظهر لك حالة: عم أدرس الرابط وأجيب صوره وشعاره، وتستغرق القراءة ثوانٍ.
حدّد أولوية الشاشة الصغيرة بجملة واحدة
اكتبها صريحة: أهم ثلاثة أشياء يشوفها زائر الجوال هي رقم الواتساب، العنوان، وقائمة الأسعار. الترتيب الذي تكتبه يصير ترتيب الشاشة الصغيرة، وهذه أهم جملة في المحادثة كلها.
اطلب سلوك الجوال صراحةً
قائمة جانبية بزر واحد، شريط اتصال ثابت أسفل الشاشة لا يغطّي المحتوى، جدول الأسعار يتحوّل إلى بطاقات، وكل صورة بنسبة أبعاد محجوزة حتى لا تقفز الصفحة أثناء التحميل.
افحص بإصبعك أنت لا بنافذة مصغّرة
تصغير نافذة المتصفّح ليس اختباراً. افتح النسخة على جوالك: هل يوجد تمرير أفقي؟ هل تقدر تكمّل الطلب بيد واحدة وأنت واقف؟ هل تقرأ العناوين بدون تزويم؟
صحّح بالصورة لا بالكلام
في المحرّر اسحب مربعاً على المعاينة لالتقاط المنطقة وأرفقها بالمحادثة، واكتب: هذا الزر مقصوص. صورة المنطقة أوضح من عشرة أسطر وصف، وتوفّر جولة أو جولتين.
انشر واربط النطاق
انشر على نطاق فرعي مجاني على ebnii.com أولاً وافتحه من جوالك أنت لا من متصفّح المكتب، وبعد ما ترضى وجّه نطاقك الخاص بشهادة SSL تلقائية. وكل انكسار تلاقيه بعدها صحّحه بلقطة من المعاينة؛ الاسترجاع لنسخة سابقة لا يكلّف كريدت لو التصحيح خرّب شيئاً.
متى يكفي إصلاح موضعي، ومتى تعيد البناء
افحص أعراضك ثم قرّر. الفرق بين العمودين هو الفرق بين عنصر مكسور وتخطيط مبني لشاشة أخرى.
يكفيه إصلاح موضعي
- جدول واحد بعرض ثابت يسبّب التمرير الأفقي
- زر واتساب عائم يغطّي زر الطلب في الشاشات القصيرة
- صورة بانر واحدة غير مضغوطة تبطّئ الصفحة
- حقل الجوال يفتح لوحة حروف بدل لوحة أرقام
- عنوان طويل ينكسر في شاشة صغيرة دون بقية الصفحة
يحتاج إعادة بناء موبايل-أولاً
- القائمة والنماذج والجداول تنكسر كلها معاً
- الصفحة تفتح مصغّرة لأن وسم viewport ناقص
- محتوى أساسي لا يظهر إلا بمرور المؤشّر
- الحركات مقصوصة وتباعد الأحرف يفكّك الكلمات في كل الصفحات
- ترتيب الجوال هو ترتيب الشاشة الكبيرة: رقم التواصل في آخر الصفحة
- كل تحديث إضافة يعيد كسر ما أصلحته الشهر الماضي
شكل صفحة بُنيت للشاشة الصغيرة أولاً
ترقيع التجاوب مقابل بناء موبايل-أولاً
| النقطة | بناء موبايل-أولاً مع ابني | ترقيع القالب الحالي |
|---|---|---|
| نقطة البداية | تصميم يبدأ من شاشة الجوال ثم يكبر | تصميم سطح مكتب ثم يُضغط |
| العناصر غير الضرورية | لا تُبنى أصلاً | مخفية بالتنسيق لكنها ما زالت تُحمَّل |
| الطباعة العربية | فحوصات تحمي من قصّ الحركات ومن تباعد الأحرف الخاطئ | إعدادات خط موروثة من تصميم لاتيني |
| اتجاه الصفحة | RTL أساس التصميم لا إضافة لاحقة | طبقة معكوسة فوق تخطيط يساري |
| التأكد أن الصفحة ترسم فعلاً | الوكيل يفتح صفحة مشروعك المُجمّعة ويتحقّق قبل أن يعلن النجاح | تكتشفه أنت من شكوى زبون |
| تعديل بعد الإطلاق | صورة من المعاينة وجملة عربية، والاسترجاع بدون كريدت | تذكرة دعم أو انتظار مطوّر |
حدود صادقة قبل أن تبدأ
ابني لا يفحص موقعك القديم على الأجهزة ولا يعطيك تقرير تجاوب. التحقّق البصري يعمل على صفحات مشروعك أنت على نطاق مشروعك الفرعي، ولا يمكن توجيهه إلى موقع طرف ثالث. اختبار موقعك الحالي على الجوال تسويه أنت، وهو اختبار خمس دقائق.
لقطة الشاشة التي قد تُلتقط لموقعك القديم مرجع أسلوب فقط، ومعها منع صريح للنسخ الحرفي. وهذا مقصود هنا بالذات: لو نُقل تخطيط سطح المكتب كما هو لورّثك نفس الكسر الذي جئت تهرب منه. الهوية تنتقل — الألوان والشعار والخط — أما ترتيب الشاشة الصغيرة فيُعاد تفكيره من الصفر.
وما ننقل صفحاتك كلها دفعة واحدة: كل رابط صفحة واحدة، وحتى ٣ روابط في الرسالة، ومقتطف النص سقفه ٢٥٠٠ حرف. الصفحات اللي فيها أسعار أو شروط دقيقة الصقها بنفسك — هذي بالذات ما تحتمل نقصاً.
وإذا لم يُفتح الرابط خلال ١٢ ثانية، أو كان رابط خرائط جوجل المتجاوَز عمداً، فابني يسألك بدل أن يخمّن. وفي البناء الأول تحديداً، إذا كان الرابط غير مقروء ونصّك أقل من ١٢٠ حرفاً، يتحوّل الدور إلى أسئلة — وهذا أفضل من موقع متخيّل.
أسئلة شائعة
اقرأ أيضاً
خلّ موقعك يشتغل بإصبع واحد
الصق رابط موقعك الحالي، واطلب نسخة تبدأ من شاشة الجوال بنفس شعارك وألوانك — وصحّح أي انكسار بلقطة من المعاينة.
ابدأ مجاناً