لطالما كانت شبكة الـ 12 عمودًا هي المعيار الافتراضي في تصميم الويب، وهي أداة قوية سهلت عمل المصممين والمطورين لسنوات طويلة. لكن المقال الأخير «Beyond 12 Columns: Designing Layouts With Personality» يطرح تساؤلاً مهماً: هل أصبحت هذه الشبكة قيدًا على الإبداع وتنتج تصاميم متشابهة تخلو من الشخصية المميزة؟
رحلة التصميم: من الجداول إلى الشبكات الحديثة
يذكّرنا المقال بالرحلة الطويلة التي قطعها تصميم الويب، بدءًا من استخدام جداول HTML وصور GIF الشفافة لتخطيط الصفحات في عام 1996، مرورًا بتطور CSS الذي منح المصممين مزيدًا من التحكم عبر خاصيتي floats و positioning رغم تحديات التناسق بين المتصفحات.
فيما بعد، سهّلت أطر عمل CSS مثل Blueprint CSS (بشبكتها ذات الـ 24 عمودًا) و 960 Grid System (بخياراتها ذات الـ 12 و 16 عمودًا) عملية التخطيط والتنفيذ. هذه الأطر، ثم Bootstrap و Foundation، عززت شبكات الـ 12 عمودًا كمعيارٍ أساسي، وهي خيار عملي لقابليتها للتقسيم بسهولة.
لكن مع ظهور CSS Grid، تغيرت إمكانيات تخطيط الصفحات بشكل جذري. ومع ذلك، لا يزال العديد من المصممين يبدأون بتقسيم الصفحة إلى 12 عمودًا متساويًا، ثم يحاولون ملاءمة المحتوى فيها. هذا النهج، حسب رأي الكاتب، قد ينتج تصاميم مقبولة لكنها تفتقر إلى التفرد والجاذبية.
التصميم أولاً: المحتوى قبل الأعمدة
يُشير الكاتب إلى أن المشكلة ليست في شبكات الـ 12 عمودًا بحد ذاتها، بل في اتخاذها كحلٍ مألوف قبل فهم ما يجعل الشركة أو المشروع مميزًا وما يحتاج الموقع إلى إيصاله. ينصح بالبدء بطرح أسئلة حول قصة الشركة وشخصيتها، وما الذي يميزها عن منافسيها، وكيف يمكن أن يؤثر ذلك على مظهر الموقع وإحساسه العام.
بدلاً من البدء بالأعمدة، يقترح المقال التركيز على المحتوى. ما هي العناصر التي تستحق أكبر قدر من الاهتمام؟ ما الذي ينتمي لبعضه؟ هل هناك ترتيب طبيعي للمعلومات؟ فقط بعد الإجابة على هذه الأسئلة، يجب التفكير في الجوانب المرئية مثل الصور الكبيرة، الفراغات البيضاء، وكيفية تجميع النصوص والصور في تركيب مدروس.
لإضافة بعد جديد للتصميم، يقترح الكاتب استخدام الشبكات المعيارية (modular grids). بتقسيم التخطيط إلى أعمدة وصفوف، تتشكل وحدات مستطيلة أو مربعة تُعرف بالوحدات. يمكن دمج هذه الوحدات لإنشاء مناطق مكانية أكبر تحدد التسلسل الهرمي، وتتحكم في المساحة البيضاء، وتضيف تنوعًا إلى التكوين، مما يجعل التصميم أقل قابلية للتنبؤ وأكثر ديناميكية.
نحو تصاميم مركبة ومبتكرة
لتحقيق مزيد من المرونة والتنوع، يقدم المقال مفهوم الشبكات المركبة (compound grids)، وهي شبكات تجمع بين اثنتين أو أكثر من أي نوع من الشبكات (عمودية، معيارية، أو هرمية) على نفس الصفحة. يمكن لهذه الشبكات أن تتداخل أو تتجاور أو تتكدس فوق بعضها البعض، مما يفتح آفاقًا إبداعية لا يمكن لشبكة واحدة تحقيقها.
على سبيل المثال، يمكن تركيب شبكة من عمودين مع شبكة من ثلاثة أعمدة. خطوط الشبكة المدمجة تخلق أربعة أعمدة بعرضين مختلفين، مما يوفر مرونة أكبر دون فقدان الهيكل الأساسي. هذه الأساليب تتيح للمصممين إنشاء تخطيطات مختلفة لأقسام الموقع المتنوعة – كالمجلة والمتجر والخدمات – مع الحفاظ على هيكل بصري مترابط يمثل هوية الشركة بشكل فريد.
ماذا يعني هذا للمطورين والمصممين؟
بالنسبة للمطورين والمصممين في عالمنا العربي، يعني هذا دعوة لإعادة التفكير في منهجيات التصميم. لا تتركوا المألوف يملي عليكم الخيارات. استغلوا قوة CSS Grid وتقنيات الشبكات المعيارية والمركبة لإنشاء تصاميم تعكس حقًا شخصية كل مشروع وهوية العلامة التجارية التي تعملون عليها. الهدف ليس الاختلاف من أجل الاختلاف، بل تصميم تجارب مستخدم لا تُنسى ومواقع ذات طابع خاص، مع الحفاظ على الوضوح وسهولة الاستخدام.
المصدر: css-tricks.com