فلسفة تصميم الويب المتجاوب

اقتباس

يألف المصممون في مجال الطباعة القدرة على التحكم ويرغبون بمثلها في مجال الويب، لكنها نتيجة قيود الصفحة المطبوعة، ويجب أن نتقبل حقيقة أنه ليس للويب نفس القيود، وقد صُمِّم ليكون مرنًا، لذا علينا أولًا تقبل حسناته وسيئاته.

جون ألسوب John Allsopp

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

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

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

أساس مرن

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

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

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

إضافة التجاوب

يطرح التصميم المعماري المتجاوب السؤال التالي: كيف يمكن للمساحة أن تتجاوب مع الأشخاص الموجودين داخلها؟

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

وصف مايكل فوكس Michael Fox ومايلز كيمب Miles Kemp في كتابهما "العمارة التفاعلية Interactive Architecture" هذا التصميم المتكيف على أنه "نظام متعدد الحلقات يدخل الشخص في حوار معه، وفيه تبادل مستمر وبنّاء للمعلومات"، وهذا وصف مختلف قليلًا لكنه قوي، فبدلًا من إنشاء مساحات ثابتةً غير متغيرة بتجربة ثابتة، يقترح الكاتبان إمكانية -بل ووجوب- وجود تأثير متبادل بين البنية وقاطنيها.

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

استعلام الوسائط

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

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

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

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

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

يتضمن الاستعلام السابق قسمين:

1. نوع الوسط screen.
2. الاستعلام ضمن قوسين، متضمنًا فحصًا للخاصية max-device-width لهذا الوسط، متبوعًا بالقيمة المستهدفة 480px.

نسأل في الاستعلام السابق عن جهاز تكون دقته الأفقية max-device-width أصغر أو تساوي 480px، فإذا تحقق هذا الشرط، أي إذا كنا نشاهد التصميم على جهاز صغير -مثل جهاز الهاتف المحمول-، فسيُحمّل ملف التنسيق shetland.css، وإلا فسيتجاهل الوسم link كليًا.

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

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

ولسنا مقيدين بإضافة الاستعلام ضمن الوسم link فقط، بل يمكننا إضافته ضمن تنسيقات CSS، إما جزءًا من القاعدة media@:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

أو جزءًا من القاعدة import@:

@import url("shetland.css") screen and (max-device-width: 480px);

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

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

لنركز الآن على الصور أساسًا للصفحة في مثالنا، حيث ستكون في التصميم الافتراضي كالتالي:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

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

لنضع العناصر أولًا على خط واحد عندما يصبح قياس إطار العرض أصغر من قيمة معينة، ولتكن 600 بكسل، لذا سنضيف في نهاية ورقة التنسيق style sheet كتلةً من التنسيقات ضمن قاعدة media@ كالتالي:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

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

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

تُغير الصور حجمها في مثالنا بعد آخر إضافة لتتناسب مع أحجام الشاشات الصغيرة.

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

بنفس الطريقة السابقة يمكننا إصلاح التصميم للشاشات الكبيرة، ويمكننا وضع الصور على نفس السطر ضمن ستة أعمدة:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

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

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

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

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

في الختام

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

ترجمة -وبتصرف- للمقال "Responsive Web Design" لصاحبه Ethan Marcotte.

اقرأ أيضًا

• نماذج تصميم الويب المتجاوب
• الصور في تصميم صفحات الويب المتجاوب
• ما هو الفرق بين التصميم المتجاوب (Responsive Web Design) والتصميم المتلائم (Adaptive Web Design)