مدخل إلى التصميم المتجاوب والتصميم المتكيف

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

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

التصميم المتجاوب

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

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

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

التصميم المتكيف

إن أول من جاء بالتصميم المتكيف هو المصمم آرون جوستافسون في كتابه "التصميم المتكيف لمواقع الإنترنت: صياغة تجارب غنية عبر التحسين المتصاعد". وهو معروف أيضًا باسم التحسين المتصاعد لمواقع الإنترنت.

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

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

عادةً ما تُطور في التصميم المتكيف ستة قياسات للتصاميم، بحيث تشمل أحجام الشاشات الأكثر شيوعًا وهي: 320، 480، 760، 960، 1200، 1600 بكسل.

تصميم مواقع مستقلة تناسب شاشات الهواتف المحمولة

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

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

التصميم المتجاوب أم المتكيف

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

التصميم المتجاوب

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

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

تُعَد العلاقة الطيبة التي تجمع بين التصميم المتجاوب وتحسين محركات البحث SEO، سببًا آخر يدفع المصممين إلى الميل لاستخدام التصميم المتجاوب، فالمواقع التي تستخدم تصميمًا متجاوبًا (أي المواقع التي تملك عنوانًا واحدً يخدم جميع الأجهزة) أصبحت حاليًا أكثر ملاءمةً مع محركات البحث.

تعرفنا حتى الآن على مزايا ومحاسن التصميم المتجاوب، لكن ماذا عن سلبياته:

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

التصميم المتكيف

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

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

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

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

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

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

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

في الختام

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

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

أما التصميم المتكيف، الذي ظهر في عام 2011، فهو يركز أكثر على تصميم عدة مقاسات ثابتة. أي أنه يُعَد بديلًا عن نهج "مقاس واحد يغطي جميع الأجهزة".

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

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

ترجمة -وبتصرّف- للمقال Adaptive vs. Responsive Design لصاحبه Mads Soegaard.

اقرأ أيضًا

• أساسيات تصميم الويب المتجاوب
• نماذج تصميم الويب المتجاوب
• دليل المبتدئين إلى التصميم التفاعلي Interaction Design