لدى المطورين عادة سيئة وهي بناء "سكاكين الجيش السويسرية" بينما كل ما يحتاجونه هو شفرة حادة. نحن نلجأ إلى أطر عمل الواجهة الأمامية (frontend frameworks) الثقيلة قبل كتابة أول سطر من HTML. نقوم بإضافة مكتبات الرسوم المتحركة، وأدوات إدارة الحالة (state management)، ومسارات بناء (build pipelines) قوية بما يكفي لإدارة شركة صغيرة. ثم نتساءل لماذا تستغرق مواقع أعمالنا ثلاث ثوانٍ للعرض، ولماذا تتعطل التنقلات على الهاتف المحمول، ولماذا يغادر مديرو التوظيف قبل أن يروا المشاريع التي قضينا شهوراً في بنائها.
اتخذت مساراً مختلفاً في معرض أعمالي الأخير. ابتعدت عن منظومة التبعيات (dependencies) التي لا تنتهي، وبنيت الموقع بالكامل باستخدام HTML دلالي وCSS نظيف. لا أطر عمل JavaScript. لا خطوات بناء. لا محركات رسوم متحركة خارجية. فقط المنصة نفسها، مع إدارة التخطيط بواسطة CSS Grid و Flexbox، وفلسفة تصميم تعامل السرعة والوضوح كميزات أساسية وليس كمجرد أفكار لاحقة.
النتيجة هي موقع خفيف، سريع، واحترافي. إليكم بالضبط كيف اتبعت هذا النهج.
ابدأ بالأساس
يبدأ معظم الإفراط في الهندسة (over-engineering) من الأساس. لا يحتاج معرض الأعمال أن يكون تطبيق صفحة واحدة (SPA). يحتاج فقط إلى عرض عملك، وإخبار الناس بكيفية التواصل معك، ثم الابتعاد عن الطريق. استخدمت HTML دلالي لأن المتصفح يعرف بالفعل كيفية عرض nav و article و footer. عندما تستخدم العنصر الصحيح للمهمة الصحيحة، فإنك تحصل على إمكانية الوصول (accessibility)، والظهور في محركات البحث، والسلوك المتجاوب مجاناً تقريباً. كما أنك تكتب كوداً أقل؛ فاستخدام div مع خمس سمات ARIA ليس سوى محاكاة لفظية زائدة لـ button. لقد تجنبت ذلك تماماً.
بالنسبة للتخطيط، فإن CSS Grid و Flexbox أكثر من كافيين. يتولى Grid الهيكل الكلي: أقسام الصفحة العامة، معرض المشاريع، ومحاذاة الكتل الرئيسية. أما Flexbox فيدير التفاعلات الدقيقة: روابط التنقل داخل تلك الكبسولة، وتوسيط النص داخل البطاقات، ودفع التذييل (footer) إلى أسفل نافذة العرض. معاً، يغنيانك عن كل سبب قد يدفعك لاستيراد إطار عمل شبكي مكون من اثني عشر عموداً في عام 2018. يظل الكود قابلاً للقراءة، ويظل ملف CSS صغيراً.
الألوان، الخطوط، والتحفظ
أردت أن يشعر معرض الأعمال بالهدوء بمجرد تحميله. تستخدم الخلفية قاعدة فاتحة مع تدرجات شعاعية (radial gradients) خفيفة. لا شيء هجومياً. التدرج موجود بشفافية منخفضة، مما يخلق عمقاً ناعماً يمنع الصفحة من أن تبدو مسطحة دون لفت الانتباه بشكل صارخ. يتم تحميله فوراً لأنه CSS خالص. لا توجد صور رئيسية (hero images) لضغطها، ولا بدائل WebP لإدارتها، ولا مكتبات JavaScript للتحميل الكسول (lazy-loading) لتهيئتها.
الخطوط هي التي تحمل الشخصية. قمت بالجمع بين Outfit و Ovo. خط Outfit، وهو sans-serif هندسي، يتولى جميع نصوص واجهة المستخدم: تسميات التنقل، نصوص الأزرار، نص المحتوى، والتفاصيل الوصفية. إنه واضح على الشاشات ويظل مقروءاً في الأحجام الصغيرة. أما Ovo، وهو serif متوسط التباين، فيخدم العناوين الرئيسية. هذا الجمع يمنح الصفحة شعوراً تحريرياً هادئاً؛ تبدو مصممة وليست مجرد قالب جاهز. والأهم من ذلك، يتم تحميل كلا الخطين من استدعاء واحد لخدمة الخطوط أو من ملفات مستضافة ذاتياً. لا توجد إزاحة في التخطيط (layout shift)، ولا وميض للنص غير المنسق، ولا تبديل لأوزان الخطوط بعد العرض الأولي.
قائمة الكبسولة العائمة
التنقل هو المكان الذي تنهار فيه معارض الأعمال غالباً تحت ثقلها الخاص. قوائم التراكب كاملة الشاشة، وسكربتات الرسوم المتحركة المتدرجة، وأيقونات الهامبرغر التي تتطلب أربعين سطراً من JavaScript لتبديل فئة (class). لم أرغب في أي من ذلك.
قمت ببناء قائمة كبسولة عائمة بتأثير زجاجي (glassmorphic). إنها حاوية أفقية واحدة، مستديرة الحواف، ومثبتة (fixed) بالقرب من الجزء العلوي من نافذة العرض. يأتي التأثير الزجاجي من لون خلفية شبه شفاف وخاصية backdrop-filter: blur(). تطفو فوق المحتوى دون حجبه، وتوفر وصولاً فورياً إلى كل قسم، وتتقلص بسلاسة في شاشات العرض الأصغر دون الحاجة لإعادة تصميم كاملة. يبدو التأثير حديثاً لأن المتصفح هو من يتولى عملية الدمج (compositing)، وليس مكتبة canvas.