جمالية الويب

رغم أن التغير اللاحق في معايير الإنترنت قد أيَّدَ فصل العرض والمحتوى -الذي يُعدُّ مطلبًا أساسيًا من مطالب التصميم القابل للتكيُّف 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 ميجابايت.

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

ولطالما كان التحسين المتدرج من عناصر صندوق أدوات المطوِّر، ولكن تواجده في مختلف مراحل عملية التصميم أصبح الآن ضروريًا. إذا تركنا النظر إلى المواقع الإلكترونية بطريقة الثنائيات (الحاسبات الشخصية في مقابل الجوالات؛ إنترنت إكسبلورر 6 في مقابل متصفات الويب “الحديثة”) سنتمكن من تكوين خبرة تتكيَّف مع التنوع الكبير في الإنترنت.

تكييف افتراضاتنا (وليس هيكلية التصميم فقط)

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

نحن بحاجة إلى إعادة النظر في هذه الافتراضات.

وبدلاً من أن ننتظر الإلهام من الطباعة، ربما يكون الأجدر بنا أن نتجه بنظرنا أكثر نحو تصميم البرمجيات.

لطالما جرت محاكاة تطبيقات الحاسبات الشخصية من خلال الويب لاسيما بالنسبة لتطبيقات الأداء الشخصي أو الإنتاج، ونتيجة لذلك أصبحت غير محتملة. إن الواجهات الأكثر نجاحًا تجمع بين أفضل جوانب الحاسبات الشخصية والواجهات الأصلية للإنترنت. فكِّر في Gmail في مقابل Yahoo! Mail.

يجري حاليًا إدخال هذا المنطق في التفكير إلى التطبيقات التي تركز على المحتوى، ويرجع الفضل الأكبر في هذا إلى طرح Chrome Web Store [متجر كروم الإلكتروني] في عام 2010. لقد وفَّرت هذه الخطوة لمطوري Chrome سوقًا لبيع التطبيقات المصممة باستخدام معاير الإنترنت والترويج لها، بل إن كثيرين قد قاموا بإنشاء تطبيقات تستخدم المحتوى المتاح على الإنترنت في استخدامات جديدة.

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

الأخبار الصالحة للطباعة فقط Only the News That’s Fit to Print

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

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

المواقع الإلكترونية المرتكزة على المهمة

ثمة موقع آخر يعاني من تخطيط مزدحم مماثل وهو موقع BBC Good Food.

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

المحتوى، مثال غير Chrome

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

مثال هذا تطبيقات كروم لـ The New York Times و BBC Good Food، وهي توجهات تصميمية جديدة تستوحي التصميم من التطبيقات التقليدية وأوصلت بالنهاية إلى تركيز أكبر على المحتوى (في حالتنا صور الألبومات مثلا)، هذا يعني أننا أمام تصميم أو هيكلية مرنة أكثر وتصفح أقل إزعاجاً.

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

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

وتستمر الرحلة

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

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

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

المقال الكامل على Arabic A List Apart

مصدر الصورة