01 · نظرة عامة
مجلة تقدّم العشاء
في هذا التصوّر، تخيّلت Ember & Oak مطعمًا يطهو على حطب البلوط في بورتلاند منذ 2016 — من الأماكن التي تملك صالتها صوتًا خاصًّا بها، بينما تُصرّ معظم المواقع على الكلام فوقه. لذلك تكفّ الصفحة عن الاستعراض، وتصفّ المطعم كما تفعل مجلة طعام — ترويسة، ومقدّمة بارزة، وأعمدة مسطّرة، وأطباق تمتد حتى حافة الورقة، وقائمة طعام تقرؤها بدل أن تمرّ عليها مرورًا.
كل ما في الصفحة طباعيّ. لا فيديو في الواجهة، ولا استعراض بارالاكس، ولا مصادرة للتمرير. الحركة الوحيدة في البناء كله ارتفاعُ ثمانية بكسلات عند دخول كل قسم وانزياحٌ بطيء في صورة الترويسة، وكلاهما يتوقف تمامًا إذا طلب الزائر تقليل الحركة.
02 · الفكرة
موسميّ، غير مستعجل، على الورق
تحدّد التصوّر بسطر واحد من نصوص المطعم نفسه: قوائم موسمية يكتبها وادي ويلاميت، تُطهى على البلوط، وتُقدَّم على مهل. صار «على مهل» قيدَ التصميم: لا شيء في الصفحة يجوز له أن يستعجل القارئ — لا الانتقالات، ولا الحرف، ولا دعوات الفعل.
نتجت عن ذلك ثلاث قواعد يطيعها البناء كله. الحرف يقود والصور تسانده، لا العكس أبدًا. وكل حركة أبطأ مما يتوقع الزائر. ونموذج الحجز يجلس في نهاية الحكاية، لا في شريط لاصق يلاحقك على طول الصفحة.
الحرف يقود
خط Fraunces بحجم بصري متغيّر للعناوين، وLibre Franklin للنصوص. أما الصور فتُصفّ داخل الأعمدة كما تُصفّ الأطباق في مجلة.
أبطأ من المتوقع
منحنى تخفيف واحد — cubic-bezier(0.33, 1, 0.68, 1) — وظهورات تستغرق معظم ثانية حتى تستقر.
بلا ضغط
نموذج حجز واحد، في أسفل الصفحة، بعد أن تكون القائمة والشيف والصالة والمراجعات قد قدّمت الحجّة كاملة.
03 · الأهداف
ما كان على الصفحة أن تفعله
جعل قائمة الطعام مقروءة
المقبّلات والأطباق الرئيسية والحلويات في ثلاثة أقسام حقيقية بخطوط منقّطة وأسعار — البطاقة المطبوعة، على الشاشة، بأي عرض.
بيع الصالة من دون عرض شرائح
اثنتا عشرة صورة تدخل الشبكة في اللحظة التي يستحقها النص، بدل كاروسيل لا يقلّبه أحد.
إتمام الحجز في شاشة واحدة
ستة حقول، ومنطقة حيّة للتأكيد، ونقل التركيز إلى الرسالة كي يسمعها مستخدم قارئ الشاشة.
البقاء تحت ميزانية وزن صارمة
لا إطار عمل، ولا مكتبة كاروسيل، ولا خط أيقونات. كان على طبقة التفاعل كلها أن تتّسع في بضعة كيلوبايتات من JavaScript مكتوبة يدويًّا.
04 · ترتيب البناء
كيف بُنيت، بالترتيب
كُتبت الصفحة بالطريقة التي تُقرأ بها: البنية أولًا، ثم منظومة الحرف، ثم اللون، ثم قطعتا الحركة. لم يُنسَّق شيء قبل ترميزه، ولم يتحرك شيء قبل أن يكون مقروءًا وهو ساكن.
هيكل دلالي
كل محطة عبارة عن
<section>معaria-labelledbyيشير إلى عنوانها —#story،#menu،#chef،#gallery،#private،#press،#reservations. كانت بنية المستند صحيحة قبل كتابة قاعدة تنسيق واحدة.كتلة الرموز التصميمية
خمس وعشرون خاصية مخصّصة على
:root: سبعة ألوان، وخمس درجات شفافية للحبر، وعائلتا خطوط، ومنحنى تخفيف واحد، وارتفاع ترويسة واحد. ونِسَب التباين مدوّنة بجوار القيم التي احتاجت إلى فحص.شبكة الأعمدة
CSS Grid بعمود قياس مسمّى، بحيث يظل النص الطويل محدودًا بطول سطر مريح بينما تمتد الأطباق وقائمة الطعام على مسارات أعرض.
خمس عشرة نقطة كسر، بالدليل
خمسة عشر استعلام وسائط، كُتب كل واحد منها لمشكلة إعادة تدفق حقيقية لا لاسم جهاز.
أقل من ستة كيلوبايتات
تنقّل الجوال، وظهورات التمرير، وظل الترويسة، وانزياح الواجهة، ونموذج الحجز — 164 سطرًا، وIIFE واحدة، وحارس
matchMediaواحد في الأعلى.
05 · البنية
ثلاثة ملفات، لا شيء غيرها
لا مُجمِّع حزم، ولا مُحوِّل شيفرة، ولا node_modules. الموقع ثلاثة ملفات تُقدَّم كما كُتبت؛ والمتصفح هو بيئة التشغيل الوحيدة التي احتاجها يومًا.
├── index.html 32.6 KB — 7 أقسام، 12 صورة، 0 SVG مضمّن
├── styles.css 30.2 KB — 25 خاصية مخصّصة، 15 استعلام وسائط، كتلتان لتقليل الحركة
└── script.js 5.8 KB — 164 سطرًا: تنقّل · ظهورات · ترويسة · بارالاكس · نموذج
الحزمة التقنية
- Semantic HTML
- CSS Grid
- Custom properties
- IntersectionObserver
- matchMedia
- Fraunces
- Libre Franklin
- Vanilla JS
سطح الإتاحة
- aria-expanded
- aria-controls
- aria-labelledby
- aria-live
- aria-hidden
- Escape للإغلاق
- نقل التركيز عند الإرسال
06 · ما قاوَم
المشكلات، وما تغلّب عليها
تستخدم قائمة الطعام المطبوعة خطوطًا منقّطة تحمل العين من الطبق إلى السعر. وعلى الويب يُزيَّف ذلك عادة بصفّ من النقاط تقرؤها قارئات الشاشة بصوت عالٍ، واحدةً واحدة.
يُرسم الخط المنقّط بتدرّج خلفية متكرر على فاصل flex. إنه زخرفة لا محتوى، فلا تصادفه التقنيات المساعدة أبدًا — ويتمدد بإتقان في أي عرض.
كريميّ على كريميّ هو اللوحة كلها، واللوحات منخفضة التباين هي حيث تفشل الإتاحة بصمت — خصوصًا في حدود النماذج، وهي عناصر غير نصية يلزمها مع ذلك تباين 3:1.
لونان مميِّزان بدل واحد. #C4552D يرسم الخطوط والتعبئات؛ و#A8431F المُعتَّم محجوز لنص التمييز بتباين 5.54:1 على الكريمي. وحصلت حدود الحقول على رمز خاص بها عند 3.6:1، والنسبة مكتوبة في ملف الأنماط بجواره.
حركات الظهور عند التمرير تُخفي المحتوى افتراضيًّا. فإذا تعطّل السكربت — أو لم يعمل أصلًا — صارت الصفحة ورقة بيضاء.
حالة الإخفاء محصورة خلف صنف يضيفه السكربت بنفسه. لا سكربت، فلا صنف، فلا محتوى مخفيًّا: تُعرض الصفحة في حالتها النهائية المستقرة وتُقرأ بلا نقصان.
ترويسة البارالاكس أسهل طريقة لجعل موقع مطعم يبدو رخيصًا، وأسهل طريقة لجعله يتلعثم على هاتف متوسط.
تحويل واحد يقوده scrollY، بمعامل منخفض بما يكفي ليُحسّ عمقًا لا حركة — ويُتجاوز كليًّا تحت prefers-reduced-motion.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
قائمة الخريف
ثلاثة أطباق مصفوفة كبطاقة مطبوعة، بخطوطها المنقّطة كاملة، تعيد التدفق إلى عمود واحد مقروء على الهاتف من دون أن تفقد محاذاة الأسعار.
من صالة الطعام
شبكة صور تكسر إيقاعها بنفسها — امتدادات مختلفة وارتفاعات مختلفة — فتُقرأ كصفحة مزدوجة في مجلة لا كأداة معرض.
أصداء & مراجعات
اقتباسات صحفية مصفوفة كاقتباسات بارزة مع اسم المطبوعة بأحرف استهلالية صغيرة، مستعيرةً الأداة الطباعية الوحيدة التي تستحقها المطاعم فعلًا.
حجز، لا قمع تسويقي
ستة حقول، وتحقق فوري، ومنطقة حيّة مهذّبة للتأكيد ينتقل التركيز إليها — لا نافذة منبثقة، ولا عرض إضافي، ولا عدّ تنازلي.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمّنًا وقيد التشغيل. يُحمَّل عند الطلب — لا يُجلب شيء قبل أن تطلبه.
تخطَّ المعاينة الحية
البناء الحقيقي، يعمل داخل الصفحة. المعاينة الحية صفحة مضمّنة؛ اضغط Escape للخروج منها.
افتح في ملء الشاشة ↖
