Розробка розширених статей

Розробка красивої «статті» пов’язана з безліччю міркувань. На відміну, скажімо, від домашньої сторінки, розширена стаття стосується не так дизайну інтерфейсу, як дизайну тексту таким чином, щоб створити невимушене та комфортне читання.

Це тому, що статті стосуються довгострокового вмісту, який, у свою чергу, зазвичай оцінюється за «часом на сторінці» взаємодії з користувачами. Ми хочемо, щоб хтось прочитав повний наратив. Є природний проміжок між часом, коли хтось потрапляє на статтю, і читає всі слова. І, сподіваємось, цей простір є достатньо захоплюючим, щоб не лише втримати користувача, але й спонукати його до думок, ідей і, можливо, дій. Принаймні на це я сподіваюся, оскільки я привернув вашу увагу, і ви пробираєтеся через ту саму статтю, яку читаєте.

Є баланс. З одного боку, ми це чуємо «Інтернет ніхто не читає». З іншого боку, велика стаття вимагає пильної уваги. Враховуючи нинішню цінність контент-маркетингу та зростаюче нетерпіння користувачів, головною проблемою має бути залучення читачів якомога довше. Давайте розглянемо деякі найкращі практики та приклади неймовірних сторінок зі статтями, щоб отримати краще уявлення про те, що робить візуально привабливим читання довгих статей (без шкоди для досвіду користувача), і як ми можемо відтворити ефект.

Швидкі перемоги

Дозвольте мені швидко перерахувати те, що, на мою думку, може бути очевидним для багатьох із вас, але є ефективним для розбірливості вмісту:

• Збільшити розмір шрифту: Ми знаємо, що 16px за замовчуванням і цілком підходить для багатьох дизайнів, але більший розмір шрифту привабливий, оскільки він означає, що користувач може вільно відкинутися назад і влаштуватися, не нахиляючись вперед, дивлячись екраном на обличчя, щоб читати.
• Прагніть до кількості символів у рядку: Дуже небагато людей, яких я знаю, люблять працювати більше, ніж потрібно, і це також стосується читання. Щоб отримати менше символів у кожному рядку тексту. Ваша перевага може бути різною, хоча багато людей пропонують десь від 45 до 75 символів на рядок, щоб обмежити, наскільки далеко читачеві потрібно працювати, щоб рухатися зліва направо. Кріс має букмарклет для підрахунку символів, але ми також маємо 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 скорочення, має Шиме Відас кілька "поганок" коли справа доходить до його використання, які варто переглянути.

Ведучий у зміст

Капелюшки це стилізовані літери, які можна розмістити на початку документа або розділу документа. Колись їх використовували в латинських текстах, але сьогодні вони в основному використовуються в декоративних цілях.

Особисто я вважаю, що буквиці заважають читабельності. Однак вони можуть бути гарним способом «завести» читача до основного вмісту, і вони не повинні створювати серйозних проблем із доступністю, якщо ви використовуєте ::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 запропонував людям продемонструвати свої навички стилізації капелюшків, і ви можете побачити цілу купу гарних прикладів цього в цієї колекції.

Перейти до основного матеріалу

Програми зчитування екрана дозволяють користувачам переходити до основного вмісту, якщо він обертається в межах a <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 Відважний SpeedReader, які використовують машинне навчання для виявлення статей. Немає можливості отримати або виконати CSS, JavaScript або зображення, не пов’язані зі статтями, що підвищує продуктивність, а також блокує рекламу та відстеження.

Такого роду “грубий мінімалізм” фокусується на вмісті, а не на стилях. Отже, ви можете насправді хотіти щоб прийняти упевнені стилі читання браузера спеціально для цієї мети.

Спосіб зробити це не за допомогою CSS, а за допомогою більш пильної уваги до вашого HTML. Режими читання найкраще працюють із розміткою, яка використовує простий семантичний HTML, пов’язаний зі статтями. Ви повинні зробити більше, ніж просто ляпас теги навколо статті, щоб отримати від неї максимальну користь.

Ви можете просто виявити, що мінімальний дизайн, який підкреслює розбірливість, а не гладкість, насправді є хорошою стратегією для використання в дизайні вашого сайту. Я настійно пропоную прочитати допис Робіна на «найменший CSS” для якісного читання.

Збірка розгорнутих статей!

Я поділився багатьма з того, що, на мою думку, сприяє чудовому читанню довгих статей в Інтернеті. Але побачити означає повірити, і я зібрав купу прикладів, які демонструють те, що ми розглянули.