التصميم للجوال أولًا في السوق السعودي: ما تقوله الأرقام فعلًا

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

الأرقام التي تهمّك هي أرقامك

قبل أي قرار، افتح أداة التحليلات لديك وانظر إلى ثلاثة أشياء: نسبة الجلسات من الهاتف، والصفحات التي يدخل منها زوّار الهاتف، ونسبة إكمال الهدف — طلب أو نموذج أو اتصال — على الهاتف مقارنة بالحاسوب. في تجربتنا، الفجوة بين الاثنين في نسبة الإكمال هي أوضح مؤشّر على أن الموقع صُمّم للحاسوب ثم «جُعل متجاوبًا». التقارير العامة عن السوق تقول إن الهاتف يغلب؛ أرقامك تقول أين يخسر موقعك تحديدًا.

ما الذي يتغيّر في ترتيب المحتوى

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

• سؤال واحد لكل صفحة: ما الذي يريده زائر الهاتف من هذه الصفحة؟ الإجابة تذهب إلى الأعلى، وما عداها يتبعها.
• وسيلة التواصل قريبة: زرّ الاتصال أو واتساب في متناول الإبهام، لا في تذييل الصفحة.
• العناوين تقول شيئًا: على الهاتف يقرأ الزائر العناوين ويتخطّى الفقرات، فالعنوان الذي يقول «خدماتنا» لا يفيد، والذي يقول ما الخدمة يفيد.
• الصور التي لا تضيف تُحذف: صورة الديكور التي تملأ الشاشة الكبيرة تدفع المحتوى على الهاتف إلى ما تحت الطيّة.

التنقّل والنماذج

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

1. أقلّ عدد ممكن من الحقول. كل حقل على الهاتف جهد أكبر منه على لوحة المفاتيح.
2. نوع الحقل الصحيح: حقل الهاتف يفتح لوحة الأرقام، وحقل البريد يفتح لوحة فيها «@».
3. رسائل الخطأ بجانب الحقل، لا في أعلى الصفحة حيث لا يراها أحد.
4. زرّ الإرسال بحجم يُضغط بالإبهام دون تصويب.

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

الأداء على شبكة الهاتف

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

الخطوط العربية على الشاشة الصغيرة

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

الاختبار على أجهزة حقيقية

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

ما الذي تطلبه من المزوّد

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

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