الطريق إلى ادسنس (8): تصميم الجوال أولًا لأن جوجل وزوارك يقرؤون من الهاتف

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

أهم ما ستفعله في هذا الجزء:

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

لماذا الجوال أولًا ليس رأيًا شخصيًا

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

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

الشاشة الصغيرة تكشف ضعف تصميمك فورًا

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

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

قائمة التنقل: الوضع الأصعب على الجوال

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

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

الخطوط والمسافات: سرعة القراءة على الشاشة الصغيرة

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

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

صور المقال على الجوال: من الحجم إلى الموضع

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

الإعلانات حين تفعل لاحقًا تتعامل مع الجوال بمنطق الأبعاد أيضًا، فالوحدة الإعلانية التي تزاحم المحتوى على الشاشة الصغيرة تضاعف انزعاجها من ذلك على الحاسوب، والمساحات المحجوزة مسبقًا تحمي الصفحة من القفزات التي نفسرها في مقال Core Web Vitals. اربط بين قرارين معًا في ذهنك من اليوم: كل عنصر تضيفه لموقعك له مظهر جوال يجب أن تفحصه بنفسك، فما لا تفحصه بنفسك سيفتشه زوارك بدلًا منك وسيغادرون.

الفيديو والعناصر المدمجة على الشاشة الصغيرة

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

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

سرعة الجوال ليست نفس سرعة المكتب

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

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

القراءة الطويلة على الجوال: راحة النظر مع الوقت

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

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

النماذج والأزرار: لحظة الالتزام على الشاشة الصغيرة

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

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

الوضع الليلي: تفضيل جمهورك وليس ذوقًا جماليًا

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

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

فحص جوال حقيقي: خمس عشرة دقيقة قبل التقديم

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

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

خطوات التطبيق هذه الأسبوع

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

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

أسئلة يطرحها من يبني تجربة الجوال

هل أختبر من هاتفي الشخصي فقط أم أجهزة أخرى؟

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

هل تحتاج تطبيقًا لنشر المحتوى على الجوال؟

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

هل القوائم الجانبية تعمل على الجوال؟

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

هل القوائم المنسدلة تضر تجربة الجوال؟

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

هل يمكنني فحص الجوال من الحاسوب إن لم أجد هاتفًا؟

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

خلاصة الجزء الثامن

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