رغم أن التغير اللاحق في معايير الإنترنت قد أيَّدَ فصل العرض والمحتوى -الذي يُعدُّ مطلبًا أساسيًا من مطالب التصميم القابل للتكيُّف Adaptive Design- إلا أن هذا الوضع ظل نظريًا. فقد حلت Floated divs محل الجداول في الوقت الذي ظلت فيه هيكلية الصفحة layout خاضعة للأعراف غير المرنة والمستوحاة من عالم الطباعة.
اليوم، أصبح من السهل -بل ومن الضروري- قبول طبيعة الإنترنت القابلة للتكيُّف عندما يطلب أي جهاز الاتصال. يُعد التصميم التجاوبي المستخدم في الويب Responsive web Design من أفضل الممارسات الناشئة، وأصبحت الهيكلية Layout لدينا أكثر مرونة. ولكن الابتكار عاد مرة أخرى ليُركِّز على طرق التنفيذ في الوقت الذي ظلت فيه النواحي الجمالية المرئية مهملة.
ولتوضيح الأمر بصورة أخرى نقول إننا أصبحنا نستوعب “التجاوبي” ولكننا نهمل الشق الأول وهو “التصميم”؛ فأصبحنا نستبدل divs ذات العرض الثابت بأخرى مرنة fluid. والآن وبينما نحن نجتاز فترة إعادة تقييم لكلا الممارسات والأدوات، أصبح الوقت مناسبًا للسعي نحو تحقيق الشكل الجمالي الأنسب للوسط.
المادة الخام للويب
---------------------------------------------------------------------------------------------
يتطلب التصميم الملائم لأي وسط منك أن تفهم المادة الخام لمواقع الإنترنت. أحب شخصياً تشبيه الإنترنت بمادة خام تتمتع بخصائص فريدة نستطيع الاستفادة منها وتتمتع بحدودٍ يمكن أن تصل إليها قبل أن تختل وظيفتها. ويمكن اعتبار الإنترنت مزيج مكوَّن من HTTP (الـ “كيف”) وعناوين URL (الـ “أين”) وHTML (الـ “ماذا”). إذا أهملت أيًّا من هذه المكونات فإن ما تقوم به لا يُعد بناء لموقع ويب.
إن هذا المزيج من البروتوكولات والأعراف هو ما يساعد الويب على تحقيق ما يُطلِقُ عليه السير تيم بيرنرز لي “القاعدة الأساسية للتصميم” ألا وهي الشمول.
من الضروري أن تتسم المواقع بإمكانية الوصول إليها من أي نوع من الأجهزة القادرة على الاتصال بالإنترنت سواء كانت أجهزة ثابتة أم متحركة، ذات شاشات صغيرة أو كبيرة.
في ظل هذا التغلغل لعنصر الشمول في الوسط يمكن القول بأن الويب تجاوبي بطبيعته. ولا تعد “التجاوبية” وسيلة أو عملية بمعنى الكلمة ولكنها خاصية أساسية من خصائص البيئة نراعيها في كل سطر نضيفه فيCSS وفي JavaScript. تتجاوز الشمولية مجرد التصميم المرئي؛ فالمواقع الإلكترونية تحتاج إلى أن تكون سهلة عند عرضها أو قراءتها بصوتٍ مرتفع كما لو كانت نصًّا.
من الضروري أن نسترشد في كل جانب من جوانب التصميم بهذه الطبيعة وتلك الخصائص. كيف يمكن إذاً أن يتغير العنصر الجمالي الأساسي للويب إذا بدأنا في التصميم آخذين هذه الطبيعة الشمولية في الاعتبار؟
الوسط هو الرسالة
---------------------------------------------------------------------------------------------
يعد التلفزيون -مثله في ذلك مثل الإنترنت- وسطًا تتباين أجهزة الوصول إليه فيما بينها؛ فأجهزة التلفزيون قد تتفاوت في الحجم ودرجة الوضوح ونسبة البعدين (الارتفاع إلى العرض) ومعدل التجديد (التحديث)
كان ذلك الأمر جليًا في سبعينيات وثمانينيات القرن العشرين؛ فعلى الرغم من أن البرامج كانت تُسجَّل بالألوان، كان يتعين على جهات البث أن تضع في اعتبارها القطاع العريض من الأفراد الذي يمتلك أجهزة أبيض وأسود، وكان يشترط في الرسومات المعروضة على الشاشات أن تتوافق مع كلا النوعين من الشاشات؛ وهو ما حدا بالمصممين أن يستخدموا الأشكال والألوان المتقابلة.
وعلى سبيل المثال، كان الشعار المميز لقناة BBC1 يتألف من كرة أرضية دوارة باللون الأصفر (ثم أصبح بعد ذلك أخضر فاتح) على خلفية بالأزرق الداكن، وهو التصميم الذي ربما يبدو مبهرجًا ولكنه يفي بالغرض.
واجه التلفزيون مرحلة أخرى من التحول، ولكن هذه المرة في التحول نحو نمط الشاشة العريضة ودرجة الوضوح العالية. ولما كانت أجهزة التلفزيون التي يمتلكها مشاهدون كثيرون ذات درجة وضوح قياسية بنسبة 4:3، فقد وجد المصممون أنفسهم مرة أخرى بحاجة إلى التضحية والعمل في حدود “المساحة الآمنة” لضمان عدم فقدان جزء من الصورة عند عرضها على الأجهزة القديمة، وهو ما يجعل الأشكال تميل إلى أن تكون عائمة في منتصف الشاشة على أجهزة التلفزيون ذات الشاشة العريضة وعدم القدرة على الاستفادة من عرض الشاشة بأكمله.
سوف تستمر الجوانب الجمالية المهمة للتلفزيون في التغيُّر ولكنها ستظل خاضعة للتطور التقني ومدى استيعاب المصممين لحدود إمكانياتها.
كل شيء قديم يعود جديدًا مرة أخرى
-------------------------------------------------------------------------------------------
قبل أن تظهر المواقع الإلكترونية الضخمة والرغبة في إنتاج تصميمات تحاكي الصور المطبوعة، عندما كانت سرعة الاتصال محدودة ولا تستطيع الشاشات الصغيرة أن تعرض إلا 256 لونًا، كانت الرسومات النقطية bitmaps تعد مطلبًا ملحًا. وكانت التخطيطات بسيطة ومركزة.
وفي عام 1995، استخدمت Hotwired هوتوايرد 16 لونًا فقط، وكان تصفح صفحة البداية يتألف من أكثر من ستة ألوان بقليل ويتكون كل لون منها من مزيجٍ من أربعة ألوان أساسية، مع استخدام صور GIF لكل موضوع من الموضوعات حجم كل منها 1 كيلوبايت. ولم يكن هيكل الموقع بشكل عام يتألف من شيءٍ سوى هذه الصور في الوسط.
في ظل توافر الأشكال العالية الدقة وحيز النطاق غير المحدود، أصبح من السهل أن ننسى أن نفس هذه القيود ما تزال موجودة. رغم أن الأجهزة قد أصبحت أكثر قدرة وتتمتع بخصائص كثيرة، فإن إنتاج الأجهزة الأقل قدرة ما يزال مستمرًا؛ فجهاز Amazon Kindle -على سبيل المثال- يُعد من الأجهزة الشائعة، غير أن غالبية موديلات هذا الخط الإنتاجي مزودة بربط خلوي وجهاز عرض E Ink أحادي اللون.
استيعاب القيود
-----------------------------------------------------------------------------------
في إطار السعي نحو “الهيكليات التجاوبية Adaptive Layouts” ، ثمة قيدٍ آخر قد كشف عن نفسه، وهو فشل الصور النقطية (bitmap) في الاستجابة لهذا التحول سواء أكان ذلك راجعًا إلى حجم مَنْفَذ العرض أو إلى سرعة الاتصال المتاحة.
إن فشلاً كهذا لا يرجع إلى الويب، فالقدرة على إدراج وسائط من أنواعٍ مختلفة في صفحة الويب يعد من الخصائص المفيدة. ولكن ليست كل الصيغ تشترك في خصائص الويب. ثمة فرصة هائلة لتطوير صيغة تجاوبية من الصور النقطية، وأنا أشك في أن الصور سوف تصبح جزءًا حقيقيًا من الإنترنت إلى أن توجد صيغة كهذه.
لكن يلح علينا سؤال في الوقت الراهن: كيف يمكننا إنشاء أعمال دقيقة التفاصيل بصورٍ فوتوغرافية في حدود وسط قابل للتكيف adaptable medium؟
حاول كثيرون الإجابة عن هذا التساؤل من خلال حلولٍ تقنية. ولكن نظرًا للتعقيدات وضآلة المعارف، فقد اتجهت الجهود صوب وضع معايير جديدة مع وجود إجماع حول تلك المعايير التي تحدد متى ينبغي طلب نسخٍ ذات أحجم مختلفة من صورة معينة ومتى ينبغي عرض هذه النسخ.
إن الحاجة أم الاختراع. ما يزال أمام المصممين الكثير ليقوموا به للخروج من حدود الممكن. وفي إطار السعي لإيجاد حلول تصميمية لهذه المشكلة، نستطيع إيجاد قواعد جمالية أكثر ملاءمة للوسط، بل وربما نستطيع إدراك أن السبب في مشكلة الصورة التجاوبية ليس لسببٍ إلا لأن أعراف التصميم لدينا ما تزال متأصلة في المواد المطبوعة. ما أخشاه أننا من دون هذه الفترة من الاختبار والتفكير، قد نقوم -في واقع الأمر- باستحداث معايير تخالف شمولية الوسط، أحد عناصر الحياة العصرية.
التصميم الذي يدور حول المشكلة
--------------------------------------------------------------------------------
لحسن الحظ، بدأ المطورون والمصممون التفكير جدياً حول الموضوع، ويواصلون التوصل إلى حلولٍ تنفي الحاجة إلى معايير جديدة.
1- التحسين Optimization
ثمة بديل آخر لإنشاء صور ذات أحجام مختلفة وتحديد أي منها ينبغي عرضه، يتمثل في عرض صورة واحدة بدرجة عالية من التحسين.
dConstruct Archive هو موقع صغير يستطيع فيه الأفراد الاستماع إلى الكلمات التي أُلقِيَِّت في مؤتمرات dConstruct السابقة. وفي هذا الموقع، نجد التفاصيل العامة المحيطة بوجه كل مُتكلِّم وقد تلاشت، لتصبح الصور معها أقل انضغاطًا؛ وهو ما يجعل الملفات أقل حجمًا. وتعد هذه الطريقة ناجحة بوجه خاص مع صور وجوه الأشخاص؛ إذ يميل الأفراد إلى التركيز على ملامح الوجه في جميع الأحوال.
ولمعرفة حجم الصورة الذي ينبغي استخدامه، تم أخذ أصغر عرض وأكبر عرض في الحسبان. وبالفعل، يمكننا ملاحظة عيوب في الصور التجاوبية المقترحة حاليًا. إذا قمت بزيارة هذا الموقع، سوف تلاحظ أن منافذ العرض تعرض أحيانًا صورًا صغيرة؛ وهو ما يرجع إلى أن الحجم المطلوب للصورة يعتمد غالبًا على حجم الإطار الذي يحويها وليس حجم منفذ العرض، بيد أن منفذ العرض viewport هو القيمة التي تتطلب منا المعايير المقترحة أن نستعلم عنها.
2- تغيير النواحي الجمالية Altering the Aesthetic
إذا كان بمقدور الصور ذات الألوان الأقل والمستويات الأعلى من الانضغاط أن تُقدِّم ملفاتٍ أصغر حجمًا، فربما كان من الواجب أن تعكس تصميماتنا ذلك.
قام مؤتمر dConstruct لسنة 2012 الذي أقيم بعنوان “اللعب بالمستقبل” بتوظيف تصميم طباعي للغاية يعرض صورًا أحادية اللون مع وجود مساحات من الألوان الأساسية. إن هذا التصميم يعني أنه بالإمكان أن تكون الصور غاية في الصغر بحيث لا تحتاج إلا إلى ثمانية ألوان.
كما رأينا في مثال التلفزيون، فإن القيود التي يفرضها الوسط تكون قادرة على التأثير على الشكل الجمالي الناتج. وفي تلك الحالة، هل يمكن أن تصبح الصور ذات الألوان الأقل والخلفيات الباهتة -بل وربما ذات الانضغاط الملحوظ- معيارًا مقبولاً على الويب؟ إن الشعبية التي حظيت بها خدمات مثل Instagram (التي نشأت في حد ذاتها عن القيود) قد أثبتت بما لا يدع مجالاً للشك أن الحكم على الصورة يكون بحسب محتواها وليس درجة وضوحها.
3- التحسين المتدرج Progressive Enhancement
إن تغيير النواحي الجمالية المرئية للصورة بما يتناسب مع احتياجات الوسط هو وضع أمثل جيد، ولكن من غير المحتمل أن يتقبله بعض العملاء، ودعونا نقول بصراحة:لا يكون مناسبًا في جميع الأحوال بالضرورة. في الواقع، يبدو أننا نادرًا ما نسأل أنفسنا هذا السؤال: ما الوضع المناسب؟ نستطيع من خلال تقييم المحتوى الخاص بنا أن نقرر عدد الصور المطلوب بالفعل لنقل الرسالة.
وبدلاً من زيادة درجة وضوح الصور مع زيادة اتساع الموقع، يمكننا أن نفكر في زيادة عددها، وهو ما يرتبط بالأفكار المتعلقة بالتحسين المتدرج التي تعني تقديم خبرة أساسية يجري تحسينها كلما زادت قدرات الجهاز.
ويعد موقع BBC الإخباري للهواتف المحمولة مثالاً جيدًا على التحسين المتدرج؛ فالنص البرمجي المصدري لـ HTML يشير إلى صورتين فقط، وهما شعار BBC وصورة أخرى للحدث الرئيسي. وهذا ما تتلقاه جميع الأجهزة؛ ومن ثم، يصبح حجم الصفحات صغيرًا بحيث يصل إلى 28 كيلوبايت فيما يعد إنجازًا بكل المقاييس في عالم المواقع الإلكترونية التي تصل أحجامها إلى 5 ميجابايت.
مقال لـــــــ arabicalistapart
