التصميم المتجاوب: ماذا يعني لموقعك؟
كل مصمم يقول إن مواقعه متجاوبة. وهذا شرح بسيط للتصميم المتجاوب، وهو شرط في أي تصميم موقع إلكتروني احترافي، لتتحقق بنفسك من أن الكلمة تصدق على موقعك.
ما معنى متجاوب؟
معناه موقع واحد يعيد ترتيب نفسه ليناسب الشاشة التي يُفتح عليها. ليس نسخة مستقلة للجوال، وليس صفحة الحاسوب مصغّرة حتى يتعذر قراءة نصها. المحتوى نفسه ينساب في عمود واحد على الجوال، وعمودين على الجهاز اللوحي، وتخطيط أوسع على الحاسوب. ولا يحتاج الزائر أبدًا إلى التكبير أو التحريك يمينًا ويسارًا ليقرأ.
ما الذي يتغير فعلًا على الشاشة الصغيرة؟
الأعمدة تتراصّ بعضها فوق بعض. والقائمة تُطوى في زر. والنص يُضبط حجمه ليُقرأ والجوال في اليد، والصور تتمدد بعرض الشاشة. وقد يُعاد ترتيب بعض العناصر ليأتي الأهم أولًا. والعمل المتقن يحدد كذلك ما يحتاجه زائر الجوال أكثر من غيره، كزر الاتصال، ويضعه في متناول الإبهام.
لماذا للجوال كل هذه الأهمية؟
لأن كثيرًا من زوارك سيلقون موقعك عليه أولًا، من رابط في محادثة أو منشور غالبًا، وهم واقفون في مكان ما وبيد واحدة. فإن كانت الصفحة بطيئة أو مزدحمة أو صعبة الضغط غادروا قبل أن يقرؤوا شيئًا. وفي أسواق كثيرة، واجهة الجوال هي الموقع، وواجهة الحاسوب هي ما يراه صاحبه في المكتب.
ما الذي أفحصه بنفسي؟
افتح الموقع على جوالك أنت، لا في معاينة على الحاسوب. اقرأ صفحة كاملة. اضغط كل عنصر في القائمة. املأ نموذج التواصل بلوحة مفاتيح الجوال. افتح منتجًا أو مشروعًا ثم ارجع. وجرّبه على جوال شخص آخر، ويفضَّل أن يكون بمقاس مختلف ونوع مختلف. وما يضايقك في دقيقتين يضايق زوارك كل يوم.
ما أكثر ما يختل؟
نص فوق صورة يتعذر قراءته حين تُقصّ الصورة. أزرار صغيرة أو متقاربة يصعب الضغط عليها بدقة. جداول وصور عريضة تدفع الصفحة جانبًا. نوافذ منبثقة تغطي الشاشة كلها ولا تُغلق. عناوين بحجم الحاسوب تملأ شاشة الجوال. وفي المواقع العربية، عناصر تبقى مصفوفة لاتجاه اليسار إلى اليمين بعد قلب الصفحة.
ماذا أسأل المصمم؟
اطلب أن ترى تصميم الجوال، لا أن تسمع أنه سيكون موجودًا. الجواب الحقيقي تخطيط جوال مرسوم لكل صفحة أساسية تراه قبل بناء أي شيء. واسأل عن مقاسات الشاشات التي يُختبر عليها الموقع، وهل الاختبار على أجهزة حقيقية أم في محاكٍ فقط. واسأل: هل تبقى الأجزاء التي سأعدّلها بنفسي لاحقًا متجاوبة حين أغيّر النص؟
كيف أتعامل أنا مع ذلك
في ملف Figma عندي يُرسم تخطيط الجوال بجانب تخطيط الحاسوب، وتعتمد الاثنين قبل البناء، ثم يتبعهما البناء. وإن ظهر شيء بعد النشر على جهاز ما بخلاف التصميم المعتمد فإصلاحه يدخل في دعم 180 يومًا. حدّثني عن مشروعك ومن أين يأتي أغلب زوارك، وأريك كيف تُعالَج واجهة الجوال.
تُنشر مقالات جديدة كل يوم على صفحتنا في فيسبوك: Learn with MK
عندك مشروع في بالك؟
أخبرني بما تريد بناءه، ويصلك الرد خلال 24 ساعة.
