تصميم المقالات الطويلة

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

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

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

انتصارات سريعة

دعني أسرد بسرعة ما أعتقد أنه قد يكون واضحًا بالفعل للكثير منكم ، ولكنه أشياء فعالة لوضوح المحتوى:

• تكبير حجم الخط: ونحن نعلم أن 16px هو الإعداد الافتراضي وهو جيد تمامًا في العديد من التصميمات ، ولكن حجم الخط الأكبر أمر جذاب لأنه يعني أن المستخدم يتمتع بحرية الاستلقاء والاستقرار دون الحاجة إلى الانحناء للأمام مع الشاشة في وجهه للقراءة.
• الهدف للأحرف في كل سطر: عدد قليل جدًا من الأشخاص الذين أعرفهم يحبون العمل بجدية أكبر مما يحتاجون إليه ، وهذا ينطبق أيضًا على القراءة. بدلاً من استخدام عرض إطار العرض الكامل ، حاول تضييق نطاق الأمور وتحقيق التوازن بينها وبين حجم الخط الأكبر للحصول عليه أقل الأحرف في كل سطر من النص. قد يختلف مكانك الجميل ، على الرغم من أن العديد من الأشخاص يقترحون ما بين 45-75 حرفًا في كل سطر للمساعدة في تحديد المدى الذي يجب أن تعمله عين القارئ للانتقال من اليسار إلى اليمين. كريس لديه Bookmarklet للمساعدة في حساب عدد الأحرف، ولكن لدينا أيضًا ch وحدة في CSS للحصول على نتائج يمكن التنبؤ بها.
• ارفع ارتفاع الخط: سوف يشعر ارتفاع الخط الافتراضي بالكسر. إنه أمر مضحك ، لكن المسافة الأكبر بين السطور (إلى حد ما ، بالطبع) هي عمل أقل للعيون ، وهو ما يبدو مناقضًا لنصيحة الأحرف لكل سطر حيث نريد عمومًا أن تقطع العيون مسافة أقصر. خط ارتفاع بين 1.2 و 1.5 يبدو أنه نطاق نموذجي جدًا للمحتوى الطويل.

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

تصميم لغرفة تنفس إضافية

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

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

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

text-underline-position: under; هو خط CSS الذي يجعل هذا العمل. بطبيعة الحال، text-decoration يجب تعيينه على شيء آخر غير none (underline في هذه الحالة) أيضًا.

المثال أعلاه يتميز أيضًا text-decoration-thickness، مما يغير سمك التسطير (وأنواع الخطوط الأخرى). يمكنك استخدام خاصية CSS هذه لمطابقة سمك الخط مع حجم و / أو وزن الخط.

هذا مثال كامل:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

ولكن قبل أن تصل إلى text-decoration اختصار ، Šime Vidas عدد قليل من "مسكتك" عندما يتعلق الأمر باستخدامه فإنه يستحق المراجعة.

يؤدي إلى المحتوى

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

أنا شخصياً أعتقد أن الأحرف الاستهلالية الكبيرة تعيق إمكانية القراءة. ومع ذلك ، يمكن أن تكون طريقة رائعة "لقيادة" القارئ إلى المحتوى الرئيسي ، ولا ينبغي لهم تقديم أية مشكلات خطيرة تتعلق بإمكانية الوصول طالما أنك تستخدم ::first-letter عنصر زائف. هناك أخرى (كبار السن) طرق التي تتضمن المزيد من HTML و CSS بالإضافة إلى استخدام سمات ARIA حتى يظل المحتوى قابلاً للوصول.

باستخدام ::first-letter، سيبدو CSS كما يلي:

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

بالتأكيد سيكون من الرائع لو تمكنا من استخدام ملف initial-letter الخاصية ، ولكن لا يوجد دعم كبير لها في الوقت الذي أكتب فيه هذا. إذا كان لدينا ذلك ، فسيتم حساب كل هذه الحسابات الخاصة بحجم الخط وارتفاع الخط بالنسبة لنا!

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

انتقل إلى المحتوى الرئيسي

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

سيبدو شيء هكذا:

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

هناك طرق أخرى للقيام بذلك بالطبع. فيما يلي بحثان أعمق حول إنشاء روابط التخطي.

مرئيات سلسة

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

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

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

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

ضع التركيز على النوع والدلالات

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

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

ولكن هناك أسباب وراء رغبة شخص ما في وضع القارئ. على سبيل المثال ، إنها مثل "عدم رؤية أي CSS" على الإطلاق. يعني ذلك وضع قارئ Safari or Brave SpeedReader. سرعة شجاع، والتي تستخدم التعلم الآلي لاكتشاف المقالات. لا يوجد جلب أو تنفيذ لصور CSS أو JavaScript أو صور غير مقالة ، مما يعزز الأداء ويمنع أيضًا الإعلانات والتتبع.

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

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

قد تجد فقط أن الحد الأدنى من التصميم الذي يؤكد على الوضوح على النعومة هو في الواقع استراتيجية جيدة لاستخدامها في تصميم موقعك. أقترح بشدة قراءة منشور Robin على ”الأصغر CSS "لتجربة قراءة قوية.

تقرير إخباري عن المقالات الطويلة!

لقد شاركت الكثير مما أعتقد أنه يوفر تجربة قراءة رائعة للمقالات الطويلة على الويب. لكن الرؤية هي تصديق وقد جمعت مجموعة من الأمثلة التي تعرض ما غطينا.