مدخل "Readability First" إلى استعلامات الوسائط والتخطيط

هناك عدد قليل من الطرق المختلفة لتصميم مواقع الويب المتعددة الدقة وتطبيق استعلامات الوسائط التي ظهرت في السنوات الأخيرة. بعض الممارسات التي ربما سمعت عنها بالفعل تتضمن:

• "Mobile First" - بدءًا من عرض موجه للهاتف يبلغ حوالي 320 بكسل ، ثم يزداد حجمه من هناك.
• "سطح المكتب لأسفل" - بدءاً بتصميم كامل الحجم ثم تقليص كما هو مطلوب.
• "المحتوى أولاً" - إنشاء محتوى اختبار في بداية العملية ثم تصميم حوله تدريجيًا.
• "Device Specific" - استهداف سلسلة من الحلول الخاصة بالجهاز بنقاط التوقف عندقيم px المقابلة ، مثل الهواتف من 320 بكسل إلى 480 بكسل ، والأجهزة اللوحية من 768 بكسل إلى 1024 بكسل ، و 1200 بكسل + لسطح المكتب وما إلى ذلك.
• "Device Agnostic" - إنشاء نظام "تصميم واحد يناسب الجميع" والذي يتناسب مع أي قرار.
  
• " منهج Goldilocks " - ترك حجم الخط الأساسي للمتصفح أو المستخدم لتعيينه على النحو المفضل ، ثم إنشاء تخطيط em مبتكر فوقه باستخدام ثلاثة تخطيطات: "كبير جدًا" ، "صغير جدًا" ، "صحيح تمامًا".

في هذه المقالة سوف أتحدث عن منهجية هي مزيج من بعض ما سبق ، مع بعض الإضافات التي تم تحريكها. انها على حد سواء "المحتوى الأول" و "الجهاز لا Agnostic" ، وكان في الأصل مستوحاة من "نهج Goldilocks" تركز على أساس م .

أود أن أفكر في ذلك كنهج "القراءة الأولى" . التصاميم الناتجة عن هذا النهج:

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

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

ولتوافق مع هذه النكهة ، سأشارك معك أيضًا برنامجًا نصيًا باسم " RDBL " ، والذي قمت بإنشائه لمساعدتك على تقييم مدى سهولة قراءة محتوى النص الخاص بك في نقاط مختلفة. حتى إذا كنت لا تعتمد طريقة "Readability First" ، فربما لا تزال تجد هذه الأداة الصغيرة مفيدة في أي أسلوب للتصميم سريع الاستجابة الذي تستخدمه.

مبادئ "القراءة الأولى"

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

1. لا تقم بتعيين حجم خط أساسي واضح. ترك ذلك لمتصفح أو تفضيل المستخدم

فكرة ترك الافتراضيات وحدها وليس تحديد حجم خط أساسي واضح للمستند الخاص بك هو مفهوم تعرفت عليه من خلال النهج Goldilocks .

تستند الفكرة العامة وراء هذا على ما يلي:

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

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

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

ومع ذلك ، إذا كنت بحاجة إلى تغيير حجم الخط الافتراضي من أجل تطبيعه ، فقم بذلك باستخدام القيمة النسبية ، أي النسبة المئوية أو em ، المطبقة على عنصر html . وبهذه الطريقة ، سيظل حجم النص الإجمالي محددًا من خلال إعدادات المتصفح / المستخدم ، ويمكن تنفيذ بقية مبادئ هذا المنهج.

1

html { font-size: 100%; }

2. أدخل المحتوى الوهمي في بداية عملية التصميم وليس النهاية

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

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

1. أدرج النص الوهمي في قسم أو عنصر مقال .
2. حدد font-family او font-weight من الاعدادات
3. قم بإضافة CSS نسبيًا مستندًا إلى الوحدة للتحكم في التخطيط حول هذا النص بطريقة تؤدي إلى تحسين إمكانية القراءة (المزيد حول هذا الأمر في الأقسام القادمة).
4. سوف تظهر ترجمتك في هذا الجانب. استخدم
   

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

سبب نقض هذه العملية هو:

1. من أجل "وظيفة الدهان" المرئية للتكيف بنجاح مع تخطيط مرن تحتاج إلى معرفة ما سيكون هذا التخطيط.
2. لإنشاء تخطيط محسن ومرن للقراءة ، يلزمك معرفة كيف سيظهر النص بداخله في المتصفح.
3. لترى كيف سيتم عرض النص تحتاج إلى معرفة font-family و font-weight بسبب التباين في الحجم .
   
4. لاختيار وتطبيق font-family وfont-weight، تحتاج النص التجريبي.

لذلك، في حين أن القرص لإعدادات الطباعة يمكن بالتأكيد أن تكون في وقت لاحق في العملية كجزء من تلميع تصميم والتحديدات الضرورية من الخط بين font-family وfont-weight يجب أن تطبق على النص قبل ان يستقر على التخطيط والتصميم.

3. بناء التصميم الخاص بك في نسبة ٪ وقيم em / rem ، وليس بكسل

في هذا النهج كقاعدة عامة لا تستخدم وحدات بكسل . بدلاً من ذلك ، يتم تعيين كل شيء من الطول والعرض ، إلى الهوامش والحشو ، إلى نصف القطر والعرض في نسبتي ٪ و em / rem نسبيًا .

الأسباب الأساسية لذلك هي:

1. ٪ على أغلفة وأعمدة التخطيط ، يمكنك إنشاء تصميم يتدفق عرضًا مائعًا بين نقاط التوقف الخاصة بك بدلاً من القفز من عرض إلى آخر.
2. من خلال استخدام قيم em / rem على كل شيء آخر ، فإن تصميمك بالكامل سيتناسب بشكل متناسب مع حجم الخط الأساسي للمتصفح / المستخدم.

من خلال استخدام قيم em / rem على كل شيء آخر ، فإن تصميمك بالكامل سيتناسب بشكل متناسب مع حجم الخط الأساسي للمتصفح / المستخدم.

لإنشاء غلاف حول التصميم الخاص بك والذي سيسمح بالملاءمة التامة لمنفذ العرض بين نقاط التوقف ، استخدم التقنية التالية:

1

.wrapper {

2

    width: 100%;

3

    max-width: 40em;

4

}

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

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

يمكن أن تحتوي الأعمدة الموجودة في هذا المجمّع أيضًا على قيم ٪ مطبقة عليها بدلاً منpx ، لذلك سيتم ضبطها أيضًا بشكل سلس في إطار viewports. يمكن تطبيق الحشو والحدود على أعمدة تستند إلى النسبة المئوية في قيم em دون إلقاء التخطيط من خلال التأكد من تعيين خاصية تحجيم مربع التصميم الخاص بك إلى مربعحدود . يجب تعيين الهوامش على الأعمدة بقيم٪.

ملاحظة : اقرأ المزيد حول العمل مع هذا النوع من نظام التخطيط في مقالتي على mixins الشبكة .

تصميم تخطيط em / rem قابل للتطوير بشكل موحد

باستخدام em / rem بدلاً من px ، ستحظى جوانب التصميم المختلفة لتصميمك دائمًا بأفضل علاقة ممكنة مع محتوى النص الخاص بك. بغض النظر عن إعداد المتصفح أو المستخدم ، فسيتم قياس حجم الخط الأساسي للتصميم بالكامل بشكل نسبي ، حيث لن يتم تغيير حجم النص إلا داخل حاوية ثابتة:

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

4. حافظ على محتوى النص الأساسي ضمن مجموعة مثالية من الأحرف في كل سطر

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

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

شخصيات لكل الساكي ، والكنائس في كل سطر

عندما نقرأ النص ، لا ينظر معظم الناس إلى كل حرف فردي أو كلمة واحدة في كل مرة. بدلاً من ذلك ، نميل إلى توجيه أعيننا إلى مجموعة من الشخصيات في كل مرة ، باستخدام الرؤية المحيطية لنقلها جميعًا. في كل مرة تتحرك العين من مجموعة من الشخصيات إلى المرحلة التالية تسمى القفزة "saccade". يمكن للصفراء أن تغطي أي مكان من 1 إلى 20 حرفًا ، ولكن المتوسط ​​يتراوح بين 7 و 9.

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

هناك بعض الجدل حول العدد الدقيق للناقلات التي يشعر القارئ العادي بالرضا عنها في كل سطر ، ولكن بعد الكثير من البحث وجدت أن حوالي تسعة هي قيمة تميل إلى إيجاد اتفاق عام. بناءً على هذه الأرقام ، من أجل تحسين قابلية القراءة للقارئ العادي ، يجب أن يتراوح عدد الأحرف في كل سطر بين 63 حرفًا (سبعة سكاكر) و 81 (لتسع متسكع).

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

كيفية تنفيذ "القراءة أولاً"

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

هذا هو "مبرمج" أحادي اللون فقط من أجل العرض ، ولكن يمكنك تطبيق هذه المبادئ والتقنيات على أي نمط تصميم فعليًا.

تبدأ من خلال إيجاد أقصى عرض القائمة على م قابل للقراءة

تبدأ من خلال إيجاد أقصى عرض القائمة على م قابل للقراءة هذا عادة يرقى إلى أقصى عرض في مكان ما حول 35em - 40em تعطي أو تأخذ بعض 'EMS'.

هذا يربط بين ما قمنا بتغطيته أعلاه بخصوص غلاف الموقع السائل الخاص بنا بنسبة عرض 100٪ بحد أقصى 40 مترًا. سيكون إعداد العرض الأقصى هذا أحد القيم التي تقوم بإعدادها من أجل الحفاظ على الأحرف في كل سطر أسفل الحد العلوي القابل للقراءة. إذا كنت تقوم بإنشاء تصميم عمود واحد ، فإن الغلاف الخارجي لموقعك سيكون في مكان ما حول 35em - 40em بالإضافة إلى أي مقدار مساحة حشو تضعه حول النص.

إذا كنت تقوم بإنشاء تصميم متعدد الأعمدة من ناحية أخرى ، فسيتم أيضًا إضافة عرض الأعمدة إلى العرض الإجمالي لمجمعك. على سبيل المثال ، إذا كانت منطقة المحتوى الأساسي لديك لا تحتاج إلى أكثر من 40 قدمًا وكانت داخل عمود بعرض 66.66٪ ، مع وجود شريط جانبي بجانبها عند 33.33٪ ، فسيحتاج عنصر المجمع الخارجي إلى إعداد أقصى عرض تقريبًا 60em. قد يبدو هذا الأمر معقدًا في البداية ، ولكنه في الواقع أمرًا بسيطًا إلى حد كبير للتنفيذ في الواقع ، كما سترى أدناه.

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

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

تبتل

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

سوف يعطيك RDBL شريط تمرير صغير فوق التصميم الخاص بك ، وقراءة من أجزاء مختلفة من المعلومات التي ستجدها مفيدة كجزء من هذه العملية. ما عليك سوى إخبار أي جزء من موقعك يستهدف تقييم قابلية القراءة ، أي منطقة المحتوى الأساسية الخاصة بك ، وسوف يخبرك ما إذا كان هذا العنصر "واسع جدًا" أو "Too Narrow" أو "In Range".

ملاحظة : البرنامج النصي تبدو تلقائيا ل مادة ، الباب أو الرئيسية العلامة، (بهذا الترتيب حسب الأفضلية)، ولكن يمكنك أيضا إدخال أي اسم الفئة أو معرف في حقل "الهدف المحتوى عنصر" بدلا من ذلك.

يمكنك سحب شريط التمرير الصغير لتغيير حجم موقعك ، (يحاكي هذا تغيير حجم المتصفح بطريقة أكثر قابلية للإدارة) ، وسيقوم تلقائيًا بتحديث القراءة أثناء التنقل. عندما تتحول الشاشة الخضراء "In Range" إلى اللون الأحمر ، يمكنك الاطلاع على المعلومات المعروضة لمعرفة النقطة التي حدثت بها هذه النقطة.

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

في هذا المثال ، بدأت باستخدام بعض المحتوى الوهمي في تنسيق HTML أساسي للغاية ، ووضع عنصر مقال داخل غلاف عنصر رئيسي (يمكنك استخدام أي من العلامات التي تفضلها):

1

<main>

2

<article>

3

<h3>Heading</h3>

4

<p>Put a few paragraphs of dummy text here.</p>

5

<p>I personally like Samuel L. Ipsum.</p>

6

</article>

7

</main>

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

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ثم أقوم أيضًا بتطبيق CSS بسيط للغاية والذي يترك حجم الخط الافتراضي وحده ،ويعين خاصية تغيير حجم المربع إلى مربع الحد ، ويخلق غلاف مرن حول المحتوى الخاص بي ، ويعين محتوى النص الأساسي الخاص بي لاستخدام عائلة الخط"Open Sans "من Google Webfonts ، ووزن الخط لهذا النص إلى 400 :

1

* {

2

    box-sizing:border-box;

3

  -moz-box-sizing:border-box;

4

}

5

html, body {

6

	padding:0;

7

	margin:0;

8

	font-family: 'Open Sans';

9

}

10

main {

11

	width:100%;

12

	max-width:40em;

13

	margin:3em auto;

14

}

15

h3 {

16

	font-weight: 700;

17

}

18

article {

19

	font-weight: 400;

20

}

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

أولاً ، أقوم بتحميل مخططي البسيط في Firefox ومعرفة ما إذا كانت علامة القراءة الصغيرة تظهر باللون الأحمر أو الأخضر:

عند عرض 40 ميلاً ، يخرج هذا النص حوالي 85 حرفًا في كل سطر ، وهو قليل جدًا. هذا متوسط ​​مأخوذ من الفقرة الأولى من النص في العنصر الهدف.

الآن لدي خياران. الأول هو مجرد استخدام الرقم العلوي من "المدى المقروء المقدر للقراءة" المعروض في القراءة كما هو الحد الأقصى ، وهو في هذه الحالة هو 38.117em. ومع ذلك ، هذا تقدير ، لذا يمكنني أيضًا استخدام شريط التمرير لتقليص الموقع تدريجيًا حتى أرى علامة القراءة تتحول إلى اللون الأخضر واتخذ عرض em المعروض في هذه النقطة:

وتبين أن هذا هو 38.5em ، قريبة جدا من التقدير. لذلك قمت بتغيير إعداد max-width من الالتفاف إلى هذه القيمة:

1

main {

2

    width:100%;

3

	max-width:38.5em;

4

	margin:3em auto;

5

}

وعلى تحديث RDBL سوف تظهر الآن أن النص داخل نطاق قابل للقراءة في أقصى عرض ممكن.

مضيفا الحشو

الآن بعد أن عرفت أن أقصى عرض قابل للقراءة هو 38.5em أريد إضافة بعض المساحة المحيطة على حواف هذا المحتوى. أقوم بتغيير CSS لعنصر المقالة الخاص بي كما يلي (مع لون خلفية بحيث يمكنك رؤية الحشو):

1

article {

2

    font-weight: 400;

3

	padding:1.25em 2.25em;

4

	background: #F5F5F5;

5

}

للسماح بإضافة 2.25 سم من العرض الإضافي إلى كل جانب من المقالة ، أضف 4.5 إم إلى أقصى عرض للمجمع الرئيسي . يمكنك حتى أتمتة هذه العملية من خلال استخدام المتغيرات preprocessor CSS .

1

main {

2

    width:100%;

3

	max-width:43em;

4

	margin:3em auto;

5

}

الآن على تحديث الحشو يضاف ، ولكن كما تم الحفاظ على العرض الداخلي 38.5 م لا يزال العلم قابلية القراءة الخضراء.

تنسيقات متعددة الأعمدة

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

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

لتحويل هذا التنسيق من تخطيط عمود واحد إلى متعدد الأعمدة عن طريق إضافة شريط جانبي ، أقوم بإضافة عنصر جانبي إلى HTML الخاص بي بعد عنصر المقالة:

1

<aside>

2

Sidebar

3

</aside>

أقوم بعد ذلك بإضافة بعض CSS لتحويل المقالة وبصرف النظر عن العناصر إلى أعمدة قائمة على عرض النسبة المئوية. نظرًا لأنني أقوم بإضافة عمود إضافي ، سيحتاج المجمع الرئيسي أيضًا أن يكون أوسع نطاقاً لاستيعابه. على الرغم من أنني لست متأكدًا تمامًا من العرض الذي ينبغي أن يكون عليه الالتفاف في الشريط الجانبي الجديد مع الاحتفاظ بالمحتوى بعرض قابل للقراءة.

على هذا النحو أعلق مؤقتًا على إعداد أقصى عرض للمجمع الرئيسي . سيسمح هذا لي باستخدام شريط التمرير RDBL لقياس التخطيط لأسفل من 100٪ حتى أجد الإعداد الجديد الذي يجب تطبيقه.

1

main {

2

    width:100%;

3

	/*max-width:43em;*/

4

	margin:3em auto;

5

}

6

h3 {

7

	font-weight: 700;

8

}

9

article {

10

	float:left;

11

	width:65%;

12

	font-weight: 400;

13

	padding:1.25em 2.25em;

14

	background: #F5F5F5;

15

}

16

aside {

17

	float:left;

18

	width:35%;

19

	padding:2.25em 1.25em;

20

	background: #CCC;

21

}

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

عندما يتحول العلم إلى اللون الأخضر ، تعرض قراءات "عرض المستند الحالي" قيمة 66.25 حتى لا أحذف إعداد أقصى عرض للمجمع الرئيسي الخاص بي وقم بتغييره إلى 66.25em. الآن على التحديث لدي مخطط عامود مائع حيث يتم تعيين المحتوى الأساسي ضمن نطاق قابل للقراءة بشكل افتراضي.

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

اعثر على "نقاط الاستراحة" ، ثم قم بتحسينها عبر استعلامات الوسائط

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

باستخدام شريط التمرير RDBL لتقليل عرض تخطيط العمودين ، فإن النقطة الأولى التي يظهر فيها العلم الأحمر مرة أخرى هي 54.812em ، وهذه المرة تظهر "Too Narrow" نظرًا لأن الأحرف في كل سطر تنخفض أقل من 63.

هذه هي "نقطة فاصل" القراءة الأولى ، ولذا سأقوم بإنشاء استعلام وسائط لمنع وصول منطقة المحتوى الأساسية إلى هذه النقطة. أريد إجراء الضبط قبل النقطة التي يصبح فيها التخطيط ضيقًا للغاية ، لذلك استخدم شريط التمرير RDBL لإطالة العرض مرة أخرى فقط بما يكفي للعودة إلى العلامة الخضراء. عند هذه النقطة تقول لي أنا في 55em واسعة. أنسخ محتويات حقل "رمز استعلام الوسائط" وألصقه في CSS:

1

@media (max-width: 55em) { /*...*/ }

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

أفعل ذلك عن طريق خفض النسبة المئوية لعرض العنصر المراد زيادة ، وزيادة النسبة المئوية لعرض عنصر المقالة:

1

@media (max-width: 55em) {

2

    article {

3

		width:70%;

4

	}

5

	aside {

6

		width:30%;

7

	}

8

}

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

النقطة التالية عند انقطاع قابلية القراءة تكون عند 50.875em عندما يصبح النص ضيقًا أكثر من اللازم. مرة أخرى ، أدفع العرض لأعلى بما يكفي للعودة إلى الأخضر ، ونسخ استعلام الوسائط من عنصر واجهة تعامل RDBL ، هذه المرة في 51em. لا يزال هذا العرض واسعًا للغاية بحيث لا يمكن تحويل التخطيط إلى عمود واحد ، لذا سأزيد عرض المقالة ونخفض الشريط الجانبي مرة أخرى:

1

@media (max-width: 51em) {

2

    article {

3

		width:75%;

4

	}

5

	aside {

6

		width:25%;

7

	}

8

}

تظهر نقطة فاصل القراءة التالية في 47.5em ، ويصبح الشريط الجانبي الآن صغيرًا لجعله أرق. ومع ذلك ، فأنا لا أزال أعلى بقليل من الـ 43em التي تم تعيينها أصلاً في الغلاف الرئيسي لكي يبقى المحتوى قابلاً للقراءة في عمود واحد. اذا ماذا افعل؟

الإجابة هي المضي قدمًا وتحويل التخطيط إلى عمود واحد في هذه المرحلة على أي حال ، ولكن لإضافة مساحة كافية إلى عنصر المقالة ، سيظل المحتوى داخل النطاق القابل للقراءة. لذلك أقوم بإنشاء استعلام وسائط آخر في 47.75em ، وزيادة مساحة العنوان إلى 4em ، وتحويل التخطيط إلى عمود واحد:

1

@media (max-width: 47.75em) { 

2

    article {

3

		float:none;

4

		padding:4.5em;

5

		width:100%;

6

	}

7

	aside {

8

		float:none;

9

		padding:4.5em;

10

		width:100%;

11

	}

12

}

عند التحديث ، أصبح التنسيق الآن في نطاق قابل للقراءة في عمود واحد عندما يصبح أضيق من 47.75em.

استمرار مع تقليص النقطة التالية عند انقطاع قابلية القراءة هو 40.187em مع النص ضيق جدًا. التخطيط موجود بالفعل في عمود واحد ، لذلك فإن الشيء الوحيد المتبقي الآن للسماح بمساحة أكبر للمحتوى هو تقليل المساحة. للقيام بذلك ، أقوم بإنشاء استعلام وسائط في الساعة 40.5 وتعيين الحشو مرة أخرى إلى المبلغ الأصلي الخاص به.

1

@media (max-width: 40.5em) {

2

    article {

3

		padding:2.25em 1.25em;

4

	}

5

	aside {

6

		padding:2.25em 1.25em;

7

	}

8

}

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

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

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

ومع ذلك ، فإن علامة "Too Narrow" أقل من هذه النقطة ليست مصدر قلق كبير ، نظرًا لأن الأجهزة التي لا يمكن عرضها إلا بحجم أقل من هذا لا تمثل سوى 2.9٪ من المساحة المتنقلة ، وحتى ذلك الحين سيكون لها فقط من 5 إلى 6 أحرف لكل خط قليلة جدا وهو ما زال مقبولا.

إضافة التصميم البصري "وظيفة الطلاء"

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

أثناء تطبيق التصميم المرئي ، قد تحتاج إلى ضبط التخطيط إلى درجة ، وإذا كان الأمر كذلك ، فما عليك سوى استخدام RDBL للحفاظ على تعديل إعداداتك لضمان بقائك ضمن نطاق قابل للقراءة.

لن أخوض في الكثير من التفاصيل حول التصميم هنا ، ولكن هناك بعض التوصيات العامة التي احتفظت بها للحفاظ على مرونة موقعك:

• كلما كان ذلك ممكنًا ، استخدم CSS3 بدلاً من الصور (على سبيل المثال الظلال ، التدرجات ، الزوايا الدائرية ، الحدود ، التوهجات) لأن الأنماط التي يتم إنشاؤها بهذه الطريقة قابلة للتوسع تمامًا طالما تم استخدام قيم em / rem.
• استخدم أيقونات الخط (على سبيل المثال Fontello) بدلاً من رموز الصور ، حيث سيتمقياسها أيضًا مع حجم خط المتصفح / المستخدم.
• في الأماكن التي تستخدم فيها الصور كخلفيات ، حاول أن تتأكد من إمكانية تلوينها لملء المساحة التي يجب أن يتسع نطاق تصميمها لتناسبها.
  

ملاحظة : إذا كنت معتادًا على العمل مع Photoshop لإنشاء عناصر تصميم تعتمد على الصور بشكل كبير ، فقد ترغب في التحقق من استخدام Adobe Edge Reflow بدلاً من ذلك كوسيلة لتوليد أنماط CSS3 بطريقة مألوفة لك. تحقق من مقالي هنا على " 5 أشياء مفيدة يمكنك القيام بها مع Reflow الآن " لمزيد من المعلومات حول هذا الخيار.

ملاحظات اضافية ، نصائح وتغطية

تعتبر التقنيات الموضحة في قسم "تنفيذ" من هذه المقالة مثالاً واحدًا فقط كيف يمكنك وضع منهج "Readability First" في العمل. لا توجد قواعد صارمة وسريعة لكيفية اتخاذ قرار التعامل مع "نقاط التوقف" القابلية للقراءة ، وإذا كنت ستقوم باختيارات تعديل مختلفة تمامًا عن ما قمت به في نفس السيناريو بشكل جيد تمامًا.

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

يمكنك تغيير الأحرف في كل نطاق خط في أي وقت عن طريق تغيير القيم مباشرة في الأداة ، أو يمكنك إطعام النطاق المفضل لديك عند تشغيل وظيفة التهيئة النصية ، على سبيل المثال init_rdbl (63 ، 90) ؛

نظرًا لأنك لا تقوم بتوسيع نطاق التنسيق لأعلى ولأسفل ، فلا داعي للقلق إذا رأيت وميضًا مختصرًا للعلامة الحمراء "عريضة جدًا" أو "تاو ضيق". إذا كان هناك عدد قليل جدًا من الأحرف يعرض 0.001 سم من العرض فإنه ليس بالأحرف الكبيرة. ما دمت ترى ذلك الفلاش الأحمر للحظة واحدة فقط يمكنك اعتبار تخطيطك ضمن نطاق قابل للقراءة.

آمل أن أطلعكم على بعض الأفكار الجديدة لكيفية الاقتراب من عملية تصميم التخطيط ، وعلى الأقل أداة مفيدة في شكل نص RDBL. المتعة جعل المحتوى الخاص بك أولا ، حيادية الجهاز ، وتصاميم موقع "أول قراءة" !