Ember & Oak مجلّة تقدّم العشاء

01 · نظرة عامّة

مجلّة تقدّم العشاء

تخيّلت في هذا المفهوم أنّ Ember & Oak مطعم يطهو على خشب البلّوط في بورتلاند منذ 2016 — من ذلك النوع من الأماكن التي لها صوت أصلًا، والذي تعلو عليه معظم مواقع المطاعم بالكلام. فتكفّ الصفحة عن الاستعراض، وتُخرِج المطعم كما تفعل مجلّة طعام: ترويسة، ومقدّمة بارزة، وأعمدة مسطّرة، ولوحات تمتدّ إلى حافّة الورق، وقائمة تُقرأ لا يُمرَّر بجانبها.

كل ما فيها حرفي. لا فيديو في الواجهة، ولا عرض بارالاكس، ولا اختطاف للتمرير. الحركة الوحيدة في العمل كلّه ارتفاع بثمانية بكسلات عند دخول القسم، وانجراف بطيء لصورة الترويسة، وكلاهما يتوقّف تمامًا حين يطلب الزائر تقليل الحركة.

02 · الفكرة

موسمي، بلا عجلة، على ورق

تحدّد المفهوم بسطر واحد كتبته للمطعم: قوائم موسمية يكتبها وادي ويلاميت، تُطهى على البلّوط، وتُقدَّم بلا عجلة. وصار «بلا عجلة» هو القيد التصميمي — لا شيء في الصفحة يجوز له أن يستعجل القارئ، لا الانتقالات ولا الحروف ولا دعوات الفعل.

ومن ذلك تنبع ثلاث قواعد، والعمل كلّه يلتزم بها.

• الحرف يقود، والصور تسند

  Fraunces بحجم بصري متغيّر للعرض، وLibre Franklin للنصّ. والصور الاثنتا عشرة موضوعة داخل الأعمدة كلوحات في مجلّة، لا مستعمَلة خلفياتٍ.

• أبطأ من المتوقّع

  منحنى تخفيف واحد للعمل كلّه — cubic-bezier(0.33, 1, 0.68, 1) — وظهور يستغرق معظم ثانية حتى يستقرّ.

• بلا ضغط

  نموذج حجز واحد، في أسفل الصفحة، بعد أن تكون القائمة ورئيس الطهاة والصالة والصحافة قد قدّمت حجّتها. لا شريط حجز لاصق يلاحقك في نزولك.

03 · الأهداف

ما كان على الصفحة أن تفعله

1. جعل القائمة مقروءة

   المقبّلات والأطباق الرئيسية والتحلية ثلاثة أقسام حقيقية بخطوط نقطية وأسعار — البطاقة المطبوعة، على الشاشة، بأي عرض.

2. بيع المكان بلا عرض شرائح

   اثنتا عشرة صورة موضوعة في الشبكة في اللحظة التي يستحقّها فيها النصّ، بدل دوّارة لا يقلّبها أحد.

3. استقبال حجز في شاشة واحدة

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

4. البقاء تحت ميزانية وزن صارمة

   بلا إطار عمل، وبلا مكتبة دوّارة، وبلا خطّ أيقونات. كان على طبقة التفاعل كلّها أن تتّسع في بضعة كيلوبايتات من جافاسكربت مكتوبة باليد.

04 · ترتيب البناء

كيف بُني، بالترتيب

كُتبت الصفحة كما تُقرأ: البنية أولًا، ثم نظام الحروف، ثم اللون، ثم الحركتان. لم يُنسَّق شيء قبل توسيمه، ولم يتحرّك شيء قبل أن يكون مقروءًا وهو ساكن.

1. الهيكل الدلالي

   سبعة أقسام، لكلٍّ منها aria-labelledby يشير إلى عنوانه: القصّة، والقائمة، ورئيس الطهاة، والمعرض، والقاعة الخاصّة، والصحافة، والحجوزات. وكان مخطّط المستند صحيحًا قبل كتابة أي قاعدة أنماط.

2. كتلة الرموز

   ستّة عشر custom property على :root — سبعة ألوان، وأربع درجات شفافية للحبر، ورمز مخصّص لحدود الحقول، وعائلتا خطوط، ومنحنى تخفيف، وارتفاع الترويسة. ونسب التباين في تعليقات إلى جانب القيم التي احتاجت فحصًا.

3. شبكة الأعمدة

   CSS Grid بعمود قياس مسمّى، فيبقى النصّ الطويل محدودًا بطول سطر مريح بينما تمتدّ اللوحات والقائمة عبر مسارات أعرض.

4. خمس عشرة نقطة انكسار كدليل

   خمسة عشر media query، كلٌّ منها مكتوب بإزاء مشكلة تدفّق حقيقية لا بإزاء اسم جهاز. وهي الأكثر في المجموعة، والقائمة سبب معظمها.

5. تحت ستّة كيلوبايتات

   التنقّل على الجوال، والظهور عند التمرير، وظلّ الترويسة، وانجراف الواجهة، ونموذج الحجز: 165 سطرًا في IIFE واحدة، مع حارس matchMedia في أعلاها.

05 · البنية

ثلاثة ملفات، ولا شيء غيرها

لا مُجمِّع ولا مُترجِم ولا node_modules. الموقع ثلاثة ملفات تُقدَّم كما كُتبت، والمتصفّح هو بيئة التشغيل الوحيدة التي احتاجها يومًا.

06 · ما الذي قاوم

مشكلات، وما تغلّب عليها

1. التحدّي

   القائمة المطبوعة تستعمل خطوطًا نقطية لتقود العين من الطبق إلى السعر. وعلى الويب يُزوَّر ذلك عادةً بصفّ من النقاط، فيقرأها قارئ الشاشة بعدها واحدةً واحدة.

   الحلّ

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

2. التحدّي

   الكريمي على الكريمي هو اللوحة كلّها، ولوحات التباين المنخفض هي حيث ترسب سهولة الوصول بصمت — خصوصًا في حدود الحقول، وهي محتوى غير نصّي ويلزمها 3:1 مع ذلك.

   الحلّ

   لمستان بدل واحدة. #C4552D يطلي الخطوط والمساحات؛ و#A8431F المعتَم محجوز لنصّ اللمسة عند 5.54:1 على الكريمي. وحدود الحقول نالت رمزها الخاص عند 3.6:1، والنسبة مكتوبة في ملف الأنماط إلى جانبه.

3. التحدّي

   حركات الظهور عند التمرير تخبّئ المحتوى افتراضيًا. وإن أخفق السكربت، أو لم يعمل أصلًا، فالصفحة ورق أبيض.

   الحلّ

   الحالة المخبّأة محصورة خلف صنف يضيفه السكربت بنفسه. فلا سكربت، فلا صنف، فلا محتوى مخبّأ: تُعرَض الصفحة في حالتها النهائية المستقرّة وتُقرأ قراءةً سليمة.

4. التحدّي

   ترويسة بارالاكس أسرع طريق لجعل موقع مطعم يبدو رخيصًا، وأسرع طريق لجعله يتلعثم على هاتف متوسّط.

   الحلّ

   تحويل واحد، يقوده scrollY بمعامل منخفض بما يكفي ليُقرأ عمقًا لا حركة، ويُتخطّى كلّيًا تحت prefers-reduced-motion.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

• قائمة الخريف

  ثلاثة أطباق مُخرَجة كبطاقة مطبوعة، بخطوطها النقطية كاملة، تتدفّق إلى عمود واحد مقروء على الهاتف دون أن تفقد محاذاة الأسعار.

• من صالة الطعام

  شبكة صور تكسر إيقاعها الخاص — امتدادات مختلفة، وارتفاعات مختلفة — فتُقرأ صفحةً مزدوجة في مجلّة لا أداةَ معرض.

• مقتطفات ومراجعات

  اقتباسات صحفية مُخرَجة اقتباساتٍ بارزة واسم المطبوعة بحروف كبيرة صغيرة، استعارةً للوسيلة الحرفية الوحيدة التي يستحقّها مطعم فعلًا.

• حجز، لا قمع تسويقي

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

08 · شغّله حيًّا

شغّله هنا

العمل الحقيقي، مضمّنًا ويعمل. لا يُجلَب منه شيء حتى تطلب، فتبقى الصفحة التي تقرأها خفيفةً كما تبدو.

emberandoak.com

شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة. المعاينة الحيّة صفحة مضمّنة. اضغط Escape لمغادرتها.

افتحه بملء الشاشة