كيف صمّمت هذه المدونة

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

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

فكيف تبدو المدونة التي تُقرأ؟ أول ما يخطر في البال معروف. شبكات من البطاقات… صور غلاف كبيرة… نصوص تظهر كلما نزلت في الصفحة… أيّها يخدم القراءة؟ بصراحة لم أكن أعرف. فبدأت من هنا.

الناس لا يقرؤون، يتصفّحون

مجموعة Nielsen Norman Group تُجري دراسات لتتبّع حركة العين منذ سنوات، والنتيجة لا تتغير كثيرًا: من يقرؤون النص على الشاشة كلمةً كلمة أقلية، ومعظمنا يتصفّح.¹ (وأنا أفعل ذلك أيضًا، أعترف.) أكفأ طريقة للتصفح يسمّونها «نمط كعكة الطبقات». تقفز العين من عنوان إلى عنوان، وإذا لفت انتباهها قسمٌ ما دخلت فيه.²

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

وهناك قرار آخر قد لا يروق للبعض. لا توجد هنا وسوم مثل «مسودة» أو «فكرة قيد التطوير». حتى لو كتبت عن بحث لم يكتمل، أكتبه نصًّا مكتملًا. إذ لا أرى معنى لنشر شيء لا يبدو جادًّا في عين من يقرؤه.

كم يجب أن يكون طول السطر

بحسب الدراسات التي جمعها معهد Baymard، السطر المريح للقراءة يتراوح بين 50 و75 حرفًا.³ أما معيار الإتاحة WCAG فيعدّ 80 حرفًا حدًّا أعلى.⁴

أردت أن أرى الأرقام بعيني. فتحت 14 مدونة معروفة بتجربة قراءة جيدة، وقست في كل واحدة منها حجم الخط والمسافة بين الأسطر وعرض عمود النص. المريحة منها جاءت كلها في النطاق نفسه. عند Craig Mod الخط 20 بكسل والعمود 746. في Medium خط 20 وعمود 680. وفي Every خط 20 وعمود 736.

أما موقع Dan Luu فمثال يستحق الاعتبار. على الشاشة العريضة يصل السطر الواحد إلى 224 حرفًا، وحين تعود العين من نهاية السطر إلى بداية السطر التالي تضيع طريقها. في رأيي هذه أوضح صورة لمقال جيد يذهب هدرًا في صفحة سيئة.

هنا حجم الخط 20 بكسل على الكمبيوتر و17 على الهاتف. ارتفاع السطر يعادل 1.55 من حجم الخط، وعرض عمود النص 680 بكسل. وهذا يعطي بين 65 و70 حرفًا في السطر التركي (القياس أُخذ على النسخة التركية من المدونة). ومعروف أن الكلمات التركية طويلة، فتنكسر الأسطر أبكر قليلًا مما تنكسر في نص إنجليزي. ومع ذلك يبقى الرقم داخل النطاق.

قائمة بدل البطاقات

أكثر ما أراه في الصفحات الرئيسية للمدونات هو شبكة البطاقات. صندوق لكل مقال، وصورة لكل صندوق. بحسب NN/g، البطاقات جيدة لوضع محتويات مختلفة جنبًا إلى جنب، لكن تصفّح أشياء متشابهة مثل مقالات المدونة يصبح معها أصعب منه في القائمة، وتأخذ مساحة أكبر.⁵ وللمسألة جانب بصري أيضًا. حين تُلزم نفسك بإيجاد صورة لكل مقال، تجد نفسك بعد فترة تضع صورًا لا علاقة لها بالموضوع.

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

الواجهة داكنة، وهذا المكان فاتح

موقع أعمالي داكن، وهذا المكان فاتح. السبب نتيجة توصلت إليها NN/g: لدى أصحاب النظر الطبيعي تعطي الخلفية الفاتحة نتائج أفضل في القراءة، ويكبر الفرق كلما صغر الخط.⁶ في مكان ستُقرأ فيه نصوص طويلة، كان هذا كافيًا بالنسبة لي. إذا كان هاتفك أو حاسوبك على الوضع الداكن فسيفتح الموقع داكنًا أيضًا، ويمكنك تغييره متى شئت من الزر في أعلى الصفحة.

ما ليس هنا، وباب تركته مفتوحًا

لا نوافذ منبثقة، ولا صندوق اشتراك في نشرة بريدية، ولا تعليقات، ولا إعلانات. ولا ملفات تعريف ارتباط (cookies)، لذلك لا يوجد تنبيه بشأنها أيضًا. حتى الخطوط لا تأتي من خادم آخر.

في المواقع التي قستها رأيت بوضوح كم تُتعب هذه الأشياء القارئ. في صفحة مقال واحدة على Every كانت هناك خمس طبقات ثابتة في الوقت نفسه: الشريط العلوي، وشريط ملفات الارتباط، ونافذة التسجيل، وصندوقان في الزاويتين. وفي مقال على Substack طُلب مني الاشتراك أربع مرات. وصفحة Linear كانت تحمّل 217 سكربتًا منفصلًا. ولا شيء من هذا يجعل المقال أسهل قراءة.

في المقابل، هناك باب تركته مفتوحًا: روبوتات الذكاء الاصطناعي. يمكن أن تدخل إلى هنا الروبوتات التي تبحث، وتلك التي تجوب المواقع لتدريب النماذج. إذا كان استخدام مقالاتي في تدريب نموذج ما سيفيدني، فلا معنى لإغلاق ذلك الباب.

لماذا عنوان منفصل

فكرت أولًا في نطاق مستقل تمامًا مثل burakreis.blog. تكلفته 20 دولارًا في السنة، ولم أرغب في دفعها الآن. ثم عرفت أن Google تسمح بإعطاء النطاق الفرعي اسم موقع خاصًّا به.⁷ المدونة الآن على العنوان blog.designedbyburak.com. لا يوجد في قائمة موقع أعمالي رابط يؤدي إلى هنا، حتى تبقى الواجهة بسيطة. لكن اسم من يكتب موجود هنا في كل صفحة، والموقعان يعرف كل منهما الآخر.

إذا أزعجك شيء، سطر طويل أو خط صغير، اكتب لي: hello@designedbyburak.com

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