مع الانتشار الكبير لأنواع الأجهزة الذكية التي يمكن من خلالها زيارة المواقع الإلكترونية وتصفّح الإنترنت بشكل فعّال، طرأ تغيير كبير على طريقة تصميم وتطوير تلك المواقع، وسرعان ما أصبح هذا التغيير أساسياً لنجاح العمل. فتخيّل أن تدخل عبر هاتفك الذكي إلى إحدى المواقع الإلكترونية، لتجد مقاس الشاشة مخصصاً لمتصفّح الحاسوب ولا يصلح للعرض على شاشات الأجهزة الحديثة الأصغر حجماً كالهاتف المحمول أو الأجهزة اللوحية؟
هذا ما ولّد ضرورة التصميم المتجاوب لنجاح الموقع الإلكتروني على كافة الأجهزة، فما هو هذا النوع من التصميم ولماذا هو أساسي جداً في العصر الحديث؟
ما هو التصميم المتجاوب Responsive Web Design
يمثّل التصميم المتجاوب النهج التصميمي الذي ينصّ على أن تصميم وتطوير المواقع الإلكترونية يجب أن يراعي ويستجيب لسلوك المستخدمين وبيئتهم، بناءً على حجم الشاشة التي يستخدمونها، والمنصّة والاتجاه.
يعتمد ذلك على مزيج من الشبكات ونماذج التصميم المرنة، إلى جانب الاستخدام الذكي لوسائط CSS من صور وفيديوهات.
فعندما ينتقل المستخدم من الحاسب المحمول إلى جهاز من نوع iPad على سبيل المثال، يجب على تصميم الموقع أن يتغيّر تلقائياً لاستيعاب حجم ودقة الصورة وقدرات البرمجة النصية التي تناسب نوع الجهاز المستخدم.
إضافةً إلى عملية التصميم الشكلي، فإن إعدادات البرمجة التقنية تلعب دوراً هاماً في عملية التصميم المتجاوب. على سبيل المثال، إذا كان المستخدم يعتمد على تطبيق تفعيل الشبكة الخاصة الافتراضية VPN، فيجب ألّا يحظر الموقع وصول المستخدم إلى الصفحات.
بمعنى آخر، يجب أن يتمتع الموقع بالتقنية اللازمة للاستجابة التلقائية لتفضيلات المستخدمين، مما سيساعد على التخلّص من الحاجة إلى تصميم وتطوير آليات جديدة بشكل متكرر لكل أداة أو جهاز جديد في السوق.
شرح مفهوم التصميم المتجاوب
يقدّم إيثان ماركوت، مصمم ومطوّر مواقع شهير، في إحدى مقالاته نشأة نهج التصميم المتجاوب الذكي الذي استُلهِم من الهندسة المعمارية والتصميم المعماري المتجاوب الذي يتعدّل ويستجيب لحاجات السكّان تلقائياً دون وجوب تغيير المبنى بشكل كامل.
يقول ماركوت “بدأ في الآونة الأخيرة اعتماد نهج الهندسة المعمارية المتجاوبة، الذي يعتمد بشكل أساسي على إمكانية المساحات المادية للاستجابة لوجود وحاجات الأفراد الذين يستخدمونها. إذ يقوم المهندسون المعماريون من خلال روبوتات مدمجة ومواد قابلة للتعديل بتجربة قدرات التركيبات الفنية وهياكل الجدران التي يمكن أن تنحني أو تنثني أو تتوسّع مع اقتراب الحشود منها.”
وبتطبيق هذا المبدأ على تصميم المواقع، ظهرت فكرة مشابهة وجديدة قابلة للتطبيق على المواقع الإلكترونية. لماذا يجب على المصممين تصميم موقع مخصّص لكل مجموعة من المستخدمين؟ فالمهندسون المعماريون في نهاية المطاف، لا يقومون بتصميم مبنى جديد ومخصّص لكل مجموعة فريدة من الحشود، نوعاً وحجماً.
ومن هذا المنطلق، كان على تصميم مواقع الويب أن تعتمد نهجاً مشابهاً للتصميم المعماري المتجاوب الذي يستجيب تلقائياً لاختلاف حاجات واستخدامات المستخدمين، دون إنشاء تقنيات مخصّصة ومنفصلة لكل مجموعة منهم.
آليات عمل تصميم المواقع المتجاوب
لا يركّز التصميم المتجاوب على تعديل قياس الصفحات بحسب حجم الشاشات والأجهزة المستخدمة فقط، بل يعتمد على عدّة عوامل أساسية لتحسين تجربة المستخدمين، منها:
تعديل دقة وحجم الشاشة
لا يخفى أن التطور التكنولوجي المتسارع يعمل يومياً على إنتاج أجهزة جديدة بأحجام وتقنيات مختلفة. فبعض الشاشات تعمل وفق النظام الطولي Portrait، وبعضها بنظام عرضي Landscape، ويمكن لأخرى أن تكون مربعة بشكل كامل. لا سيما أن معظم الأجهزة الحديثة تدعم تحوّل الشاشات من الإظهار الرأسي إلى الإظهار العرضي، ناهيك عن الأحجام العديدة والمختلفة لكل جهاز على حدة. لذا بات من المستحيل تصميم موقع خاص لكل جهاز أو كل شاشة بشكل منفصل ومتخصّص، وبات التصميم المتجاوب الذي يدعم مختلف الأحجام، إلى جانب القدرة التلقائية على التحوّل من الشاشة الطولية إلى الشاشة العرضية، أمراً ملحّاً ولا غنى عنه.
المرونة المتكاملة
قبيل عدة أعوام، كانت نماذج التخطيطات التصميمية Layouts التي تتّسم بالمرونة، محتكرة من قبل المواقع الفارهة لتكلفتها العالية، إذ كانت المرونة تعتمد فقط على هيكلية العناصر وأعمدة التخطيطات والنصوص فقط. اليوم وبالاعتماد على منهج التصميم المتجاوب، صارت التخطيطات أكثر مرونة، فأصبحت الصور قابلة للتعديل تلقائياً وصارت النماذج قابلة لتعديل القياس Scale إضافةً إلى العديد من المزايا والمكونات الإضافية Plug-ins التي تضيف إمكانيات وقابليات لا تحصى لتصميم الموقع.
استعلامات الوسائط
تدعم معظم المتصفحات الإلكترونية الحديثة نظام CSS3، والذي يمكّن مواقع الويب من جمع المعلومات والبيانات من زوار الموقع بشكل فردي. يفيد ذلك في تطبيق أنماط CSS3 بالشكل الذي يلائم كل زائر. على سبيل المثال، تسمح ميزة الوسائط min-width (العرض الأدنى) للمصممين بتنفيذ أنماط CSS محدّدة بمجرّد إنخفاض عرض شاشة المتصفّح عن العرض المحدّد.
ميّزات التصميم المتجاوب
كما أردفنا مسبقاً، تخيّل أن تزور موقعاً إلكترونياً من هاتفك الذكي، لتجد الصفحة مخصصة لشاشات الحاسب الكبيرة بمقاييس غير متلائمة وألوان غير صحيحة ونقرات لا يمكن الوصول إليها. لذلك، بات اعتماد منهج التصميم المتجاوب أساسياً في عمليات التصميم الحالية لعدّة ميّزات مثل:
١– توفير الوقت والجهد
تخيّل أيضاً أن على مصممي الويب في شركتك أن يصمموا ويطوّروا موقعاً خاصّاً لكل جهاز، وكل شاشة، وكل تقنية حديثة. هل يمكنك أن تتصور مقدار الوقت الذي يتطلبه ذلك مع إطلاق العدد الهائل من الأجهزة المختلفة التي تدخل السوق بشكل متسارع وكبير؟.
٢– زيادة حركة مرور الويب
تأتي غالبية حركات مرور الويب حالياً من أجهزة الهواتف الذكية. لذلك، فإنّه من الأساسي حالياً تصميم مواقع ويب قابلة للعرض على أجهزة الهواتف الذكية حتى لا يواجه زوّار الموقع صوراً مشوّهة أو تصميماً غير ملائم. وكلّما ازدادت ملاءمة الموقع للأجهزة الذكية، ازداد معه عدد زوار الموقع من مستخدمي الأجهزة الذكية وبالتالي حصل على حركة مرور أكبر.
٣– زيادة تحسين محرّكات البحث SEO
صار تصميم المواقع المتجاوب بالنسبة لمعايير تحسين محرّكات البحث على قدر متساوٍ من الأهمية مع جودة محتوى المواقع. تؤدي الروابط الخلفية الأقوى ومعدّلات الارتداد الأفضل إلى ترتيب أعلى في نتائج البحث، إضافةً إلى ميزة أعلى للمواقع التي تخدم وصول الأجهزة الحديثة والتي تعتمد على التصميم المتجاوب.
٤– تحليل أداء الموقع بكفاءة أعلى
من الضروري معرفة مصدر حركة المرور وكيفية تفاعل المستخدمين مع الموقع لإجراء تحسينات مستمرة. تتطلب إدارة إصدارات متعددة من موقع الويب من المطورين تتبع رحلات المستخدمين من خلال مسارات تحويل متعددة وإعادة توجيه منفصل لكل تصميم. وبالتالي، فإن وجود موقع واحد سريع الاستجابة يبسط بشكل كبير عملية المراقبة. تعمل Google Analytics والأدوات المماثلة الآن على تلبية احتياجات مواقع الويب المتجاوبة عن طريق تكثيف التتبع وتقديم التحليلات في تقرير واحد حتى تتمكن من معرفة أداء المحتوى الخاص بك على الأجهزة المختلفة.
في نهاية المطاف، يمكن القول أن عملية التصميم المتجاوب لم تعد ميزة فقط للمواقع، بل أصبحت حاجة أساسية لنجاح الموقع لا سيما في مجال التطوير والأعمال.
