في وقت متأخر من إحدى ليالي شهر نوفمبر، حلقت فوق مدينتي توكسون، أريزونا، وقد أذهلني التصميم الشبيه بالشبكة لهذه المدينة، وهي إحدى المدن التي تم بناؤها من خلال التخطيط في الولايات المتحدة، من الأعلى، كل شيء في هذه المدينة يبدو وكأنه شبكة تم تصميمها بعناية من قبل المصمم (الشكل 1). لقد عدت للتو من لندن، وهو عكس ذلك تمامًا خارج الطبيعة.
الشكل 1: توكسون، أريزونا
الشكل 2: لندن
لقد كنت أفكر في هذه المقالة لفترة طويلة. يذكرني المنظر الجوي لهاتين المدينتين بتصميم الويب. تتيح لنا تكنولوجيا اليوم تنفيذ التصميمات القائمة على الشبكة بحرية، أو القفز بالكامل من الشبكة التأثير على مصممي الويب ليس هناك شك في هذا الدفع، ولكن التحدي الحقيقي هو كيف نتخلى عن تلك الأفكار المنغلقة ونفكر خارج الشبكة.
تشعر المدينة
إذا قارنت التخطيط الحضري بتصميم الويب، فإن أوجه التشابه بين الاثنين مثيرة للاهتمام. تعد تخطيطات الشبكة رائعة لإنشاء مواقع ويب يمكن التنبؤ بها وسهلة التنقل. تعد الشبكات رائعة لمساعدة المصممين على التخطيط وتسهيل وصول المستخدمين إليها (الشكل 3).
الشكل 3: ريان بريل
على الجانب الإيجابي، من المؤكد أن توكسون هي مدينة يسهل زيارتها، ويكفي القليل من الإحساس بالاتجاه أو خريطة الشارع، ويعطي السكان الآخرين الاتجاهات، ويكفي أن أقول، أنا في الزاوية الجنوبية الغربية من تقاطع شارع كامبل وشارع كامبل. طريق الأمير في أي مكان. تتجه وسائل النقل العام جنوبًا وشمالًا أو شرقًا وغربًا، لذلك من السهل جدًا تحديد الطريق.
من ناحية أخرى، خطط مصممو توكسون في الأصل للتوسع المحدود، وظهرت المشاكل عندما تجاوزت المدينة الحدود المخطط لها. تمنع القيود المفروضة على شبكة توكسون ظهور أنماط مختلفة من المجتمعات أو الأحياء. يشعر العديد من سكان توكسون أن المدينة تفتقر إلى وسط المدينة النابض بالحياة أو العديد من الأحياء المميزة. ونتيجة لذلك، حتى لو ظهرت مثل هذه المناطق، إلا أنه من السهل الوصول إليها لا تهتم بالبحث عنه.
لندن مختلفة، إنها لغز. أعلم أن سكان لندن أنفسهم يعتمدون على مرشدي المدينة للتجول. نظام النقل في المدينة مليء بالتحديات، ويحتاج سائقو سيارات الأجرة هؤلاء إلى اجتياز اختبارات خاصة قبل أن يتمكنوا من العمل. النمو الطبيعي للمدينة لا يجعلها مكانًا سهلاً للسفر.
ومع ذلك، فإن لندن مليئة بالمناطق المثيرة والأحياء الفريدة، فضلاً عن المراكز الثقافية والأحياء الغريبة. وعلى الرغم من صعوبة السفر، إلا أن الناس أكثر استعدادًا لأن يكونوا من بينهم بسبب تنوع الأذواق.
هذا التشبيه مناسب أيضًا لتصميمات الويب التي تميل إلى أن تكون طبيعية. كيف يمكن للأشخاص التنقل بسهولة في تلك الأزقة المتعرجة؟ ومن ناحية أخرى، يمكن تحقيق التصميم الجميل من خلال الخروج من الصناديق التي كنا نعيش فيها. في الشكل 4، يمكنك أن ترى كيف أن الخروج عن قواعد تصميم الشبكة يسمح للتصميم بالبقاء قابلاً للاستخدام مع الحفاظ على مظهره المختلف.
الشكل 4: إيغا لوس أنجلوس
أسطورة كود الشبكة
باعتباري شخصًا يهتم بالبرمجة أكثر من التصميم، فأنا في حيرة من أمري عندما أعرف كيف يلتصق تصميمنا بالبرمجة، وأعتقد أن تخطيط الجدول طويل المدى هو الذي يجعلنا نرسم أساسًا متينًا (الشكل 5). أحدث تخطيط CSS، فمن السهل معرفة السبب.
الشكل 5: k10k
تعمل تخطيطات الجدول بشكل جيد مع تصميمات الشبكة. كود الجدول نفسه يستنسخ شبكة، نحن فقط نملأ الخلايا بالصور والنص وعناصر الواجهة لإكمال تصميمنا (الشكل 6). إذا أردنا تنفيذ تصميم معقد وغير منظم، فإننا نحتاج إلى استخدام عدد كبير من الصور في المستند، مما يتسبب في انتفاخ المستند بأكمله.
الشكل 6: تغيير الوزن
يتمتع التخطيط الجدولي ببعض المزايا، ولكن مثل التخطيط الحضري، يمكن أن تتحول المزايا في بعض الأحيان إلى عيوب. تضمن الشبكة المستندة إلى الجدول أن جميع الخلايا الموجودة فيها منتظمة. هل تريد أن يكون لجميع الأعمدة نفس العرض؟ بسيطة جدًا، هذه هي طبيعة الجداول. الحفاظ على فجوات متسقة بين الخلايا؟ إنها أيضًا قطعة من الكعكة. ومع ذلك، ماذا لو كنت لا تريد هذا الهيكل الأنيق؟ لسوء الحظ، لا يمكنك ذلك.
يغير CSS كل ذلك، ولهذا أعتقد أننا لم نتعلم التصميم للويب بعد. نحن، وخاصة أولئك الذين يأتون إلى CSS من خلال تخطيطات الجداول القديمة، بدأنا للتو في فهم مدى فائدة النموذج المرئي لـ CSS في كسر قيود تصميم الشبكة. هل تخطيط CSS مثالي؟ لا، بالإضافة إلى الفوائد التي تجلبها CSS، فإننا أيضًا نفقد شيئًا ما. يعد توسيع العمود مشكلة كبيرة لتصميم CSS، كما هو الحال مع فجوة الخلايا.
CSS ليس أكثر من مجرد حواف ومربعات، والتي توجد أيضًا في الشبكات، ومع ذلك، فإن الفرق الأساسي بين الاثنين هو أن CSS يسمح لنا بفصل الصندوق عن البيئة المحيطة به والتخلص منه حسب الرغبة (الشكل 7).
الشكل 7
يمكننا استخدام سمات الموضع أو العائمة لتحديد المواقع، ويمكننا استخدام صور خفيفة الوزن كخلفيات، لذلك، عند استخدام Box، يمكننا تنفيذ كل من تخطيط الشبكة والتخطيط غير الشبكي بشكل أكثر فعالية. يمكنك رؤية ذلك في كتاب Dave Shea's Blood في Lust، أحد التصميمات العديدة التي استخدمها في CSS Zen Garden (الشكل 8).
الشكل 8: حديقة CSS Zen: شهوة الدم
يوضح الشكل 9 التصميم غير المنظم القائم على BOX المستخدم في Blood Lust، ويوضح أيضًا كيفية استخدام CSS وBOX لتنفيذ شبكات مستقلة غير منظمة.
الشكل 9
بمجرد أن نفهم قدرات BOX، يمكننا بسهولة اختراق قيود الشبكة. يظهر التصميم غير المنظم إلى حد كبير، وحتى الحر في الشكل 10.
الشكل 10: جامعة كوتزتاون: قسم تصميم الاتصالات
يتم وضع هذه الصناديق باستخدام CSS:
الشكل 11
لا يقتصر الأمر على نظافة التعليمات البرمجية فحسب، بل إنه أيضًا أكثر سهولة وبساطة للمصممين المطلعين على تخطيط CSS. كما أن التصميم بديهي وسهل الاستخدام وغير تقليدي.
التوقعات
يكمن جمال تقنية التخطيط الحديثة في أن لدينا المزيد من الخيارات للاختيار من بينها. باستخدام CSS، يمكننا إنشاء تصميمات سهلة الإدارة وخفيفة الوزن وغنية بصريًا ويمكن أن تكون قائمة على الشبكة إذا أردنا ذلك، ويمكننا بسهولة كسر الشبكة أو كسرها.
وهذا يفتح المزيد من الفرص لتصميم الويب المعاصر، ولا ينبغي لنا أن نرتكب نفس الأخطاء لمجرد أننا أكثر دراية بتصميم الشبكة.
بالنسبة لأولئك منا الذين كانوا مهووسين بتخطيط الجدول لفترة طويلة، فإن الصعوبات كبيرة بشكل خاص. بالنسبة لأولئك الذين عملوا كمصممي ويب لسنوات عديدة، فهذا يعني الابتعاد عما استخدموه دائمًا. قد لا يجد البعض الأمر صعبًا، ولكن معظم الناس سيجدونه مخيفًا. نحتاج أن نتعلم كيفية عمل نماذج CSS وأن نتحلى بالشجاعة لنقول وداعًا للقواعد القديمة.
ومن هؤلاء الوافدين الجدد نأمل أن نرى المزيد من الاختراقات في الصور النمطية للتصميم، الذين تعتبر أساليبنا السابقة غريبة وجامدة بالنسبة لهم.
الويب ينضج، والطريقة التي نصمم بها تتغير، وأمامنا المزيد من الابتكار والإبداع. لن نلتزم بالمدن المخطط لها، بل يمكننا تحقيق تصميمات فريدة من نوعها. نحن المصممون القدامى، جنبًا إلى جنب مع القادمين الجدد اليوم، سوف نجعل الويب يتغير مع مرور كل يوم.
مؤلف هذا المقال:
تعتبر مولي إي. هولزشلاغ من المدافعين عن معايير الويب والمبشرين المعروفين. الأكثر مبيعًا من بين أكثر من 30 كتابًا لها هو The Zen of CSS Design (Zen Web Design)، والذي شاركت في تأليفه مع Dave Shea. مولي هي خبيرة مدعوة في مجموعات عمل W3C والمديرة السابقة لمجموعة مشروع معايير الويب (WaSP). تعمل مولي مع المصممين والمطورين والممارسين وصناع القرار لقيادة شبكة ويب مفيدة وجميلة وذات معنى.
حاشية
تم نشر هذا المقال في A LIST APART في عام 2005. في عام 2005، لم يكن تخطيط CSS شائعًا كما هو الآن، وقد طغى تخطيط الجدول على الكثير من الأشخاص بصفتها خبيرة بارزة في مجال الويب، قالت المؤلفة Molly E. Holzschlag She هي أيضًا مستخدمة طويلة الأمد لتخطيط الجدول. عندما تقترب CSS من مرحلة النضج ويتم تحديث التخطيطات المستندة إلى CSS، كانت لديها مشاعر مختلطة حول تصميم الشبكة المستند إلى الجدول، كما يمكن رؤيته من المقالة.
ومع ذلك، في عام 2009، عندما أصبح CSS منتشرًا وأصبح تخطيط CSS مألوفًا، من الضروري أن نفكر في تصميم الشبكة مرة أخرى، هل ماتت الشبكة أم أن الجداول شريرة؟ الإجابة ليست بهذه البساطة. بغض النظر عن مدى تغيرها، فإن الويب اليوم له غرض أبدي. بالإضافة إلى تطبيقات الويب، فإن مهمة الويب المتغيرة باستمرار هي التعبير عن المعلومات ونقلها. إذا كنت من أهل الأدب، فسوف تقع في حبها ومع ذلك، إذا كنت ساعي بريد، فستختار توسون. لذلك، سواء كان تصميمًا شبكيًا أو تصميمًا طبيعيًا، فلا توجد ميزة أو عيب مطلق. تصميم الشبكة أكثر وضوحًا وأنيقًا، في حين أن التصميم الطبيعي أكثر أناقة وصقلًا.
والجداول ليست شريرة كما يقول الكثير من الناس. تجدر الإشارة إلى أن جداول اليوم لم تعد جداول الماضي التي يمكن دمجها مع CSS، ويمكن أيضًا استخدام الجداول المعدلة بالكامل باستخدام CSS مجموعة من المجموعات والتفاعلات العضوية، عندما لا تحتاج إلى تحديد المواقع بدقة للخلايا فيه، فإن الجدول عبارة عن حاوية أكثر مثالية من BOX، لأنه الأفضل توافقًا مع جميع المتصفحات، ولن ينهار، و ولن يختلف طولها، وسلوكها أسهل لتلبية التوقعات، والأهم من ذلك أنها الطريقة الأكثر مباشرة للناس لتنظيم الأمور.
المؤلف الأصلي مولي إي هولزشلاغ
مصدر الترجمة الصينية: الموقع الرسمي لـ COMSHARP CMS، مترجم 35 كيلومترًا.